chore: Refactor code into generalized hooks and utils

Author: mahamakifdar19

src/components/Admin/DownloadButtonWrapper.jsx

@@ -10,8 +10,8 @@ const DownloadButtonWrapper = ({
 }) => {
   const { tablesWithData } = useTableData();
 
-  // Check if this is a LearnerActivityTable
-  const isLearnerActivityTable = [
+  // Identify tables that rely on the useTableData hook and have been migrated to the new DataTable component.
+  const isTableUsingDataState = [
     'learners-active-week',
     'learners-inactive-week',
     'learners-inactive-month',
@@ -21,7 +21,7 @@ const DownloadButtonWrapper = ({
     <DownloadCsvButton
       id={tableMetadata.csvButtonId}
       fetchMethod={tableMetadata.csvFetchMethod}
-      disabled={isLearnerActivityTable ? !tablesWithData[actionSlug] : isTableDataMissing(actionSlug)}
+      disabled={isTableUsingDataState ? !tablesWithData[actionSlug] : isTableDataMissing(actionSlug)}
       buttonLabel={downloadButtonLabel}
     />
   );

src/components/LearnerActivityTable/LearnerActivityTable.test.jsx

@@ -6,15 +6,13 @@ import { Provider } from 'react-redux';
 import { mount } from 'enzyme';
 
 import LearnerActivityTable from '.';
-import useCourseEnrollments from './data/hooks/useCourseEnrollments';
-import mockUseCourseEnrollments from './data/tests/constants';
+import usePaginatedTableData from '../../hooks/usePaginatedTableData';
+import { mockUseCourseEnrollments, mockEmptyCourseEnrollmentsData } from './data/tests/constants';
 
 const enterpriseId = 'test-enterprise';
 const mockStore = configureMockStore([thunk]);
 
-jest.mock('./data/hooks/useCourseEnrollments.js', () => (
-  jest.fn().mockReturnValue({})
-));
+jest.mock('../../hooks/usePaginatedTableData', () => jest.fn());
 
 const store = mockStore({
   portalConfiguration: {
@@ -26,33 +24,26 @@ const LearnerActivityTableWrapper = props => (
   <MemoryRouter>
     <IntlProvider locale="en">
       <Provider store={store}>
-        <LearnerActivityTable
-          {...props}
-        />
+        <LearnerActivityTable {...props} />
       </Provider>
     </IntlProvider>
   </MemoryRouter>
 );
 
 const verifyLearnerActivityTableRendered = (tableId, activity, columnTitles, rowsData) => {
   const wrapper = mount(<LearnerActivityTableWrapper id={tableId} activity={activity} />);
-
   const table = wrapper.find('[role="table"]');
   const headerColumns = table.find('thead th');
   const tableRows = table.find('tbody tr');
 
-  // Verify the number of columns
   expect(headerColumns).toHaveLength(columnTitles.length);
 
-  // Verify column titles
   headerColumns.forEach((column, index) => {
     expect(column.text()).toContain(columnTitles[index]);
   });
 
-  // Verify the number of rows
   expect(tableRows).toHaveLength(rowsData.length);
 
-  // Verify row data
   tableRows.forEach((row, rowIndex) => {
     const cells = row.find('td');
     cells.forEach((cell, colIndex) => {
@@ -63,32 +54,19 @@ const verifyLearnerActivityTableRendered = (tableId, activity, columnTitles, row
 
 describe('LearnerActivityTable', () => {
   beforeEach(() => {
-    useCourseEnrollments.mockReturnValue(mockUseCourseEnrollments);
+    usePaginatedTableData.mockReturnValue(mockUseCourseEnrollments);
   });
 
   afterEach(() => jest.clearAllMocks());
 
-  // Replacing the snapshot tests with explicit assertions
   it('renders empty table correctly', () => {
-    useCourseEnrollments.mockReturnValue({
-      isLoading: false,
-      courseEnrollments: {
-        itemCount: 0,
-        pageCount: 0,
-        results: [],
-      },
-      fetchCourseEnrollments: jest.fn(),
-      hasData: false,
-    });
+    usePaginatedTableData.mockReturnValue(mockEmptyCourseEnrollmentsData);
 
     const wrapper = mount(
       <LearnerActivityTableWrapper id="active-week" activity="active_past_week" />,
     );
 
-    // Verify the table exists
     expect(wrapper.find('[role="table"]').exists()).toBe(true);
-
-    // Verify no data rows are displayed
     expect(wrapper.find('tbody tr').length).toBe(0);
   });
 
@@ -108,21 +86,15 @@ describe('LearnerActivityTable', () => {
     ];
 
     const wrapper = mount(<LearnerActivityTableWrapper id={tableId} activity={activity} />);
-
-    // Verify the table exists
     const table = wrapper.find('[role="table"]');
-    expect(table.exists()).toBe(true);
-
-    // Verify correct columns are displayed
     const headerColumns = table.find('thead th');
-    expect(headerColumns).toHaveLength(columnTitles.length);
 
-    // Verify column titles
+    expect(table.exists()).toBe(true);
+    expect(headerColumns).toHaveLength(columnTitles.length);
     headerColumns.forEach((column, index) => {
       expect(column.text()).toContain(columnTitles[index]);
     });
 
-    // Verify data is rendered
     expect(wrapper.find('tbody tr').length).toBeGreaterThan(0);
   });
 
@@ -141,25 +113,17 @@ describe('LearnerActivityTable', () => {
     ];
 
     const wrapper = mount(<LearnerActivityTableWrapper id={tableId} activity={activity} />);
-
-    // Verify the table exists
     const table = wrapper.find('[role="table"]');
-    expect(table.exists()).toBe(true);
-
-    // Verify correct columns are displayed (should not include Passed Date)
     const headerColumns = table.find('thead th');
-    expect(headerColumns).toHaveLength(columnTitles.length);
 
-    // Verify column titles
+    expect(table.exists()).toBe(true);
+    expect(headerColumns).toHaveLength(columnTitles.length);
     headerColumns.forEach((column, index) => {
       expect(column.text()).toContain(columnTitles[index]);
     });
 
-    // Verify "Passed Date" column is not present
     const columnHeaders = headerColumns.map(col => col.text());
     expect(columnHeaders.includes('Passed Date')).toBe(false);
-
-    // Verify data is rendered
     expect(wrapper.find('tbody tr').length).toBeGreaterThan(0);
   });
 
@@ -178,25 +142,17 @@ describe('LearnerActivityTable', () => {
     ];
 
     const wrapper = mount(<LearnerActivityTableWrapper id={tableId} activity={activity} />);
-
-    // Verify the table exists
     const table = wrapper.find('[role="table"]');
-    expect(table.exists()).toBe(true);
-
-    // Verify correct columns are displayed (should not include Passed Date)
     const headerColumns = table.find('thead th');
-    expect(headerColumns).toHaveLength(columnTitles.length);
 
-    // Verify column titles
+    expect(table.exists()).toBe(true);
+    expect(headerColumns).toHaveLength(columnTitles.length);
     headerColumns.forEach((column, index) => {
       expect(column.text()).toContain(columnTitles[index]);
     });
 
-    // Verify "Passed Date" column is not present
     const columnHeaders = headerColumns.map(col => col.text());
     expect(columnHeaders.includes('Passed Date')).toBe(false);
-
-    // Verify data is rendered
     expect(wrapper.find('tbody tr').length).toBeGreaterThan(0);
   });
 

src/components/LearnerActivityTable/data/hooks/useCourseEnrollments.js

@@ -1,95 +1,11 @@
-import {
-  useCallback, useMemo, useRef, useState,
-} from 'react';
-import { camelCaseObject } from '@edx/frontend-platform/utils';
-import debounce from 'lodash.debounce';
-import { logError } from '@edx/frontend-platform/logging';
+import usePaginatedTableData from '../../../../hooks/usePaginatedTableData';
 import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
-import EVENT_NAMES from '../../../../eventTracking';
-import { trackDataTableEvent } from '../utils';
 
-const applySortByToOptions = (sortBy, apiFieldsForColumnAccessor, options) => {
-  if (!sortBy || sortBy.length === 0) {
-    return;
-  }
-  const orderingStrings = sortBy.map(({ id, desc }) => {
-    const fieldForColumnAccessor = apiFieldsForColumnAccessor[id];
-    if (!fieldForColumnAccessor) {
-      return undefined;
-    }
-    const apiFieldKey = fieldForColumnAccessor.key;
-    return desc ? `-${apiFieldKey}` : apiFieldKey;
-  }).filter(orderingString => !!orderingString);
-  Object.assign(options, {
-    ordering: orderingStrings.join(','),
-  });
-};
-
-const useCourseEnrollments = (enterpriseId, tableId, apiFieldsForColumnAccessor) => {
-  const shouldTrackFetchEvents = useRef(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [courseEnrollments, setCourseEnrollments] = useState({
-    itemCount: 0,
-    pageCount: 0,
-    results: [],
-  });
-
-  const fetchCourseEnrollments = useCallback(async (args) => {
-    try {
-      setIsLoading(true);
-      const options = {
-        page: args.pageIndex + 1,
-        pageSize: args.pageSize,
-      };
-      applySortByToOptions(args.sortBy, apiFieldsForColumnAccessor, options);
-
-      const response = await EnterpriseDataApiService.fetchCourseEnrollments(enterpriseId, options);
-      const data = camelCaseObject(response.data);
-      setCourseEnrollments({
-        itemCount: data.count,
-        pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
-        results: data.results,
-      });
-      trackDataTableEvent({
-        shouldTrackRef: shouldTrackFetchEvents,
-        enterpriseId,
-        eventName: EVENT_NAMES.PROGRESS_REPORT.DATATABLE_SORT_BY_OR_FILTER,
-        tableId,
-        options,
-      });
-    } catch (error) {
-      // Enhanced error logging with table state context
-      logError(error, {
-        tableState: {
-          tableId,
-          enterpriseId,
-          filters: args.filters || 'none',
-          sortBy: JSON.stringify(args.sortBy || []),
-        },
-        message: `Error fetching course enrollments for table ${tableId}`,
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  }, [enterpriseId, tableId, apiFieldsForColumnAccessor]);
-
-  const debouncedFetchCourseEnrollments = useMemo(
-    () => debounce(fetchCourseEnrollments, 300),
-    [fetchCourseEnrollments],
-  );
-
-  // Add a computed property to check if data exists
-  const hasData = useMemo(
-    () => courseEnrollments.results.length > 0,
-    [courseEnrollments.results],
-  );
-
-  return {
-    isLoading,
-    courseEnrollments,
-    fetchCourseEnrollments: debouncedFetchCourseEnrollments,
-    hasData,
-  };
-};
+const useCourseEnrollments = (enterpriseId, tableId, apiFieldsForColumnAccessor) => usePaginatedTableData({
+  enterpriseId,
+  tableId,
+  apiFieldsForColumnAccessor,
+  fetchFunction: EnterpriseDataApiService.fetchCourseEnrollments,
+});
 
 export default useCourseEnrollments;