Refactor: remaining components with profileavatar - 1

docs/docs/auto-docs/screens/UserPortal/Volunteer/Groups/GroupModal/interfaces/InterfaceGroupModal.md

@@ -4,31 +4,31 @@
 
 # Interface: InterfaceGroupModal
 
-Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:62](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L62)
+Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:63](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L63)
 
 ## Properties
 
 ### eventId
 
 > **eventId**: `string`
 
-Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:65](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L65)
+Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:66](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L66)
 
 ***
 
 ### group
 
 > **group**: [`InterfaceVolunteerGroupInfo`](../../../../../../utils/interfaces/interfaces/InterfaceVolunteerGroupInfo.md)
 
-Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:66](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L66)
+Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:67](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L67)
 
 ***
 
 ### hide()
 
 > **hide**: () => `void`
 
-Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:64](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L64)
+Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:65](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L65)
 
 #### Returns
 
@@ -40,15 +40,15 @@ Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:64](https://
 
 > **isOpen**: `boolean`
 
-Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:63](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L63)
+Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:64](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L64)
 
 ***
 
 ### refetchGroups()
 
 > **refetchGroups**: () => `void`
 
-Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:67](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L67)
+Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:68](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L68)
 
 #### Returns
 

docs/docs/auto-docs/screens/UserPortal/Volunteer/Groups/GroupModal/variables/default.md

@@ -6,4 +6,4 @@
 
 > `const` **default**: `React.FC`\<[`InterfaceGroupModal`](../interfaces/InterfaceGroupModal.md)\>
 
-Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:70](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L70)
+Defined in: [src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx:71](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx#L71)

docs/docs/auto-docs/shared-components/SidebarOrgSection/SidebarOrgSection/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(`__namedParameters`): `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\>
 
-Defined in: [src/shared-components/SidebarOrgSection/SidebarOrgSection.tsx:60](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/shared-components/SidebarOrgSection/SidebarOrgSection.tsx#L60)
+Defined in: [src/shared-components/SidebarOrgSection/SidebarOrgSection.tsx:56](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/shared-components/SidebarOrgSection/SidebarOrgSection.tsx#L56)
 
 ## Parameters
 

src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx

@@ -26,7 +26,7 @@
  * Success or error messages are displayed using toast notifications based on the result of the mutation.
  */
 import type { ChangeEvent } from 'react';
-import { Button, Form, Modal } from 'react-bootstrap';
+import { Button, Form } from 'react-bootstrap';
 import type {
   InterfaceCreateVolunteerGroup,
   InterfaceVolunteerGroupInfo,
@@ -56,8 +56,9 @@ import {
 import { PiUserListBold } from 'react-icons/pi';
 import { TbListDetails } from 'react-icons/tb';
 import { USER_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Queries/EventVolunteerQueries';
-import Avatar from 'components/Avatar/Avatar';
 import { FaXmark } from 'react-icons/fa6';
+import { ProfileAvatarDisplay } from 'shared-components/ProfileAvatarDisplay/ProfileAvatarDisplay';
+import BaseModal from 'shared-components/BaseModal/BaseModal';
 
 export interface InterfaceGroupModal {
   isOpen: boolean;
@@ -187,19 +188,14 @@ const GroupModal: React.FC<InterfaceGroupModal> = ({
   );
 
   return (
-    <Modal className={styles.groupModal} onHide={hide} show={isOpen}>
-      <Modal.Header>
-        <p className={styles.titlemodal}>{t('manageGroup')}</p>
-        <Button
-          variant="danger"
-          onClick={hide}
-          className={styles.modalCloseBtn}
-          data-testid="modalCloseBtn"
-        >
-          <i className="fa fa-times"></i>
-        </Button>
-      </Modal.Header>
-      <Modal.Body>
+    <BaseModal
+      className={styles.groupModal}
+      show={isOpen}
+      onHide={hide}
+      title={t('manageGroup')}
+      data-testid="groupModal"
+    >
+      <>
         <div
           className={`btn-group ${styles.toggleGroup} mt-0 px-3 mb-4 w-100`}
           role="group"
@@ -349,24 +345,14 @@ const GroupModal: React.FC<InterfaceGroupModal> = ({
                             className="d-flex gap-1 align-items-center"
                             data-testid="userName"
                           >
-                            {avatarURL ? (
-                              <img
-                                src={avatarURL}
-                                alt={t('volunteerAlt')}
-                                data-testid={`image${id + 1}`}
-                                className={styles.TableImage}
-                              />
-                            ) : (
-                              <div className={styles.avatarContainer}>
-                                <Avatar
-                                  key={id + '1'}
-                                  containerStyle={styles.imageContainer}
-                                  avatarStyle={styles.TableImage}
-                                  name={name}
-                                  alt={name}
-                                />
-                              </div>
-                            )}
+                            <ProfileAvatarDisplay
+                              key={id + '1'}
+                              imageUrl={avatarURL}
+                              fallbackName={t('volunteerAlt')}
+                              data-testid={`image${id + 1}`}
+                              className={styles.TableImage}
+                            />
+
                             {name}
                           </TableCell>
                           <TableCell component="th" scope="row">
@@ -404,8 +390,8 @@ const GroupModal: React.FC<InterfaceGroupModal> = ({
             )}
           </div>
         )}
-      </Modal.Body>
-    </Modal>
+      </>
+    </BaseModal>
   );
 };
 export default GroupModal;

src/shared-components/OrganizationCard/OrganizationCard.spec.tsx

@@ -46,6 +46,7 @@ vi.mock('react-i18next', () => ({
         'users.membershipStatus.member': 'Membership status: Member',
         'users.membershipStatus.pending': 'Membership status: Pending',
         'users.membershipStatus.notMember': 'Membership status: Not a member',
+        'profileAvatar.altText': 'Test Org',
       };
 
       return translations[key] || key;
@@ -361,6 +362,15 @@ describe('OrganizationCard', () => {
           },
         },
       },
+      {
+        request: {
+          query: ORGANIZATION_LIST,
+          variables: {},
+        },
+        result: {
+          data: {},
+        },
+      },
     ];
 
     render(
@@ -574,6 +584,15 @@ describe('OrganizationCard', () => {
           },
         },
       },
+      {
+        request: {
+          query: ORGANIZATION_LIST,
+          variables: {},
+        },
+        result: {
+          data: {},
+        },
+      },
     ];
 
     render(

src/shared-components/OrganizationCard/OrganizationCard.tsx

@@ -43,7 +43,6 @@ import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
 import styles from 'style/app-fixed.module.css';
 import { Tooltip } from '@mui/material';
-import Avatar from 'components/Avatar/Avatar';
 import { useNavigate } from 'react-router-dom';
 import { InterfaceOrganizationCardProps } from 'types/OrganizationCard/interface';
 import { ApolloError, useMutation } from '@apollo/client';
@@ -56,6 +55,7 @@ import { ORGANIZATION_LIST } from 'GraphQl/Queries/Queries';
 import { USER_JOINED_ORGANIZATIONS_PG } from 'GraphQl/Queries/OrganizationQueries';
 import { NotificationToast } from 'components/NotificationToast/NotificationToast';
 import useLocalStorage from 'utils/useLocalstorage';
+import { ProfileAvatarDisplay } from 'shared-components/ProfileAvatarDisplay/ProfileAvatarDisplay';
 
 export interface InterfaceOrganizationCardPropsPG {
   data: InterfaceOrganizationCardProps;
@@ -171,22 +171,12 @@ function OrganizationCard({
         <div className={styles.innerContainer} data-cy="orgCardContainer">
           {/* Container for the organization image */}
           <div className={styles.orgImgContainer}>
-            {avatarURL ? (
-              <img
-                src={avatarURL}
-                alt={name}
-                crossOrigin="anonymous"
-                referrerPolicy="no-referrer"
-                loading="lazy"
-                decoding="async"
-              />
-            ) : (
-              <Avatar
-                name={name}
-                alt={name}
-                dataTestId="emptyContainerForImage"
-              />
-            )}
+            <ProfileAvatarDisplay
+              fallbackName={name}
+              imageUrl={avatarURL}
+              dataTestId="emptyContainerForImage"
+              enableEnlarge
+            />
           </div>
           <div className={styles.content}>
             <div>

src/shared-components/SidebarOrgSection/SidebarOrgSection.spec.tsx

@@ -25,14 +25,41 @@ vi.mock('assets/svgs/angleRight.svg?react', () => ({
   ),
 }));
 
+// Mock ProfileAvatarDisplay
+vi.mock('shared-components/ProfileAvatarDisplay/ProfileAvatarDisplay', () => ({
+  ProfileAvatarDisplay: ({
+    imageUrl,
+    fallbackName,
+    crossOrigin,
+  }: {
+    imageUrl?: string;
+    fallbackName: string;
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  }) => (
+    <div
+      data-testid="mock-profile-avatar-display"
+      data-image-url={imageUrl}
+      data-fallback-name={fallbackName}
+    >
+      {imageUrl && (
+        <img src={imageUrl} alt={fallbackName} crossOrigin={crossOrigin} />
+      )}
+    </div>
+  ),
+}));
+
 // Mock translations
 vi.mock('react-i18next', async () => {
   const actual = await vi.importActual('react-i18next');
   return {
     ...actual,
     useTranslation: () => ({
-      t: (key: string, options?: { entity?: string }) =>
-        options?.entity ? `Error loading ${options.entity}` : key,
+      t: (key: string, options?: { entity?: string; name?: string }) => {
+        if (key === 'profileAvatar.altText') {
+          return options?.name || 'Avatar';
+        }
+        return options?.entity ? `Error loading ${options.entity}` : key;
+      },
     }),
   };
 });
@@ -89,7 +116,7 @@ describe('SidebarOrgSection Component', () => {
     {
       request: {
         query: GET_ORGANIZATION_DATA_PG,
-        variables: { id: mockOrgId, first: 10, after: null },
+        variables: { id: mockOrgId, first: 1, after: null },
       },
       result: {
         data: mockOrganizationData,
@@ -101,7 +128,7 @@ describe('SidebarOrgSection Component', () => {
     {
       request: {
         query: GET_ORGANIZATION_DATA_PG,
-        variables: { id: mockOrgId, first: 10, after: null },
+        variables: { id: mockOrgId, first: 1, after: null },
       },
       delay: 1000000, // Very long delay to keep in loading state
       result: {
@@ -114,7 +141,7 @@ describe('SidebarOrgSection Component', () => {
     {
       request: {
         query: GET_ORGANIZATION_DATA_PG,
-        variables: { id: mockOrgId, first: 10, after: null },
+        variables: { id: mockOrgId, first: 1, after: null },
       },
       result: {
         data: { organization: null },
@@ -126,7 +153,7 @@ describe('SidebarOrgSection Component', () => {
     {
       request: {
         query: GET_ORGANIZATION_DATA_PG,
-        variables: { id: mockOrgId, first: 10, after: null },
+        variables: { id: mockOrgId, first: 1, after: null },
       },
       result: {
         data: mockOrganizationWithoutAvatar,
@@ -138,7 +165,7 @@ describe('SidebarOrgSection Component', () => {
     {
       request: {
         query: GET_ORGANIZATION_DATA_PG,
-        variables: { id: mockOrgId, first: 10, after: null },
+        variables: { id: mockOrgId, first: 1, after: null },
       },
       result: {
         data: mockOrganizationWithoutCity,
@@ -268,18 +295,19 @@ describe('SidebarOrgSection Component', () => {
       await waitFor(() => {
         const img = screen.getByAltText('Test Organization');
         expect(img).toHaveAttribute('crossOrigin', 'anonymous');
-        expect(img).toHaveAttribute('referrerPolicy', 'no-referrer');
-        expect(img).toHaveAttribute('loading', 'lazy');
-        expect(img).toHaveAttribute('decoding', 'async');
       });
     });
 
-    it('renders Avatar component when avatarURL is not provided', async () => {
+    it('renders ProfileAvatarDisplay with correct props when avatarURL is not provided', async () => {
       renderComponent({}, noAvatarMocks);
       await waitFor(() => {
-        const avatar = screen.getByTestId('avatar');
-        expect(avatar).toBeInTheDocument();
-        expect(avatar).toHaveAttribute('data-name', 'Test Organization');
+        const avatarDisplay = screen.getByTestId('mock-profile-avatar-display');
+        expect(avatarDisplay).toBeInTheDocument();
+        expect(avatarDisplay).toHaveAttribute(
+          'data-fallback-name',
+          'Test Organization',
+        );
+        expect(avatarDisplay).not.toHaveAttribute('data-image-url');
       });
     });
 
@@ -315,7 +343,7 @@ describe('SidebarOrgSection Component', () => {
         {
           request: {
             query: GET_ORGANIZATION_DATA_PG,
-            variables: { id: customOrgId, first: 10, after: null },
+            variables: { id: customOrgId, first: 1, after: null },
           },
           result: {
             data: mockOrganizationData,