Fix User Role in People Section

src/screens/UserPortal/People/People.test.tsx

@@ -222,4 +222,23 @@ describe('Testing People Screen [User Portal]', () => {
     expect(screen.queryByText('Noble Admin')).toBeInTheDocument();
     expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument();
   });
+
+
+  test('Members should be rendered with correct user type', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <People />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.queryByText('Admin')).toBeInTheDocument();
+    expect(screen.queryByText('User')).toBeInTheDocument();
+  });
 });

src/screens/UserPortal/People/People.tsx

@@ -50,8 +50,9 @@ export default function people(): JSX.Element {
 
   // State for managing the number of rows per page in pagination
   const [rowsPerPage, setRowsPerPage] = useState<number>(5);
-  const [members, setMembers] = useState([]);
+  const [members, setMembers] = useState<InterfaceMember[]>([]);
   const [mode, setMode] = useState<number>(0);
+  const [updatedMembers, setUpdatedMembers] = useState<InterfaceMember[]>([]);
 
   // Extracting organization ID from URL parameters
   const { orgId: organizationId } = useParams();
@@ -135,23 +136,64 @@ export default function people(): JSX.Element {
   };
 
   useEffect(() => {
-    if (data) {
-      setMembers(data.organizationsMemberConnection.edges);
+    if (data && data2) {
+      // Ensure organization exists
+      const organization = data2.organizations?.[0];
+      if (!organization) {
+        console.error('Failed to load organization data');
+        return;
+      }
+
+      interface InterfaceAdmin {
+        _id: string;
+      }
+      const adminIds = organization.admins.map(
+        (admin: InterfaceAdmin) => admin._id,
+      );
+      try {
+        const updatedMembers = data.organizationsMemberConnection.edges.map(
+          (member: InterfaceMember) => {
+            const isAdmin = adminIds.includes(member._id);
+            return {
+              ...member,
+              userType: isAdmin ? 'Admin' : 'User',
+            };
+          },
+        );
+        setUpdatedMembers(updatedMembers);
+        setMembers(updatedMembers);
+      } catch (error) {
+        console.error('Failed to process member data:', error);
+      }
     }
-  }, [data]);
+  }, [data, data2]);
+
+  const FILTER_MODES = {
+    ALL_MEMBERS: 0,
+    ADMINS: 1,
+  } as const;
 
   /**
    * Updates the list of members based on the selected filter mode.
    */
   /* istanbul ignore next */
   useEffect(() => {
-    if (mode == 0) {
+    if (mode === FILTER_MODES.ALL_MEMBERS) {
       if (data) {
-        setMembers(data.organizationsMemberConnection.edges);
+        setMembers(updatedMembers);
       }
-    } else if (mode == 1) {
+    } else if (mode === FILTER_MODES.ADMINS) {
       if (data2) {
-        setMembers(data2.organizations[0].admins);
+        const organization = data2.organizations?.[0];
+        if (!organization) {
+          console.error('Organization not found');
+          return;
+        }
+        const admins = organization.admins.map((admin: InterfaceMember) => ({
+          ...admin,
+          userType: 'Admin' as const,
+        }));
+        setMembers(admins);
       }
     }
   }, [mode]);