paginate game activity page

Author: tudddorrr

src/api/useGameActivities.ts

@@ -5,22 +5,32 @@ import makeValidatedGetRequest from './makeValidatedGetRequest'
 import { z } from 'zod'
 import { gameActivitySchema } from '../entities/gameActivity'
 
-export default function useGameActivities(activeGame: Game) {
-  const fetcher = async ([url]: [string]) => {
-    const res = await makeValidatedGetRequest(url, z.object({
-      activities: z.array(gameActivitySchema)
+export default function useGameActivities(activeGame: Game, page: number) {
+  const fetcher = async ([url, page]: [string, number]) => {
+    const qs = new URLSearchParams({
+      page: String(page)
+    }).toString()
+
+    const res = await makeValidatedGetRequest(`${url}?${qs}`, z.object({
+      activities: z.array(gameActivitySchema),
+      count: z.number(),
+      itemsPerPage: z.number(),
+      isLastPage: z.boolean()
     }))
 
     return res
   }
 
   const { data, error } = useSWR(
-    [`/games/${activeGame.id}/game-activities`],
+    [`/games/${activeGame.id}/game-activities`, page],
     fetcher
   )
 
   return {
     activities: data?.activities ?? [],
+    count: data?.count,
+    itemsPerPage: data?.itemsPerPage,
+    isLastPage: data?.isLastPage,
     loading: !data && !error,
     error: error && buildError(error)
   }

src/pages/Activity.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import useGameActivities from '../api/useGameActivities'
 import ErrorMessage from '../components/ErrorMessage'
 import activeGameState, { SelectedActiveGame } from '../state/activeGameState'
@@ -7,10 +8,13 @@ import { secondaryNavRoutes } from '../constants/secondaryNavRoutes'
 import Page from '../components/Page'
 import useDaySections from '../utils/useDaySections'
 import ActivityRenderer from '../components/ActivityRenderer'
+import Pagination from '../components/Pagination'
 
 export default function Activity() {
+  const [page, setPage] = useState(0)
+
   const activeGame = useRecoilValue(activeGameState) as SelectedActiveGame
-  const { activities, loading, error } = useGameActivities(activeGame)
+  const { activities, count, itemsPerPage, loading, error } = useGameActivities(activeGame, page)
   const sections = useDaySections(activities)
 
   return (
@@ -28,6 +32,8 @@ export default function Activity() {
       ))}
 
       {error && <ErrorMessage error={error} />}
+
+      {!!count && <Pagination count={count!} pageState={[page, setPage]} itemsPerPage={itemsPerPage!} />}
     </Page>
   )
 }

src/pages/__tests__/Activity.test.tsx

@@ -12,7 +12,7 @@ describe('<Activity />', () => {
   const axiosMock = new MockAdapter(api)
 
   it('should handle having no activities', async () => {
-    axiosMock.onGet('http://talo.api/games/1/game-activities').replyOnce(200, { activities: [] })
+    axiosMock.onGet(/games\/1\/game-activities/).replyOnce(200, { activities: [], count: 0, itemsPerPage: 25, isLastPage: true })
 
     render(
       <KitchenSink
@@ -49,7 +49,7 @@ describe('<Activity />', () => {
       }
     ]
 
-    axiosMock.onGet('http://talo.api/games/2/game-activities').replyOnce(200, { activities })
+    axiosMock.onGet(/games\/2\/game-activities/).replyOnce(200, { activities, count: 3, itemsPerPage: 25, isLastPage: true })
 
     render(
       <KitchenSink
@@ -89,7 +89,7 @@ describe('<Activity />', () => {
       }
     ]
 
-    axiosMock.onGet('http://talo.api/games/3/game-activities').replyOnce(200, { activities })
+    axiosMock.onGet(/games\/3\/game-activities/).replyOnce(200, { activities, count: 3, itemsPerPage: 25, isLastPage: true })
 
     render(
       <KitchenSink
@@ -127,7 +127,7 @@ describe('<Activity />', () => {
       }
     ]
 
-    axiosMock.onGet('http://talo.api/games/4/game-activities').replyOnce(200, { activities })
+    axiosMock.onGet(/games\/4\/game-activities/).replyOnce(200, { activities, count: 3, itemsPerPage: 25, isLastPage: true })
 
     render(
       <KitchenSink
@@ -155,7 +155,7 @@ describe('<Activity />', () => {
   })
 
   it('should render an error', async () => {
-    axiosMock.onGet('http://talo.api/games/5/game-activities').networkErrorOnce()
+    axiosMock.onGet(/games\/5\/game-activities/).networkErrorOnce()
 
     render(
       <KitchenSink