feat: updates group page to render more than 10 groups (#1382)

openedx · Jan 15, 2025 · 482781d · 482781d
1 parent 4b4924b
commit 482781d
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 17 deletions.
diff --git a/src/components/PeopleManagement/index.jsx b/src/components/PeopleManagement/index.jsx
@@ -41,7 +41,7 @@ const PeopleManagementPage = ({ enterpriseId }) => {
 
   useEffect(() => {
     if (data !== undefined) {
-      setGroups(data.results);
+      setGroups(data);
     }
   }, [data]);
 

diff --git a/src/components/PeopleManagement/tests/PeopleManagementPage.test.jsx b/src/components/PeopleManagement/tests/PeopleManagementPage.test.jsx
@@ -116,7 +116,7 @@ describe('<PeopleManagementPage >', () => {
     expect(screen.getByText("Once a group is created, you can track members' progress.")).toBeInTheDocument();
   });
   it('renders the PeopleManagementPage group card grid', () => {
-    useAllEnterpriseGroups.mockReturnValue({ data: { results: mockGroupsResponse } });
+    useAllEnterpriseGroups.mockReturnValue({ data: mockGroupsResponse });
     const store = getMockStore(initialStoreState);
     render(
       <IntlProvider locale="en">
@@ -131,7 +131,7 @@ describe('<PeopleManagementPage >', () => {
     expect(screen.getByText('4 members')).toBeInTheDocument();
   });
   it('renders the PeopleManagementPage group card grid with collapsible', async () => {
-    useAllEnterpriseGroups.mockReturnValue({ data: { results: mockMultipleGroupsResponse } });
+    useAllEnterpriseGroups.mockReturnValue({ data: mockMultipleGroupsResponse });
     const store = getMockStore(initialStoreState);
     render(
       <IntlProvider locale="en">

diff --git a/src/components/learner-credit-management/data/hooks/useAllEnterpriseGroups.js b/src/components/learner-credit-management/data/hooks/useAllEnterpriseGroups.js
@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
-import { camelCaseObject } from '@edx/frontend-platform/utils';
 
 import { learnerCreditManagementQueryKeys } from '../constants';
 import LmsApiService from '../../../../data/services/LmsApiService';
+import { fetchPaginatedData } from '../../../../data/services/apiServiceUtils';
 
 /**
  * Retrieves all enterprise groups associated with the organization
@@ -11,14 +11,8 @@ import LmsApiService from '../../../../data/services/LmsApiService';
  * @returns The enterprise group object
  */
 const getAllEnterpriseGroups = async ({ enterpriseId }) => {
-  const params = new URLSearchParams({
-    enterprise_uuids: enterpriseId,
-    group_type: 'flex',
-    page: 1,
-  });
-  const response = await LmsApiService.fetchAllEnterpriseGroups(params);
-  const enterpriseGroups = camelCaseObject(response.data);
-  return enterpriseGroups;
+  const { results } = await fetchPaginatedData(`${LmsApiService.enterpriseGroupListUrl}?enterprise_uuids${enterpriseId}?group_type=flex`);
+  return results;
 };
 
 const useAllEnterpriseGroups = (enterpriseId, { queryOptions } = {}) => useQuery({

diff --git a/src/data/services/LmsApiService.js b/src/data/services/LmsApiService.js
@@ -449,11 +449,6 @@ class LmsApiService {
     return response;
   };
 
-  static fetchAllEnterpriseGroups = async (options) => {
-    const groupsEndpoint = `${LmsApiService.enterpriseGroupListUrl}?${options.toString()}`;
-    return LmsApiService.apiClient().get(groupsEndpoint);
-  };
-
   static fetchEnterpriseGroup = async (groupUuid) => {
     const groupEndpoint = `${LmsApiService.enterpriseGroupListUrl}${groupUuid}/`;
     return LmsApiService.apiClient().get(groupEndpoint);