chore: Migrate deprecated Table to DataTable for RegisteredLearnersTable

src/components/RegisteredLearnersTable/data/hooks/index.js

@@ -0,0 +1 @@
+export { default as useRegisteredLearners } from './useRegisteredLearners';

src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js

@@ -0,0 +1,57 @@
+import { useCallback, useMemo, useState } from 'react';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import debounce from 'lodash.debounce';
+import { logError } from '@edx/frontend-platform/logging';
+import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+
+const applySortByToOptions = (sortBy, options) => {
+  console.log(sortBy);
+  console.log(options);
+};
+
+const useRegisteredLearners = (enterpriseId) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [registeredLearners, setRegisteredLearners] = useState({
+    itemCount: 0,
+    pageCount: 0,
+    results: [],
+  });
+
+  const fetchRegisteredLearners = useCallback(async (args) => {
+    try {
+      setIsLoading(true);
+      const options = {
+        page: args.pageIndex + 1, // `DataTable` uses zero-indexed array
+        pageSize: args.pageSize,
+      };
+      if (args.sortBy?.length > 0) {
+        applySortByToOptions(args.sortBy, options);
+      }
+      const response = await EnterpriseDataApiService.fetchUnenrolledRegisteredLearners(enterpriseId, options);
+      const data = camelCaseObject(response.data);
+
+      setRegisteredLearners({
+        itemCount: data.count,
+        pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
+        results: data.results,
+      });
+    } catch (error) {
+      logError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enterpriseId]);
+
+  const debouncedFetchRegisteredLearners = useMemo(
+    () => debounce(fetchRegisteredLearners, 300),
+    [fetchRegisteredLearners],
+  );
+
+  return {
+    isLoading,
+    registeredLearners,
+    fetchRegisteredLearners: debouncedFetchRegisteredLearners,
+  };
+};
+
+export default useRegisteredLearners;

src/components/RegisteredLearnersTable/data/index.js

@@ -0,0 +1 @@
+export * from './hooks';

src/components/RegisteredLearnersTable/index.jsx

@@ -1,54 +1,74 @@
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { DataTable } from '@openedx/paragon';
+import { useRegisteredLearners } from './data';
+import { i18nFormatTimestamp } from '../../utils';
 
-import TableContainer from '../../containers/TableContainer';
+const UserEmail = ({ row }) => (
+  <span data-hj-suppress>{row.original.user_email}</span>
+);
 
-import { i18nFormatTimestamp } from '../../utils';
-import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
+UserEmail.propTypes = {
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      user_email: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
 
-const RegisteredLearnersTable = () => {
+const RegisteredLearnersTable = ({ enterpriseId }) => {
   const intl = useIntl();
+  const {
+    isLoading,
+    registeredLearners: tableData,
+    fetchRegisteredLearners: fetchTableData,
+  } = useRegisteredLearners(enterpriseId);
 
-  const tableColumns = [
+  const columns = [
     {
-      label: intl.formatMessage({
+      Header: intl.formatMessage({
         id: 'admin.portal.lpr.registered.learners.table.user_email.column.heading',
         defaultMessage: 'Email',
         description: 'Column heading for the user email column in the registered learners table',
       }),
-      key: 'user_email',
-      columnSortable: true,
+      accessor: 'user_email',
+      Cell: UserEmail,
     },
     {
-      label: intl.formatMessage({
+      Header: intl.formatMessage({
         id: 'admin.portal.lpr.registered.learners.table.lms_user_created.column.heading',
         defaultMessage: 'Account Created',
         description: 'Column heading for the lms user created column in the registered learners table',
       }),
-      key: 'lms_user_created',
-      columnSortable: true,
+      accessor: 'lms_user_created',
+      Cell: ({ row }) => i18nFormatTimestamp({ intl, timestamp: row.values.lms_user_created }),
     },
   ];
 
-  const formatLearnerData = learners => learners.map(learner => ({
-    ...learner,
-    user_email: <span data-hj-suppress>{learner.user_email}</span>,
-    lms_user_created: i18nFormatTimestamp({
-      intl, timestamp: learner.lms_user_created,
-    }),
-  }));
-
   return (
-    <TableContainer
-      id="registered-unenrolled-learners"
-      className="registered-unenrolled-learners"
-      fetchMethod={EnterpriseDataApiService.fetchUnenrolledRegisteredLearners}
-      columns={tableColumns}
-      formatData={formatLearnerData}
-      tableSortable
+    <DataTable
+      isSortable
+      manualSortBy
+      isPaginated
+      manualPagination
+      isLoading={isLoading}
+      columns={columns}
+      initialState={{
+        pageSize: 20, // Set this according to your requirements
+        pageIndex: 0,
+        sortBy: [{ id: 'lms_user_created', desc: true }],
+      }}
+      fetchData={fetchTableData}
+      data={tableData.results}
+      itemCount={tableData.itemCount}
+      pageCount={tableData.pageCount}
     />
   );
 };
 
+RegisteredLearnersTable.propTypes = {
+  enterpriseId: PropTypes.string.isRequired,
+};
+
 export default RegisteredLearnersTable;