Fix Misplaced Screen Title & Fix Layout Structure

package.json

@@ -8,8 +8,8 @@
     "@apollo/client": "^3.11.8",
     "@apollo/link-error": "^2.0.0-beta.3",
     "@apollo/react-testing": "^4.0.0",
-    "@dicebear/collection": "^8.0.2",
-    "@dicebear/core": "^8.0.2",
+    "@dicebear/collection": "^9.2.2",
+    "@dicebear/core": "^9.2.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/base": "^5.0.0-beta.61",

schema.graphql

@@ -694,7 +694,12 @@ type Mutation {
   revokeRefreshTokenForUser: Boolean!
   saveFcmToken(token: String): Boolean!
   sendMembershipRequest(organizationId: ID!): MembershipRequest!
-  sendMessageToChat(chatId: ID!, messageContent: String!, type: String!, replyTo: ID): ChatMessage!
+  sendMessageToChat(
+    chatId: ID!
+    messageContent: String!
+    type: String!
+    replyTo: ID
+  ): ChatMessage!
   signUp(data: UserInput!, file: String): AuthData!
   togglePostPin(id: ID!, title: String): Post!
   unassignUserTag(input: ToggleUserTagAssignInput!): User
@@ -1025,7 +1030,12 @@ type Query {
     skip: Int
     where: EventWhereInput
   ): [Event!]!
-  advertisementsConnection(after: String, before: String, first: PositiveInt, last: PositiveInt): AdvertisementsConnection
+  advertisementsConnection(
+    after: String
+    before: String
+    first: PositiveInt
+    last: PositiveInt
+  ): AdvertisementsConnection
   getDonationById(id: ID!): Donation!
   getDonationByOrgId(orgId: ID!): [Donation]
   getDonationByOrgIdConnection(
@@ -1082,7 +1092,7 @@ type Query {
     skip: Int
     where: UserWhereInput
   ): [UserData]!
-  venue(id:ID!):[Venue]
+  venue(id: ID!): [Venue]
 }
 
 input RecaptchaVerification {
@@ -1385,7 +1395,7 @@ input UserInput {
   firstName: String!
   lastName: String!
   password: String!
-  selectedOrganization : ID!
+  selectedOrganization: ID!
 }
 
 enum UserOrderByInput {
@@ -1531,4 +1541,4 @@ input chatInput {
   organizationId: ID
   userIds: [ID!]!
   name: String
-}
+}

src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx

@@ -7,7 +7,7 @@ import {
   waitFor,
 } from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
-import { I18nextProvider, useTranslation } from 'react-i18next';
+import { I18nextProvider } from 'react-i18next';
 import { USERS_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';

src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx

@@ -16,7 +16,6 @@ import type { InterfaceQueryUserListItem } from 'utils/interfaces';
 import { USERS_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
 import Loader from 'components/Loader/Loader';
 import { Search } from '@mui/icons-material';
-import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
 interface InterfaceCreateDirectChatProps {
@@ -25,10 +24,10 @@ interface InterfaceCreateDirectChatProps {
   chatsListRefetch: (
     variables?:
       | Partial<{
-          id: any;
+          id: string;
         }>
       | undefined,
-  ) => Promise<ApolloQueryResult<any>>;
+  ) => Promise<ApolloQueryResult<string>>;
 }
 
 /**
@@ -62,9 +61,9 @@ export default function createDirectChatModal({
   createDirectChatModalisOpen,
   chatsListRefetch,
 }: InterfaceCreateDirectChatProps): JSX.Element {
-  const { t } = useTranslation('translation', {
-    keyPrefix: 'userChat',
-  });
+  // const { t } = useTranslation('translation', {
+  //   keyPrefix: 'userChat',
+  // });
 
   const { orgId: organizationId } = useParams();
 

src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx

@@ -25,7 +25,6 @@ import type { InterfaceQueryUserListItem } from 'utils/interfaces';
 import { USERS_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
 import Loader from 'components/Loader/Loader';
 import { Search } from '@mui/icons-material';
-import { useTranslation } from 'react-i18next';
 
 interface InterfaceCreateGroupChatProps {
   toggleCreateGroupChatModal: () => void;
@@ -36,7 +35,7 @@ interface InterfaceCreateGroupChatProps {
           id: string;
         }>
       | undefined,
-  ) => Promise<ApolloQueryResult<any>>;
+  ) => Promise<ApolloQueryResult<string>>;
 }
 
 interface InterfaceOrganization {
@@ -94,10 +93,6 @@ export default function CreateGroupChat({
   createGroupChatModalisOpen,
   chatsListRefetch,
 }: InterfaceCreateGroupChatProps): JSX.Element {
-  const { t } = useTranslation('translation', {
-    keyPrefix: 'userChat',
-  });
-
   const userId: string | null = getItem('userId');
 
   const [createChat] = useMutation(CREATE_CHAT);

src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { act } from '@testing-library/react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
 import { MockedProvider } from '@apollo/react-testing';
 import { I18nextProvider } from 'react-i18next';
 

src/components/UserPortal/UserSidebar/UserSidebar.test.tsx

@@ -1,6 +1,6 @@
 import React, { act } from 'react';
 import type { RenderResult } from '@testing-library/react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
 import { I18nextProvider } from 'react-i18next';
 import styles from './UserSidebar.module.css';
@@ -15,7 +15,6 @@ import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import UserSidebar from './UserSidebar';
 import useLocalStorage from 'utils/useLocalstorage';
-import userEvent from '@testing-library/user-event';
 
 const { setItem } = useLocalStorage();
 

src/screens/UserPortal/Chat/Chat.test.tsx

@@ -1545,7 +1545,7 @@ describe('Testing Chat Screen [User Portal]', () => {
     ).toBeInTheDocument();
   });
 
-  test('Test create new direct chat', async () => {
+  test('create new direct chat', async () => {
     const mock = [
       ...USER_JOINED_ORG_MOCK,
       ...GROUP_CHAT_BY_ID_QUERY_MOCK,
@@ -1585,7 +1585,7 @@ describe('Testing Chat Screen [User Portal]', () => {
     fireEvent.click(closeButton);
   });
 
-  test('Test create new group chat', async () => {
+  test('create new group chat', async () => {
     const mock = [
       ...USER_JOINED_ORG_MOCK,
       ...GROUP_CHAT_BY_ID_QUERY_MOCK,

src/screens/UserPortal/Posts/Posts.tsx

@@ -52,34 +52,16 @@
   endDate: string; // Assuming it's a string in the format 'yyyy-MM-dd'
   startDate: string; // Assuming it's a string in the format 'yyyy-MM-dd'
 };
-interface InterfaceAdContent {
-  _id: string;
-  name: string;
-  type: string;
-  organization: {
-    _id: string;
-  };
-  mediaUrl: string;
-  endDate: string;
-  startDate: string;
-
-  comments: InterfacePostComments;
-  likes: InterfacePostLikes;
-}
-
-type AdvertisementsConnection = {
-  edges: {
-    node: InterfaceAdContent;
-  }[];
-};
 
 type InterfacePostComments = {
+  id: string;
   creator: {
-    _id: string;
+    id: string;
     firstName: string;
     lastName: string;
     email: string;
   };
+
   likeCount: number;
   likedBy: {
     id: string;
@@ -226,42 +208,25 @@
       comments,
     } = node;
 
-    const allLikes: any = [];
-
-    likedBy.forEach((value: any) => {
-      const singleLike = {
-        firstName: value.firstName,
-        lastName: value.lastName,
-        id: value._id,
-      };
-      allLikes.push(singleLike);
-    });
-
-    const postComments: any = [];
-
-    comments.forEach((value: any) => {
-      const commentLikes: any = [];
-      value.likedBy.forEach((commentLike: any) => {
-        const singleLike = {
-          id: commentLike._id,
-        };
-        commentLikes.push(singleLike);
-      });
-
-      const comment = {
-        id: value._id,
+    const allLikes: InterfacePostLikes = likedBy.map((value) => ({
+      firstName: value.firstName,
+      lastName: value.lastName,
+      id: value._id,
+    }));
+
+    const postComments: InterfacePostComments =
+      comments?.map((value) => ({
+        id: value.id,
         creator: {
-          firstName: value.creator.firstName,
-          lastName: value.creator.lastName,
-          id: value.creator._id,
-          email: value.creator.email,
+          firstName: value.creator?.firstName ?? '',
+          lastName: value.creator?.lastName ?? '',
+          id: value.creator?.id ?? '',
+          email: value.creator?.email ?? '',
         },
         likeCount: value.likeCount,
-        likedBy: commentLikes,
+        likedBy: value.likedBy?.map((like) => ({ id: like?.id ?? '' })) ?? [],
         text: value.text,
-      };
-      postComments.push(comment);
-    });
+      })) ?? [];
 
     const date = new Date(node.createdAt);
     const formattedDate = new Intl.DateTimeFormat('en-US', {
@@ -311,7 +276,6 @@
     <>
       <div className={`d-flex flex-row ${styles.containerHeight}`}>
         <div className={`${styles.colorLight} ${styles.mainContainer}`}>
-          <h1>{t('posts')}</h1>
           <div className={`${styles.postContainer}`}>
             <div className={`${styles.heading}`}>{t('startPost')}</div>
             <div className={styles.postInputContainer}>

src/screens/UserPortal/UserScreen/UserScreen.test.tsx

@@ -4,7 +4,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
 import 'jest-location-mock';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, useNavigate } from 'react-router-dom';
 import { store } from 'state/store';
 import i18nForTest from 'utils/i18nForTest';
 import UserScreen from './UserScreen';
@@ -87,7 +87,7 @@ describe('Testing LeftDrawer in OrganizationScreen', () => {
     );
 
     const titleElement = screen.getByRole('heading', { level: 1 });
-    expect(titleElement).toHaveTextContent('');
+    expect(titleElement).toHaveTextContent('Posts');
   });
 
   test('renders the correct title based on the titleKey', () => {
@@ -109,7 +109,7 @@ describe('Testing LeftDrawer in OrganizationScreen', () => {
     expect(titleElement).toHaveTextContent('People');
   });
 
-  test('Testing LeftDrawer in page functionality', async () => {
+  test('LeftDrawer should toggle correctly based on window size and user interaction', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -138,8 +138,10 @@ describe('Testing LeftDrawer in OrganizationScreen', () => {
     expect(icon).toHaveClass('fa fa-angle-double-left');
   });
 
-  test('should be redirected to / if orgId is undefined', async () => {
+  test('should be redirected to root when orgId is undefined', async () => {
     mockID = undefined;
+    const navigate = jest.fn();
+    jest.spyOn({ useNavigate }, 'useNavigate').mockReturnValue(navigate);
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>

src/screens/UserPortal/UserScreen/UserScreen.tsx

@@ -131,7 +131,7 @@ const UserScreen = (): JSX.Element => {
       >
         <div className="d-flex justify-content-between align-items-center">
           <div style={{ flex: 1 }}>
-            <h1>{titleKey !== 'home' ? t('title') : ''}</h1>
+            <h1>{t('title')}</h1>
           </div>
           <ProfileDropdown />
         </div>