diff --git a/src/screens/UserPortal/People/People.test.tsx b/src/screens/UserPortal/People/People.test.tsx
index c978a0a5a3..a83902b31d 100644
--- a/src/screens/UserPortal/People/People.test.tsx
+++ b/src/screens/UserPortal/People/People.test.tsx
@@ -222,4 +222,22 @@ 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(
+
+
+
+
+
+
+
+
+ ,
+ );
+
+ await wait();
+ expect(screen.queryByText('Admin')).toBeInTheDocument();
+ expect(screen.queryByText('User')).toBeInTheDocument();
+ });
});
diff --git a/src/screens/UserPortal/People/People.tsx b/src/screens/UserPortal/People/People.tsx
index 4904e75b20..2bb0f0590c 100644
--- a/src/screens/UserPortal/People/People.tsx
+++ b/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(5);
- const [members, setMembers] = useState([]);
+ const [members, setMembers] = useState([]);
const [mode, setMode] = useState(0);
+ const [updatedMembers, setUpdatedMembers] = useState([]);
// 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]);