fix: Pagination Issue in LearnerActivityTable

* fix: fix pagination issue for learner activity table

* fix: added autoResetPage option for DataTable

---------

Co-authored-by: irfanuddinahmad <[email protected]>

Author: mahamakifdar19

package-lock.json

@@ -60,6 +60,7 @@
     "html-react-parser": "3.0.16",
     "jest-environment-jsdom": "29.7.0",
     "lodash-es": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "plotly.js": "^2.33.0",
     "prop-types": "15.8.1",
     "react": "17.0.2",

package.json

@@ -163,7 +163,7 @@ class Admin extends React.Component {
           defaultMessage: 'Top Active Learners',
           description: 'Report subtitle for learners active in the past week',
         }),
-        component: <LearnerActivityTable id="learners-active-week" activity="active_past_week" />,
+        component: <LearnerActivityTable key="learners-active-week" id="learners-active-week" activity="active_past_week" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,
@@ -184,7 +184,7 @@ class Admin extends React.Component {
           defaultMessage: 'Not Active in Past Week',
           description: 'Report subtitle for learners inactive in the past week',
         }),
-        component: <LearnerActivityTable id="learners-inactive-week" activity="inactive_past_week" />,
+        component: <LearnerActivityTable key="learners-inactive-week" id="learners-inactive-week" activity="inactive_past_week" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,
@@ -205,7 +205,7 @@ class Admin extends React.Component {
           defaultMessage: 'Not Active in Past Month',
           description: 'Report subtitle for learners inactive in the past month',
         }),
-        component: <LearnerActivityTable id="learners-inactive-month" activity="inactive_past_month" />,
+        component: <LearnerActivityTable key="learners-inactive-month" id="learners-inactive-month" activity="inactive_past_month" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,

src/components/Admin/index.jsx

@@ -192,7 +192,7 @@ const Admin = ({
           defaultMessage: 'Top Active Learners',
           description: 'Report subtitle for learners active in the past week',
         }),
-        component: <LearnerActivityTable id="learners-active-week" activity="active_past_week" />,
+        component: <LearnerActivityTable key="learners-active-week" id="learners-active-week" activity="active_past_week" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,
@@ -213,7 +213,7 @@ const Admin = ({
           defaultMessage: 'Not Active in Past Week',
           description: 'Report subtitle for learners inactive in the past week',
         }),
-        component: <LearnerActivityTable id="learners-inactive-week" activity="inactive_past_week" />,
+        component: <LearnerActivityTable key="learners-inactive-week" id="learners-inactive-week" activity="inactive_past_week" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,
@@ -234,7 +234,7 @@ const Admin = ({
           defaultMessage: 'Not Active in Past Month',
           description: 'Report subtitle for learners inactive in the past month',
         }),
-        component: <LearnerActivityTable id="learners-inactive-month" activity="inactive_past_month" />,
+        component: <LearnerActivityTable key="learners-inactive-month" id="learners-inactive-month" activity="inactive_past_month" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,

src/components/AdminV2/index.jsx

@@ -183,6 +183,9 @@ const LearnerActivityTable = ({ id, enterpriseId, activity }) => {
       FilterStatusComponent={FilterStatus}
       defaultColumnValues={{ Filter: TextFilter }}
       columns={columns}
+      initialTableOptions={{
+        autoResetPage: true,
+      }}
       initialState={{
         pageIndex: currentPageFromUrl, // Use page from URL
         pageSize: PAGE_SIZE,