Update sidebar component

src/components/Sidebar/index.tsx

@@ -2,8 +2,14 @@ import { useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router';
 import { useLazyQuery, useReactiveVar } from '@apollo/client';
 import { roleVar, userVar } from '../../graphql/state';
-import { Box, ContextMenu, IconButton, SidebarItem } from '..';
+import {
-import { Add } from '../../assets';
+  Box,
+  ContextMenu,
+  IconButton,
+  MessagingSidebar,
+  SidebarItem,
+} from '..';
+import { Add, Messaging } from '../../assets';
 import { Wrapper } from './styles';
 import {
   CategoryOutput,
@@ -12,6 +18,8 @@ import {
   GetAllCategoriesQueryVariables,
   GetAllFeaturesQuery,
   GetAllFeaturesQueryVariables,
+  GetAllProjectsByClientIdQuery,
+  GetAllProjectsByClientIdQueryVariables,
   GetAllProjectsQuery,
   GetAllProjectsQueryVariables,
   GetAllTemplatesQuery,
@@ -20,7 +28,10 @@ import {
   TemplateOutput,
 } from '../../graphql/types';
 import { GET_ALL_CATEGORIES } from '../../graphql/category.api';
-import { GET_ALL_PROJECTS } from '../../graphql/project.api';
+import {
+  GET_ALL_PROJECTS,
+  GET_ALL_PROJECTS_BY_CLIENT_ID,
+} from '../../graphql/project.api';
 import { GET_ALL_TEMPLATES } from '../../graphql/template.api';
 import { GET_ALL_FEATURES } from '../../graphql/feature.api';
 
@@ -33,19 +44,32 @@ const Sidebar = () => {
   const [templates, setTemplates] = useState<Array<TemplateOutput>>();
   const [features, setFeatures] = useState<Array<FeatureOutput>>();
   const [categories, setCategories] = useState<Array<CategoryOutput>>();
+  const [messagingSidebarOpen, setMessagingSidebarOpen] = useState<boolean>(
+    false
+  );
+
+  const [
+    getProjectsByClientId,
+    { loading: clientProjectsLoading },
+  ] = useLazyQuery<
+    GetAllProjectsByClientIdQuery,
+    GetAllProjectsByClientIdQueryVariables
+  >(GET_ALL_PROJECTS_BY_CLIENT_ID, {
+    variables: {
+      id: currentUser?.id!,
+    },
+    onCompleted({ getAllProjectsByClientId }) {
+      setProjects(getAllProjectsByClientId);
+    },
+    fetchPolicy: 'network-only',
+  });
 
   const [getProjects] = useLazyQuery<
     GetAllProjectsQuery,
     GetAllProjectsQueryVariables
   >(GET_ALL_PROJECTS, {
     onCompleted({ getAllProjects }) {
-      setProjects(
+      setProjects(getAllProjects);
-        role === 'client'
-          ? getAllProjects.filter(
-              (project) => project.clientId === currentUser?.id
-            )
-          : getAllProjects
-      );
     },
     fetchPolicy: 'network-only',
   });
@@ -82,7 +106,8 @@ const Sidebar = () => {
 
   useEffect(() => {
     if (/project/i.test(location.pathname)) {
-      getProjects();
+      if (role !== 'client') getProjects();
+      else getProjectsByClientId({ variables: { id: currentUser?.id! } });
     }
 
     if (/template/i.test(location.pathname)) {
@@ -112,15 +137,14 @@ const Sidebar = () => {
         <>
           <Box display='flex' flexDirection='column'>
             {projects &&
-              projects.map((project, index) => (
+              projects.map((project) => (
                 <Box marginBottom='20px' key={project.id}>
                   <div id={`project-${project.id}`}>
                     <SidebarItem
                       color={role}
-                      selected={
+                      selected={new RegExp(project.id, 'i').test(
-                        new RegExp(project.id, 'i').test(location.pathname) ||
+                        location.pathname
-                        (index === 0 && location.pathname === '/project')
+                      )}
-                      }
                       text={project.name[0]}
                       onClick={() => history.push(`/project/${project.id}`)}
                     />
@@ -192,7 +216,8 @@ const Sidebar = () => {
                 </Box>
               ))}
           </Box>
-          <Box>
+          <Box display='flex' flexDirection='column'>
+            <Box marginBottom='20px'>
               <IconButton
                 icon={<Add />}
                 color={role}
@@ -212,8 +237,21 @@ const Sidebar = () => {
                 }}
               />
             </Box>
+            {/\/project/i.test(location.pathname) && (
+              <Box>
+                <IconButton
+                  icon={<Messaging />}
+                  color={role}
+                  onClick={() => setMessagingSidebarOpen(!messagingSidebarOpen)}
+                />
+              </Box>
+            )}
+          </Box>
         </>
       )}
+      {messagingSidebarOpen && (
+        <MessagingSidebar onClose={() => setMessagingSidebarOpen(false)} />
+      )}
     </Wrapper>
   );
 };