Fix audit log pagination

BrunoQuaresma · BrunoQuaresma · commit b72c3a96b8f0 · 2022-09-07T18:32:31.000Z
diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
@@ -1,16 +1,27 @@
 import { useMachine } from "@xstate/react"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
+import { useNavigate, useSearchParams } from "react-router-dom"
 import { pageTitle } from "util/page"
 import { auditMachine } from "xServices/audit/auditXService"
 import { AuditPageView } from "./AuditPageView"
 
 const AuditPage: FC = () => {
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const currentPage = searchParams.get("page") ? Number(searchParams.get("page")) : 1
   const [auditState, auditSend] = useMachine(auditMachine, {
     context: {
-      page: 1,
+      page: currentPage,
       limit: 25,
     },
+    actions: {
+      onPageChange: ({ page }) => {
+        navigate({
+          search: `?page=${page}`,
+        })
+      },
+    },
   })
   const { auditLogs, count, page, limit } = auditState.context
 
@@ -31,6 +42,7 @@ const AuditPage: FC = () => {
           auditSend("PREVIOUS")
         }}
         onGoToPage={(page) => {
+          console.log("PAGE", page)
           auditSend("GO_TO_PAGE", { page })
         }}
       />
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -83,7 +83,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
         </Table>
       </TableContainer>
 
-      {!isLoading && count > limit ? (
+      {count && count > limit ? (
         <PaginationWidget
           prevLabel=""
           nextLabel=""
diff --git a/site/src/xServices/audit/auditXService.ts b/site/src/xServices/audit/auditXService.ts
@@ -10,11 +10,11 @@ export const auditMachine = createMachine(
     schema: {
       context: {} as { auditLogs?: AuditLog[]; count?: number; page: number; limit: number },
       services: {} as {
-        loadAuditLogs: {
-          data: AuditLog[]
-        }
-        loadAuditLogsCount: {
-          data: number
+        loadAuditLogsAndCount: {
+          data: {
+            auditLogs: AuditLog[]
+            count: number
+          }
         }
       },
       events: {} as
@@ -33,42 +33,35 @@ export const auditMachine = createMachine(
     initial: "loading",
     states: {
       loading: {
-        invoke: [
-          {
-            src: "loadAuditLogs",
-            onDone: {
-              actions: ["assignAuditLogs"],
-            },
-            onError: {
-              target: "error",
-              actions: ["displayLoadAuditLogsError"],
-            },
+        // Right now, XState doesn't a good job with state + context typing so
+        // this forces the AuditPageView to showing the loading state when the
+        // loading state is called again by cleaning up the audit logs data
+        entry: "clearPreviousAuditLogs",
+        invoke: {
+          src: "loadAuditLogsAndCount",
+          onDone: {
+            target: "success",
+            actions: ["assignAuditLogsAndCount"],
           },
-          {
-            src: "loadAuditLogsCount",
-            onDone: {
-              actions: ["assignCount"],
-            },
-            onError: {
-              target: "error",
-              actions: ["displayLoadAuditLogsCountError"],
-            },
+          onError: {
+            target: "error",
+            actions: ["displayApiError"],
           },
-        ],
+        },
         onDone: "success",
       },
       success: {
         on: {
           NEXT: {
-            actions: ["assignNextPage"],
+            actions: ["assignNextPage", "onPageChange"],
             target: "loading",
           },
           PREVIOUS: {
-            actions: ["assignPreviousPage"],
+            actions: ["assignPreviousPage", "onPageChange"],
             target: "loading",
           },
           GO_TO_PAGE: {
-            actions: ["assignPage"],
+            actions: ["assignPage", "onPageChange"],
             target: "loading",
           },
         },
@@ -80,11 +73,12 @@ export const auditMachine = createMachine(
   },
   {
     actions: {
-      assignAuditLogs: assign({
-        auditLogs: (_, event) => event.data,
+      clearPreviousAuditLogs: assign({
+        auditLogs: (_) => undefined,
       }),
-      assignCount: assign({
-        count: (_, event) => event.data,
+      assignAuditLogsAndCount: assign({
+        auditLogs: (_, event) => event.data.auditLogs,
+        count: (_, event) => event.data.count,
       }),
       assignNextPage: assign({
         page: ({ page }) => page + 1,
@@ -93,25 +87,29 @@ export const auditMachine = createMachine(
         page: ({ page }) => page - 1,
       }),
       assignPage: assign({
-        page: ({ page }) => page,
+        page: (_, { page }) => page,
       }),
-      displayLoadAuditLogsError: (_, event) => {
+      displayApiError: (_, event) => {
         const message = getErrorMessage(event.data, "Error on loading audit logs.")
         displayError(message)
       },
-      displayLoadAuditLogsCountError: (_, event) => {
-        const message = getErrorMessage(event.data, "Error on loading number of audit log entries.")
-        displayError(message)
-      },
     },
     services: {
-      loadAuditLogs: ({ page, limit }, _) =>
-        getAuditLogs({
-          // The page in the API starts at 0
-          offset: (page - 1) * limit,
-          limit,
-        }).then((data) => data.audit_logs),
-      loadAuditLogsCount: () => getAuditLogsCount().then((data) => data.count),
+      loadAuditLogsAndCount: async ({ page, limit }, _) => {
+        const [auditLogs, count] = await Promise.all([
+          getAuditLogs({
+            // The page in the API starts at 0
+            offset: (page - 1) * limit,
+            limit,
+          }).then((data) => data.audit_logs),
+          getAuditLogsCount().then((data) => data.count),
+        ])
+
+        return {
+          auditLogs,
+          count,
+        }
+      },
     },
   },
 )
