Skip to content

Commit 74666ee

Browse files
presleyppresleyp
committed
Separate pagination - wip
1 parent ea12615 commit 74666ee

File tree

4 files changed

+279
-79
lines changed

4 files changed

+279
-79
lines changed

‎site/src/components/PaginationWidget/PaginationWidget.tsx

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,48 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
66
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
77
import { Maybe } from "components/Conditionals/Maybe"
88
import { CSSProperties } from "react"
9+
import { useSearchParams } from "react-router-dom"
910
import { PageButton } from "./PageButton"
1011
import { buildPagedList, DEFAULT_RECORDS_PER_PAGE } from "./utils"
1112

1213
export type PaginationWidgetProps = {
1314
prevLabel: string
1415
nextLabel: string
15-
onPrevClick: () => void
16-
onNextClick: () => void
17-
onPageClick?: (page: number) => void
16+
onPageChange: (offset: number, limit: number) => void
1817
numRecordsPerPage?: number
1918
numRecords?: number
20-
activePage?: number
2119
containerStyle?: CSSProperties
2220
}
2321

2422
export const PaginationWidget = ({
2523
prevLabel,
2624
nextLabel,
27-
onPrevClick,
28-
onNextClick,
29-
onPageClick,
25+
onPageChange,
3026
numRecords,
3127
numRecordsPerPage = DEFAULT_RECORDS_PER_PAGE,
32-
activePage = 1,
3328
containerStyle,
3429
}: PaginationWidgetProps): JSX.Element | null => {
35-
const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0
36-
const firstPageActive = activePage === 1 && numPages !== 0
37-
const lastPageActive = activePage === numPages && numPages !== 0
3830
const theme = useTheme()
3931
const isMobile = useMediaQuery(theme.breakpoints.down("sm"))
4032
const styles = useStyles()
4133

34+
const [searchParams, setSearchParams] = useSearchParams()
35+
const currentPage = searchParams.get("page")
36+
? Number(searchParams.get("page"))
37+
: 1
38+
39+
const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0
40+
const firstPageActive = currentPage === 1 && numPages !== 0
41+
const lastPageActive = currentPage === numPages && numPages !== 0
42+
43+
const changePage = (newPage: number) => {
44+
// change the page in the url
45+
setSearchParams({ page: newPage.toString() })
46+
// fetch new page of records
47+
const offset = (newPage - 1) * numRecordsPerPage
48+
onPageChange(offset, numRecordsPerPage)
49+
}
50+
4251
// No need to display any pagination if we know the number of pages is 1
4352
if (numPages === 1 || numRecords === 0) {
4453
return null
@@ -50,7 +59,7 @@ export const PaginationWidget = ({
5059
className={styles.prevLabelStyles}
5160
aria-label="Previous page"
5261
disabled={firstPageActive}
53-
onClick={onPrevClick}
62+
onClick={() => changePage(currentPage - 1)}
5463
>
5564
<KeyboardArrowLeft />
5665
<div>{prevLabel}</div>
@@ -59,26 +68,22 @@ export const PaginationWidget = ({
5968
<ChooseOne>
6069
<Cond condition={isMobile}>
6170
<PageButton
62-
activePage={activePage}
63-
page={activePage}
71+
activePage={currentPage}
72+
page={currentPage}
6473
numPages={numPages}
6574
/>
6675
</Cond>
6776
<Cond>
68-
{buildPagedList(numPages, activePage).map((page) =>
77+
{buildPagedList(numPages, currentPage).map((page) =>
6978
typeof page !== "number" ? (
70-
<PageButton
71-
key={`Page${page}`}
72-
placeholder="..."
73-
disabled
74-
/>
79+
<PageButton key={`Page${page}`} placeholder="..." disabled />
7580
) : (
7681
<PageButton
7782
key={`Page${page}`}
78-
activePage={activePage}
83+
activePage={currentPage}
7984
page={page}
8085
numPages={numPages}
81-
onPageClick={onPageClick}
86+
onPageClick={() => changePage(page)}
8287
/>
8388
),
8489
)}
@@ -88,7 +93,7 @@ export const PaginationWidget = ({
8893
<Button
8994
aria-label="Next page"
9095
disabled={lastPageActive}
91-
onClick={onNextClick}
96+
onClick={() => changePage(currentPage + 1)}
9297
>
9398
<div>{nextLabel}</div>
9499
<KeyboardArrowRight />
@@ -109,5 +114,4 @@ const useStyles = makeStyles((theme) => ({
109114
prevLabelStyles: {
110115
marginRight: `${theme.spacing(0.5)}px`,
111116
},
112-
113117
}))

‎site/src/pages/WorkspacesPage/WorkspacesPage.tsx

Lines changed: 9 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,21 @@
11
import { useMachine } from "@xstate/react"
2-
import { DEFAULT_RECORDS_PER_PAGE } from "components/PaginationWidget/PaginationWidget"
32
import { FC } from "react"
43
import { Helmet } from "react-helmet-async"
5-
import { useNavigate, useSearchParams } from "react-router-dom"
4+
import { useSearchParams } from "react-router-dom"
65
import { workspaceFilterQuery } from "util/filters"
76
import { pageTitle } from "util/page"
8-
import { workspacesMachine } from "xServices/workspaces/workspacesXService"
7+
import { workspacesMachine2 } from "xServices/workspaces/workspacesXService"
98
import { WorkspacesPageView } from "./WorkspacesPageView"
109

1110
const WorkspacesPage: FC = () => {
12-
const navigate = useNavigate()
1311
const [searchParams, setSearchParams] = useSearchParams()
1412
const filter = searchParams.get("filter") ?? workspaceFilterQuery.me
15-
const currentPage = searchParams.get("page")
16-
? Number(searchParams.get("page"))
17-
: 1
18-
const [workspacesState, send] = useMachine(workspacesMachine, {
19-
context: {
20-
page: currentPage,
21-
limit: DEFAULT_RECORDS_PER_PAGE,
22-
filter,
23-
},
24-
actions: {
25-
onPageChange: ({ page }) => {
26-
navigate({
27-
search: `?page=${page}`,
28-
})
29-
},
30-
},
13+
const [workspacesState, send] = useMachine(workspacesMachine2, {
14+
context: { filter },
3115
})
3216

33-
const {
34-
workspaceRefs,
35-
count,
36-
page,
37-
limit,
38-
getWorkspacesError,
39-
getCountError,
40-
} = workspacesState.context
17+
const { workspaceRefs, count, getWorkspacesError, getCountError } =
18+
workspacesState.context
4119

4220
return (
4321
<>
@@ -52,24 +30,16 @@ const WorkspacesPage: FC = () => {
5230
count={count}
5331
getWorkspacesError={getWorkspacesError}
5432
getCountError={getCountError}
55-
page={page}
56-
limit={limit}
57-
onNext={() => {
58-
send("NEXT")
59-
}}
60-
onPrevious={() => {
61-
send("PREVIOUS")
62-
}}
63-
onGoToPage={(page) => {
64-
send("GO_TO_PAGE", { page })
65-
}}
6633
onFilter={(query) => {
6734
setSearchParams({ filter: query })
6835
send({
6936
type: "UPDATE_FILTER",
7037
query,
7138
})
7239
}}
40+
onPageChange={(offset: number, limit: number) =>
41+
send({ type: "GET_WORKSPACES", offset, limit })
42+
}
7343
/>
7444
</>
7545
)

‎site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,9 @@ export interface WorkspacesPageViewProps {
3232
count?: number
3333
getWorkspacesError: Error | unknown
3434
getCountError: Error | unknown
35-
page: number
36-
limit: number
3735
filter?: string
3836
onFilter: (query: string) => void
39-
onNext: () => void
40-
onPrevious: () => void
41-
onGoToPage: (page: number) => void
37+
onPageChange: (offset: number, limit: number) => void
4238
}
4339

4440
export const WorkspacesPageView: FC<
@@ -49,13 +45,9 @@ export const WorkspacesPageView: FC<
4945
count,
5046
getWorkspacesError,
5147
getCountError,
52-
page,
53-
limit,
5448
filter,
5549
onFilter,
56-
onNext,
57-
onPrevious,
58-
onGoToPage,
50+
onPageChange,
5951
}) => {
6052
const presetFilters = [
6153
{ query: workspaceFilterQuery.me, name: Language.yourWorkspacesButton },
@@ -117,12 +109,8 @@ export const WorkspacesPageView: FC<
117109
<PaginationWidget
118110
prevLabel=""
119111
nextLabel=""
120-
onPrevClick={onPrevious}
121-
onNextClick={onNext}
122-
onPageClick={onGoToPage}
123112
numRecords={count}
124-
activePage={page}
125-
numRecordsPerPage={limit}
113+
onPageChange={onPageChange}
126114
/>
127115
</Margins>
128116
)

0 commit comments

Comments
 (0)