From adba73be396774b7f18c7628f107192a78ebd0d5 Mon Sep 17 00:00:00 2001
From: Katrina Nguyen <katrinan@usc.edu>
Date: Tue, 14 Jan 2025 17:54:04 +0000
Subject: [PATCH] feat: updates group page to render more than 10 groups

---
 src/components/PeopleManagement/index.jsx            |  2 +-
 .../tests/PeopleManagementPage.test.jsx              |  4 ++--
 .../data/hooks/useAllEnterpriseGroups.js             | 12 +++---------
 src/data/services/LmsApiService.js                   |  5 -----
 4 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/components/PeopleManagement/index.jsx b/src/components/PeopleManagement/index.jsx
index 7cf661418..1fc03f89f 100644
--- a/src/components/PeopleManagement/index.jsx
+++ b/src/components/PeopleManagement/index.jsx
@@ -36,7 +36,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
index 65ce49816..e153e4f1e 100644
--- 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
index 9c154532c..91beb1150 100644
--- 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
index 8734ae9a4..6b05129f5 100644
--- 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);