Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix User Role in People Section #2459

Closed
Show file tree
Hide file tree
Changes from 11 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/screens/UserPortal/People/People.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<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();
Comment on lines +239 to +241
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Strengthen test assertions

The current assertions using queryByText are too broad and may pass even if roles appear in unintended locations.

Consider:

  1. Using more specific queries that target the intended elements
  2. Adding test data for multiple organizations to verify the original bug scenario
  3. Including negative test cases

Example structure:

// Verify role display in specific organization
await wait();
const org1Members = screen.getByTestId('org-1-members');
// Add your specific assertions based on how roles are actually displayed

// Verify role display in different organization
const org2Members = screen.getByTestId('org-2-members');
// Add your specific assertions

// Negative test case
expect(screen.queryByTestId('invalid-role')).not.toBeInTheDocument();

});
});
56 changes: 49 additions & 7 deletions src/screens/UserPortal/People/People.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export default function people(): JSX.Element {
const [rowsPerPage, setRowsPerPage] = useState<number>(5);
const [members, setMembers] = useState([]);
const [mode, setMode] = useState<number>(0);
const [updatedMembers, setUpdatedMembers] = useState<InterfaceMember[]>([]);

// Extracting organization ID from URL parameters
const { orgId: organizationId } = useParams();
Expand Down Expand Up @@ -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 as []);
}
} 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);
}
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix type casting and add effect cleanup

Several issues need to be addressed:

  1. Remove unnecessary type casting of updatedMembers
  2. Add cleanup to prevent memory leaks
  3. Simplify the admin filtering logic
  useEffect(() => {
    if (mode === FILTER_MODES.ALL_MEMBERS) {
      if (data) {
-       setMembers(updatedMembers as []);
+       setMembers(updatedMembers);
      }
    } else if (mode === FILTER_MODES.ADMINS) {
      if (data2) {
        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,
-       }));
+       const admins = organization.admins.map((admin: InterfaceMember) => {
+         return { ...admin, userType: 'Admin' as const };
+       });
        setMembers(admins);
      }
    }
+   return () => {
+     // Cleanup to prevent state updates after unmount
+     setMembers([]);
+   };
  }, [mode, data, data2, updatedMembers]);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (mode === FILTER_MODES.ALL_MEMBERS) {
if (data) {
setMembers(data.organizationsMemberConnection.edges);
setMembers(updatedMembers as []);
}
} 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);
}
}
useEffect(() => {
if (mode === FILTER_MODES.ALL_MEMBERS) {
if (data) {
setMembers(updatedMembers);
}
} else if (mode === FILTER_MODES.ADMINS) {
if (data2) {
const organization = data2.organizations?.[0];
if (!organization) {
console.error('Organization not found');
return;
}
const admins = organization.admins.map((admin: InterfaceMember) => {
return { ...admin, userType: 'Admin' as const };
});
setMembers(admins);
}
}
return () => {
// Cleanup to prevent state updates after unmount
setMembers([]);
};
}, [mode, data, data2, updatedMembers]);

}, [mode]);
Expand Down
Loading