Add messaginge sidebar component

src/components/MessagingSidebar/index.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router';
+import { useLazyQuery, useReactiveVar } from '@apollo/client';
+import { roleVar } from '../../graphql/state';
+import { Box, Button, Text } from '..';
+import { Wrapper } from './styles';
+import {
+  GetProjectThreadsQuery,
+  GetProjectThreadsQueryVariables,
+  ThreadObject,
+} from '../../graphql/types.support';
+import { GET_PROJECT_THREADS } from '../../graphql/chat.api.support';
+import { Add, Empty } from '../../assets';
+import { clientSupport } from '../..';
+
+type MessagingSidebarProps = {
+  onClose: () => void;
+};
+
+const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
+  const role = useReactiveVar(roleVar);
+  const location = useLocation();
+  const history = useHistory();
+  const [projectThreads, setProjectThreads] = useState<Array<ThreadObject>>();
+
+  useEffect(() => {
+    (async () => {
+      if (/\/project/i.test(location.pathname)) {
+        const threads = await clientSupport.query<
+          GetProjectThreadsQuery,
+          GetProjectThreadsQueryVariables
+        >({
+          query: GET_PROJECT_THREADS,
+          variables: {
+            projectId: location.pathname.split('/')[2]!,
+          },
+        });
+        setProjectThreads(threads?.data?.getProjectThreads!);
+      }
+    })();
+
+    // eslint-disable-next-line
+  }, [location.pathname]);
+
+  return (
+    <Wrapper color={role || 'client'}>
+      <Box className='overlay' onClick={onClose}></Box>
+      <Box padding='25px 20px'>
+        <Box
+          display='flex'
+          flexDirection='row'
+          alignItems='center'
+          marginBottom='20px'
+        >
+          <Box flexGrow='1'>
+            <Text variant='title' weight='bold' color='white'>
+              Messaging Support
+            </Text>
+          </Box>
+          <Button
+            variant='secondary-action'
+            color={role || 'client'}
+            text='Add'
+            iconLeft={<Add />}
+            onClick={() => {
+              onClose();
+              history.push(
+                `/support-messaging/${location.pathname.split('/')[2]}`
+              );
+            }}
+          />
+        </Box>
+        {projectThreads && projectThreads.length > 0 ? (
+          <Box
+            display='grid'
+            gridTemplateColumns='1fr'
+            rowGap='10px'
+            alignItems='center'
+          >
+            {projectThreads.map((thread) => (
+              <Box
+                key={thread.id}
+                padding='10px 15px'
+                background='white'
+                cursor='pointer'
+                borderRadius='10px'
+                onClick={() => {
+                  onClose();
+                  history.push(
+                    `/support-messaging/${location.pathname.split('/')[2]}/${
+                      thread.id
+                    }`
+                  );
+                }}
+              >
+                <Text variant='body'>{thread.title}</Text>
+              </Box>
+            ))}
+          </Box>
+        ) : (
+          <Box
+            width='100%'
+            height='100vh'
+            display='grid'
+            alignItems='center'
+            justifyContent='center'
+          >
+            <Box>
+              <Empty />
+            </Box>
+          </Box>
+        )}
+      </Box>
+    </Wrapper>
+  );
+};
+
+export default MessagingSidebar;

src/components/MessagingSidebar/styles.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+type WrapperProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  position: fixed;
+  top: 0;
+  left: 75px;
+  z-index: 100;
+  width: 500px;
+  height: 100vh;
+  background: ${({ theme, color }) =>
+    color ? theme.colors[color].main : theme.colors.client.main};
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 575px;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  .empty {
+    fill: ${({ theme, color }) =>
+      color ? theme.colors[color].main : theme.colors.client.main};
+  }
+
+  .messaging-empty {
+    fill: white;
+  }
+`;