Merge pull request #17 from pesto-students/feature-kaban-board

kanban board

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint . --ext .ts,.tsx"
   },
   "dependencies": {
+    "@atlaskit/avatar-group": "^9.2.4",
     "@atlaskit/icon": "^21.11.5",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
@@ -25,15 +26,20 @@
     "axios": "^1.3.4",
     "date-fns": "^2.29.3",
     "firebase": "^9.18.0",
+    "fuse.js": "^6.6.2",
     "history": "^5.3.0",
+    "lodash": "^4.17.21",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.2"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.192",
     "@types/react": "^18.0.27",
+    "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "@typescript-eslint/parser": "^5.54.0",

src/App/App.tsx

@@ -23,14 +23,12 @@ const StyledSnackbarContent = styled(MaterialDesignContent)(({ theme }) => ({
 const App = () => {
   const content = useRoutes(router);
 
-  const user = useAppSelector((state) => state.auth.value);
-  console.log('user from state', user);
-
   const dispatch = useAppDispatch();
   useEffect(() => {
     onAuthStateChanged(auth, (user) => {
       if (user) {
-        dispatch(saveUser(user.refreshToken));
+        dispatch(saveUser(user));
+        localStorage.setItem('token', (user as any).accessToken);
       } else {
         dispatch(saveUser(undefined));
       }

src/App/axios.ts

@@ -7,7 +7,6 @@ axios.interceptors.request.use(
     if (config.method === 'post') {
       config.headers['Content-Type'] = 'application/json';
     }
-    console.log('Intercepted request', config);
     return config;
   },
   (error) => {
@@ -16,7 +15,7 @@ axios.interceptors.request.use(
 );
 
 export const request = axios.create({
-  baseURL: 'https://dev--mira-backend.netlify.app/.netlify/functions/api/v1',
+  baseURL: 'https://dev--mira-backend.netlify.app/.netlify/functions',
   headers: { Authorization: `Bearer ${token}` },
   timeout: 4000,
 });

src/App/router.tsx

@@ -5,6 +5,8 @@ import Home from 'features/home';
 import Status404 from 'features/home/Status404';
 // types
 import type { RouteObject } from 'react-router';
+import ProjectBoard from 'features/Board';
+import SidebarLayout from 'shared/components/layout/SidebarLayout';
 
 const router: RouteObject[] = [
   {
@@ -29,6 +31,16 @@ const router: RouteObject[] = [
         path: '*',
         element: <Status404 />,
       },
+      {
+        path: 'project',
+        element: <SidebarLayout />,
+        children: [
+          {
+            path: ':id',
+            element: <ProjectBoard />,
+          },
+        ],
+      },
     ],
   },
 ];

src/App/store.ts

@@ -1,10 +1,20 @@
 import { configureStore } from '@reduxjs/toolkit';
 import authReducer from 'features/auth/authSlice';
+import filterReducer from 'features/Board/Filters/FilterSlice';
+import boardReducer from 'features/Board/BoardSlice';
+import listReducer from 'features/Board/Lists/ListsSlice';
 
 const store = configureStore({
   reducer: {
     auth: authReducer,
+    filterBar: filterReducer,
+    board: boardReducer,
+    card: listReducer,
   },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
 });
 
 export default store;

src/App/theme/theme.tsx

@@ -19,13 +19,38 @@ const LinkBehavior = React.forwardRef<
 
 LinkBehavior.displayName = 'LinkBehavior';
 
-const themeOptions: ThemeOptions = {
-  colors: {
-    shadows: {
-      primary:
-        '0px 1px 4px rgba(85, 105, 255, 0.25), 0px 3px 12px 2px rgba(85, 105, 255, 0.35)',
-    },
+const colors = {
+  primary: '#0052cc', // Blue
+  success: '#0B875B', // green
+  danger: '#E13C3C', // red
+  warning: '#F89C1C', // orange
+  secondary: '#F4F5F7', // light grey
+
+  textDarkest: '#172b4d',
+  textDark: '#42526E',
+  textMedium: '#5E6C84',
+  textLight: '#8993a4',
+  textLink: '#0052cc',
+
+  backgroundDarkPrimary: '#0747A6',
+  backgroundMedium: '#dfe1e6',
+  backgroundLight: '#ebecf0',
+  backgroundLightest: '#F4F5F7',
+  backgroundLightPrimary: '#D2E5FE',
+  backgroundLightSuccess: '#E4FCEF',
+
+  borderLightest: '#dfe1e6',
+  borderLight: '#C1C7D0',
+  borderInputFocus: '#4c9aff',
+
+  shadows: {
+    primary:
+      '0px 1px 4px rgba(85, 105, 255, 0.25), 0px 3px 12px 2px rgba(85, 105, 255, 0.35)',
   },
+};
+
+const themeOptions: ThemeOptions = {
+  colors,
   palette: {
     primary: {
       main: '#2151c5',
@@ -76,6 +101,11 @@ const themeOptions: ThemeOptions = {
         size: 'small',
       },
     },
+    MuiToggleButton: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
     MuiAppBar: {
       defaultProps: {
         color: 'transparent',
@@ -104,6 +134,7 @@ const themeOptions: ThemeOptions = {
     MuiCheckbox: {
       defaultProps: {
         size: 'small',
+        disableRipple: true,
       },
     },
     MuiFab: {
@@ -164,15 +195,78 @@ const themeOptions: ThemeOptions = {
       } as LinkProps,
     },
   },
+  sidebar: {
+    width: '290px',
+  },
 };
 
 declare module '@mui/material/styles' {
+  interface Theme {
+    colors: {
+      primary: string;
+      success: string;
+      danger: string;
+      warning: string;
+      secondary: string;
+
+      textDarkest: string;
+      textDark: string;
+      textMedium: string;
+      textLight: string;
+      textLink: string;
+
+      backgroundDarkPrimary: string;
+      backgroundMedium: string;
+      backgroundLight: string;
+      backgroundLightest: string;
+      backgroundLightPrimary: string;
+      backgroundLightSuccess: string;
+
+      borderLightest: string;
+      borderLight: string;
+      borderInputFocus: string;
+
+      shadows: {
+        primary: string;
+      };
+    };
+    sidebar: {
+      width: string;
+    };
+  }
+
   interface ThemeOptions {
     colors: {
+      primary: string;
+      success: string;
+      danger: string;
+      warning: string;
+      secondary: string;
+
+      textDarkest: string;
+      textDark: string;
+      textMedium: string;
+      textLight: string;
+      textLink: string;
+
+      backgroundDarkPrimary: string;
+      backgroundMedium: string;
+      backgroundLight: string;
+      backgroundLightest: string;
+      backgroundLightPrimary: string;
+      backgroundLightSuccess: string;
+
+      borderLightest: string;
+      borderLight: string;
+      borderInputFocus: string;
+
       shadows: {
         primary: string;
       };
     };
+    sidebar: {
+      width: string;
+    };
   }
 }
 

src/App/types.ts

@@ -0,0 +1,38 @@
+export interface Icard {
+  _id: string;
+  title: string;
+  description: string;
+  id: string;
+  project?: Iproject;
+  createdBy?: string;
+  assignee?: string;
+  estimatedDate?: Date;
+  prioroity?: string;
+  status?: string;
+  reporter?: Iuser;
+}
+
+export interface Iproject {
+  name: string;
+  description: string;
+  logo: string;
+  users: Iuser[];
+  admins: Iadmin[];
+  id: string;
+}
+
+export interface Iuser {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  imageUrl: string;
+}
+
+export interface Iadmin {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  imageUrl: string;
+}

src/features/Board/BoardSlice.ts

@@ -0,0 +1,48 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { Iboard } from './types';
+import { request } from 'app/axios';
+
+export const fetchProject = createAsyncThunk('board/fetchProject', async () => {
+  return request
+    .get('/api/v1/projects/642569949ef06adb176ed64e')
+    .then(({ data: { data } }) => data.data);
+});
+
+const initialState: Iboard = {
+  title: 'Kanban Board',
+  project: null,
+  loading: true,
+  error: '',
+  allUsers: [],
+};
+
+const boardSlice = createSlice({
+  name: 'board',
+  initialState,
+  reducers: {
+    setTitle: (state, action) => {
+      state.title = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    // builder.addCase(fetchProject.pending, (state) => {
+    //   state.loading = true;
+    // });
+    builder.addCase(fetchProject.fulfilled, (state, action) => {
+      const { admins, users } = action.payload;
+      state.loading = false;
+      state.project = action.payload;
+      state.error = '';
+      state.allUsers = [...admins, ...users];
+    });
+    builder.addCase(fetchProject.rejected, (state, action) => {
+      state.loading = false;
+      state.project = null;
+      state.error = action.error.message || 'Something went wrong';
+    });
+  },
+});
+
+export const { setTitle } = boardSlice.actions;
+
+export default boardSlice.reducer;

src/features/Board/Filters/FilterSlice.ts

@@ -0,0 +1,35 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { Ifilters } from '../types';
+
+const initialState: Ifilters = {
+  searchTerm: '',
+  userIds: [],
+  myOnly: false,
+  recent: false,
+};
+
+const filterSlice = createSlice({
+  name: 'board/filter',
+  initialState,
+  reducers: {
+    setSearchTerm: (state, action) => {
+      console.log('action', action);
+      state.searchTerm = action.payload;
+    },
+    setUserIds: (state, action) => {
+      state.userIds = action.payload;
+    },
+    setMyOnly: (state, action) => {
+      state.myOnly = action.payload;
+    },
+    setRecent: (state, action) => {
+      state.recent = action.payload;
+    },
+    setClearAll: () => initialState,
+  },
+});
+
+export const { setSearchTerm, setUserIds, setMyOnly, setRecent, setClearAll } =
+  filterSlice.actions;
+
+export default filterSlice.reducer;