reset on page change

web/src/app/lists/ListPageControls.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import {
   Button,
   Card,
@@ -12,6 +12,7 @@ import { Add, ChevronLeft, ChevronRight } from '@mui/icons-material'
 import CreateFAB from './CreateFAB'
 import { useIsWidthDown } from '../util/useWidth'
 import { usePages } from '../util/pagination'
+import { useURLKey } from '../actions'
 
 const useStyles = makeStyles((theme: Theme) => ({
   progress: {
@@ -64,7 +65,12 @@ export default function ListPageControls(
   const showCreate = canCreate(props)
   const isMobile = useIsWidthDown('md')
 
-  const [back, next] = usePages(props.nextCursor)
+  const [back, next, reset] = usePages(props.nextCursor)
+  const urlKey = useURLKey()
+  // reset pageNumber on page reload
+  useEffect(() => {
+    props.onCursorChange(reset())
+  }, [urlKey])
 
   return (
     <Grid container spacing={2}>

web/src/app/util/pagination.ts

@@ -6,10 +6,11 @@ import { useState } from 'react'
  *
  * @returns {(() => string) | undefined}  A function to go back to the previous page, or undefined if there is no previous page.
  * @returns {(() => string) | undefined} A function to go to the next page, or undefined if there is no next page.
+ * @returns {() => string} A function to reset the page cursor to the first page.
  */
 export function usePages(
   nextCursor: string | null | undefined,
-): [(() => string) | undefined, (() => string) | undefined] {
+): [(() => string) | undefined, (() => string) | undefined, () => string] {
   const [pageCursors, setPageCursors] = useState([''])
 
   function goBack(): string {
@@ -27,5 +28,9 @@ export function usePages(
   return [
     pageCursors.length > 1 ? goBack : undefined,
     nextCursor ? goNext : undefined,
+    () => {
+      setPageCursors([''])
+      return ''
+    },
   ]
 }