Wire activity log pagination ui to API

assets/js/common/ActivityLogOverview/ActivityLogOverview.jsx

@@ -51,11 +51,22 @@ function ActivityLogOverview({
   loading = false,
   onActivityLogEntryClick = noop,
   onCloseActivityLogEntryDetails = noop,
+  onChangeItemsPerPage = noop,
+  canNavigateToPreviousPage = false,
+  onPreviousPage = noop,
+  canNavigateToNextPage = false,
+  onNextPage = noop,
 }) {
   const [selectedEntry, setEntry] = useState({});
 
   const activityLogTableConfig = {
     pagination: true,
+    cursorPagination: true,
+    canNavigateToPreviousPage,
+    onPreviousPage,
+    canNavigateToNextPage,
+    onNextPage,
+    onChangeItemsPerPage,
     usePadding: false,
     columns: [
       {

assets/js/common/Table/Table.jsx

@@ -61,6 +61,7 @@ const getFilterFunction = (column, value) =>
     : getDefaultFilterFunction(value, column.key);
 
 const itemsPerPageOptions = [10, 20, 50, 75, 100];
+export const defaultItemsPerPage = itemsPerPageOptions[0];
 
 function Table({
   config,

assets/js/lib/api/activityLogs.js

@@ -1,3 +1,6 @@
 import { networkClient } from '@lib/network';
 
-export const getActivityLog = () => networkClient.get(`/activity_log`);
+export const getActivityLog = (filters = {}) =>
+  networkClient.get(`/activity_log`, {
+    params: filters,
+  });

assets/js/pages/ActivityLogPage/ActivityLogPage.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 import PageHeader from '@common/PageHeader';
 import ActivityLogOverview from '@common/ActivityLogOverview';
+import { defaultItemsPerPage } from '@common/Table/Table';
 
 import { getActivityLog } from '@lib/api/activityLogs';
 
@@ -10,16 +11,26 @@ function ActivityLogPage() {
   const [isLoading, setLoading] = useState(true);
   const [activityLogDetailModalOpen, setActivityLogDetailModalOpen] =
     useState(false);
+  const [currentPaginationData, setCurrentPaginationData] = useState({});
+  const [currentlyAppliedPagination, setCurrentlyAppliedPagination] = useState({
+    first: defaultItemsPerPage,
+  });
 
-  useEffect(() => {
-    getActivityLog()
+  const loadActivityLog = (filters) => {
+    setLoading(true);
+    getActivityLog(filters)
       .then((response) => {
         setActivityLog(response.data?.data ?? []);
+        setCurrentPaginationData(response.data?.pagination ?? {});
       })
       .catch(() => setActivityLog([]))
       .finally(() => {
         setLoading(false);
       });
+  };
+
+  useEffect(() => {
+    loadActivityLog(currentlyAppliedPagination);
   }, []);
 
   return (
@@ -33,6 +44,42 @@ function ActivityLogPage() {
         onCloseActivityLogEntryDetails={() =>
           setActivityLogDetailModalOpen(false)
         }
+        onChangeItemsPerPage={(itemsPerPage) => {
+          const newPagination = {
+            ...currentlyAppliedPagination,
+            ...(currentlyAppliedPagination?.first
+              ? { first: itemsPerPage }
+              : { last: itemsPerPage }),
+          };
+          loadActivityLog(newPagination);
+          setCurrentlyAppliedPagination(newPagination);
+        }}
+        canNavigateToPreviousPage={
+          !isLoading && currentPaginationData.has_previous_page
+        }
+        onPreviousPage={() => {
+          const newPagination = {
+            last:
+              currentlyAppliedPagination.first ||
+              currentlyAppliedPagination.last,
+            before: currentPaginationData.start_cursor,
+          };
+          loadActivityLog(newPagination);
+          setCurrentlyAppliedPagination(newPagination);
+        }}
+        canNavigateToNextPage={
+          !isLoading && currentPaginationData.has_next_page
+        }
+        onNextPage={() => {
+          const newPagination = {
+            first:
+              currentlyAppliedPagination.first ||
+              currentlyAppliedPagination.last,
+            after: currentPaginationData.end_cursor,
+          };
+          loadActivityLog(newPagination);
+          setCurrentlyAppliedPagination(newPagination);
+        }}
       />
     </>
   );