Skip to content

Commit b7edc7a

Browse files
presleyppresleyp
committed
Update Audit Page
1 parent c4098f6 commit b7edc7a

File tree

3 files changed

+63
-97
lines changed

3 files changed

+63
-97
lines changed

‎site/src/pages/AuditPage/AuditPage.tsx

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,29 @@
11
import { useMachine } from "@xstate/react"
2+
import { getPaginationContext } from "components/PaginationWidget/utils"
23
import { FC } from "react"
34
import { Helmet } from "react-helmet-async"
4-
import { useNavigate, useSearchParams } from "react-router-dom"
5-
import { useFilter } from "util/filters"
5+
import { useSearchParams } from "react-router-dom"
66
import { pageTitle } from "util/page"
77
import { auditMachine } from "xServices/audit/auditXService"
8+
import { PaginationMachineRef } from "xServices/pagination/paginationXService"
89
import { AuditPageView } from "./AuditPageView"
910

1011
const AuditPage: FC = () => {
11-
const navigate = useNavigate()
12-
const [searchParams] = useSearchParams()
13-
const currentPage = searchParams.get("page")
14-
? Number(searchParams.get("page"))
15-
: 1
16-
const { filter, setFilter } = useFilter("")
12+
const [searchParams, setSearchParams] = useSearchParams()
13+
const filter = searchParams.get("filter") ?? ""
1714
const [auditState, auditSend] = useMachine(auditMachine, {
1815
context: {
19-
page: currentPage,
20-
limit: 25,
2116
filter,
17+
paginationContext: getPaginationContext(searchParams),
2218
},
2319
actions: {
24-
onPageChange: ({ page }) => {
25-
navigate({
26-
search: `?page=${page}`,
27-
})
28-
},
20+
updateURL: (context, event) =>
21+
setSearchParams({ page: event.page, filter: context.filter }),
2922
},
3023
})
31-
const { auditLogs, count, page, limit } = auditState.context
24+
25+
const { auditLogs, count } = auditState.context
26+
const paginationRef = auditState.context.paginationRef as PaginationMachineRef
3227

3328
return (
3429
<>
@@ -39,21 +34,10 @@ const AuditPage: FC = () => {
3934
filter={filter}
4035
auditLogs={auditLogs}
4136
count={count}
42-
page={page}
43-
limit={limit}
44-
onNext={() => {
45-
auditSend("NEXT")
46-
}}
47-
onPrevious={() => {
48-
auditSend("PREVIOUS")
49-
}}
50-
onGoToPage={(page) => {
51-
auditSend("GO_TO_PAGE", { page })
52-
}}
5337
onFilter={(filter) => {
54-
setFilter(filter)
5538
auditSend("FILTER", { filter })
5639
}}
40+
paginationRef={paginationRef}
5741
/>
5842
</>
5943
)

‎site/src/pages/AuditPage/AuditPageView.tsx

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Stack } from "components/Stack/Stack"
1919
import { TableLoader } from "components/TableLoader/TableLoader"
2020
import { AuditHelpTooltip } from "components/Tooltips"
2121
import { FC } from "react"
22+
import { PaginationMachineRef } from "xServices/pagination/paginationXService"
2223

2324
export const Language = {
2425
title: "Audit",
@@ -39,25 +40,17 @@ const presetFilters = [
3940
export interface AuditPageViewProps {
4041
auditLogs?: AuditLog[]
4142
count?: number
42-
page: number
43-
limit: number
4443
filter: string
4544
onFilter: (filter: string) => void
46-
onNext: () => void
47-
onPrevious: () => void
48-
onGoToPage: (page: number) => void
45+
paginationRef: PaginationMachineRef
4946
}
5047

5148
export const AuditPageView: FC<AuditPageViewProps> = ({
5249
auditLogs,
5350
count,
54-
page,
55-
limit,
5651
filter,
5752
onFilter,
58-
onNext,
59-
onPrevious,
60-
onGoToPage,
53+
paginationRef,
6154
}) => {
6255
const isLoading = auditLogs === undefined || count === undefined
6356
const isEmpty = !isLoading && auditLogs.length === 0
@@ -106,18 +99,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
10699
</Table>
107100
</TableContainer>
108101

109-
{count && count > limit ? (
110-
<PaginationWidget
111-
prevLabel=""
112-
nextLabel=""
113-
onPrevClick={onPrevious}
114-
onNextClick={onNext}
115-
onPageClick={onGoToPage}
116-
numRecords={count}
117-
activePage={page}
118-
numRecordsPerPage={limit}
119-
/>
120-
) : null}
102+
<PaginationWidget numRecords={count} paginationRef={paginationRef} />
121103
</Margins>
122104
)
123105
}

‎site/src/xServices/audit/auditXService.ts

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,22 @@ import { getAuditLogs, getAuditLogsCount } from "api/api"
22
import { getErrorMessage } from "api/errors"
33
import { AuditLog } from "api/typesGenerated"
44
import { displayError } from "components/GlobalSnackbar/utils"
5-
import { assign, createMachine } from "xstate"
5+
import { getPaginationData } from "components/PaginationWidget/utils"
6+
import {
7+
PaginationContext,
8+
PaginationMachineRef,
9+
paginationMachine,
10+
} from "xServices/pagination/paginationXService"
11+
import { assign, createMachine, spawn, send } from "xstate"
12+
13+
const auditPaginationId = "auditPagination"
614

715
interface AuditContext {
816
auditLogs?: AuditLog[]
917
count?: number
10-
page: number
11-
limit: number
1218
filter: string
19+
paginationContext: PaginationContext
20+
paginationRef?: PaginationMachineRef
1321
}
1422

1523
export const auditMachine = createMachine(
@@ -29,22 +37,20 @@ export const auditMachine = createMachine(
2937
},
3038
events: {} as
3139
| {
32-
type: "NEXT"
33-
}
34-
| {
35-
type: "PREVIOUS"
36-
}
37-
| {
38-
type: "GO_TO_PAGE"
39-
page: number
40+
type: "UPDATE_PAGE"
41+
page: string
4042
}
4143
| {
4244
type: "FILTER"
4345
filter: string
4446
},
4547
},
46-
initial: "loading",
48+
initial: "startPagination",
4749
states: {
50+
startPagination: {
51+
entry: "assignPaginationRef",
52+
always: "loading",
53+
},
4854
loading: {
4955
// Right now, XState doesn't a good job with state + context typing so
5056
// this forces the AuditPageView to showing the loading state when the
@@ -65,21 +71,12 @@ export const auditMachine = createMachine(
6571
},
6672
success: {
6773
on: {
68-
NEXT: {
69-
actions: ["assignNextPage", "onPageChange"],
70-
target: "loading",
71-
},
72-
PREVIOUS: {
73-
actions: ["assignPreviousPage", "onPageChange"],
74-
target: "loading",
75-
},
76-
GO_TO_PAGE: {
77-
actions: ["assignPage", "onPageChange"],
74+
UPDATE_PAGE: {
75+
actions: ["updateURL"],
7876
target: "loading",
7977
},
8078
FILTER: {
81-
actions: ["assignFilter"],
82-
target: "loading",
79+
actions: ["assignFilter", "sendResetPage"],
8380
},
8481
},
8582
},
@@ -97,14 +94,12 @@ export const auditMachine = createMachine(
9794
auditLogs: (_, event) => event.data.auditLogs,
9895
count: (_, event) => event.data.count,
9996
}),
100-
assignNextPage: assign({
101-
page: ({ page }) => page + 1,
102-
}),
103-
assignPreviousPage: assign({
104-
page: ({ page }) => page - 1,
105-
}),
106-
assignPage: assign({
107-
page: (_, { page }) => page,
97+
assignPaginationRef: assign({
98+
paginationRef: (context) =>
99+
spawn(
100+
paginationMachine.withContext(context.paginationContext),
101+
auditPaginationId,
102+
),
108103
}),
109104
assignFilter: assign({
110105
filter: (_, { filter }) => filter,
@@ -116,24 +111,29 @@ export const auditMachine = createMachine(
116111
)
117112
displayError(message)
118113
},
114+
sendResetPage: send({ type: "RESET_PAGE" }, { to: auditPaginationId }),
119115
},
120116
services: {
121-
loadAuditLogsAndCount: async ({ page, limit, filter }, _) => {
122-
const [auditLogs, count] = await Promise.all([
123-
getAuditLogs({
124-
// The page in the API starts at 0
125-
offset: (page - 1) * limit,
126-
limit,
127-
q: filter,
128-
}).then((data) => data.audit_logs),
129-
getAuditLogsCount({
130-
q: filter,
131-
}).then((data) => data.count),
132-
])
117+
loadAuditLogsAndCount: async (context) => {
118+
if (context.paginationRef) {
119+
const { offset, limit } = getPaginationData(context.paginationRef)
120+
const [auditLogs, count] = await Promise.all([
121+
getAuditLogs({
122+
offset,
123+
limit,
124+
q: context.filter,
125+
}).then((data) => data.audit_logs),
126+
getAuditLogsCount({
127+
q: context.filter,
128+
}).then((data) => data.count),
129+
])
133130

134-
return {
135-
auditLogs,
136-
count,
131+
return {
132+
auditLogs,
133+
count,
134+
}
135+
} else {
136+
throw new Error("Cannot get audit logs without pagination data")
137137
}
138138
},
139139
},

0 commit comments

Comments
 (0)