Added Chat Route in App.tsx to make Chat feature accessible (#3255)

* added chatroute

* fixed race condition in chat.tsx

* added await to ensure updated queryData

* fixed errors in test

Author: Aad1tya27

src/App.tsx

@@ -38,7 +38,7 @@ import Posts from 'screens/UserPortal/Posts/Posts';
 import Organizations from 'screens/UserPortal/Organizations/Organizations';
 import People from 'screens/UserPortal/People/People';
 import Settings from 'screens/UserPortal/Settings/Settings';
-// import Chat from 'screens/UserPortal/Chat/Chat';
+import Chat from 'screens/UserPortal/Chat/Chat';
 import { useQuery } from '@apollo/client';
 import { CHECK_AUTH } from 'GraphQl/Queries/Queries';
 import Advertisements from 'components/Advertisements/Advertisements';
@@ -191,6 +191,7 @@ function app(): JSX.Element {
         <Route element={<SecuredRouteForUser />}>
           <Route path="/user/organizations" element={<Organizations />} />
           <Route path="/user/settings" element={<Settings />} />
+          <Route path="/user/chat/:orgId" element={<Chat />} />
           {/* <Route path="/user/chat" element={<Chat />} /> */}
           <Route element={<UserScreen />}>
             <Route path="/user/organizations" element={<Organizations />} />

src/screens/UserPortal/Chat/Chat.spec.tsx

@@ -29,6 +29,7 @@ import {
   UNREAD_CHAT_LIST,
 } from 'GraphQl/Queries/PlugInQueries';
 import useLocalStorage from 'utils/useLocalstorage';
+import { StaticMockLink } from 'utils/StaticMockLink';
 // import userEvent from '@testing-library/user-event';
 
 /**
@@ -4289,9 +4290,27 @@ describe('Testing Chat Screen [User Portal]', () => {
         {
           _id: '1',
           isGroup: false,
-          users: [{ _id: '1', firstName: 'John', lastName: 'Doe' }],
+          users: [
+            {
+              _id: '1',
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'johndoe@example.com',
+              image: null,
+            },
+          ],
           messages: [],
+          name: null,
+          image: null,
           unseenMessagesByUsers: '{}',
+          creator: {
+            _id: '1',
+            firstName: 'John',
+            lastName: 'Doe',
+            email: 'johndoe@example.com',
+          },
+          organization: null,
+          admins: [],
         },
       ],
     };
@@ -4319,13 +4338,44 @@ describe('Testing Chat Screen [User Portal]', () => {
           },
         },
       },
+      {
+        request: {
+          query: UNREAD_CHAT_LIST,
+        },
+        result: {
+          data: {
+            getUnreadChatsByUserId: [],
+          },
+        },
+      },
+      {
+        request: {
+          query: GROUP_CHAT_LIST,
+        },
+        result: {
+          data: {
+            getGroupChatsByUserId: [],
+          },
+        },
+      },
+      {
+        request: {
+          query: CHATS_LIST,
+          variables: { id: '1' },
+        },
+        result: {
+          data: mockChatsData,
+        },
+      },
     ];
-
+    const link = new StaticMockLink(mocks, true);
     render(
-      <MockedProvider mocks={mocks} addTypename={false}>
+      <MockedProvider link={link} addTypename={false}>
         <BrowserRouter>
           <Provider store={store}>
-            <Chat />
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
           </Provider>
         </BrowserRouter>
       </MockedProvider>,
@@ -4387,6 +4437,7 @@ describe('Testing Chat Screen [User Portal]', () => {
     const contactCards = await screen.findAllByTestId('contactCardContainer');
     expect(contactCards).toHaveLength(1);
   });
+
   test('Screen should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} mocks={mock}>
@@ -4514,6 +4565,7 @@ describe('Testing Chat Screen [User Portal]', () => {
       fireEvent.click(await screen.findByTestId('allChat'));
     });
   });
+
   it('should fetch and set group chats when filterType is "group"', async () => {
     setItem('userId', '1');
 

src/screens/UserPortal/Chat/Chat.tsx

@@ -111,25 +111,6 @@ export default function chat(): JSX.Element {
   const { getItem } = useLocalStorage();
   const userId = getItem('userId');
 
-  React.useEffect(() => {
-    if (filterType === 'all') {
-      chatsListRefetch();
-      if (chatsListData && chatsListData.chatsByUserId) {
-        setChats(chatsListData.chatsByUserId);
-      }
-    } else if (filterType === 'unread') {
-      unreadChatListRefetch();
-      if (unreadChatListData && unreadChatListData.getUnreadChatsByUserId) {
-        setChats(unreadChatListData.getUnreadChatsByUserId);
-      }
-    } else if (filterType === 'group') {
-      groupChatListRefetch();
-      if (groupChatListData && groupChatListData.getGroupChatsByUserId) {
-        setChats(groupChatListData.getGroupChatsByUserId);
-      }
-    }
-  }, [filterType]);
-
   const [createDirectChatModalisOpen, setCreateDirectChatModalisOpen] =
     useState(false);
 
@@ -180,6 +161,28 @@ export default function chat(): JSX.Element {
     });
   }, [selectedContact]);
 
+  React.useEffect(() => {
+    async function getChats(): Promise<void> {
+      if (filterType === 'all') {
+        await chatsListRefetch();
+        if (chatsListData && chatsListData.chatsByUserId) {
+          setChats(chatsListData.chatsByUserId);
+        }
+      } else if (filterType === 'unread') {
+        await unreadChatListRefetch();
+        if (unreadChatListData && unreadChatListData.getUnreadChatsByUserId) {
+          setChats(unreadChatListData.getUnreadChatsByUserId);
+        }
+      } else if (filterType === 'group') {
+        await groupChatListRefetch();
+        if (groupChatListData && groupChatListData.getGroupChatsByUserId) {
+          setChats(groupChatListData.getGroupChatsByUserId);
+        }
+      }
+    }
+    getChats();
+  }, [filterType]);
+
   React.useEffect(() => {
     if (chatsListData && chatsListData?.chatsByUserId.length) {
       setChats(chatsListData.chatsByUserId);