PLU-350: fix: add check for invalid pages in params (#777)

## Problem

Right now, users can access pages out of bounds and this becomes an
issue when a user has 11 pipes and if the pipe being deleted falls on
the second page, it will continue displaying `?page=2` and load an empty
state


## Solution
- Check for the last possible page and load that instead
- Apply to other pages: tiles, executions

## Tests
Test 1
- Start with 11 pipes or tiles, delete the one on the 2nd page, it
should load back to the first page and set the page param to be the
nearest one which is 1

Test 2
- Search `?page=100` (basically over the current amount), it should load
to the last page possible

Author: m0nggh

packages/frontend/src/pages/Executions/index.tsx

@@ -1,6 +1,6 @@
 import type { IExecution } from '@plumber/types'
 
-import { ReactElement } from 'react'
+import { ReactElement, useEffect } from 'react'
 import { useQuery } from '@apollo/client'
 import { Center, Flex } from '@chakra-ui/react'
 import { Pagination } from '@opengovsg/design-system-react'
@@ -16,7 +16,7 @@ import { usePaginationAndFilter } from '@/hooks/usePaginationAndFilter'
 
 import SearchWithFilterInput from './components/SearchWithFilterInput'
 
-const EXECUTION_PER_PAGE = 10
+const EXECUTIONS_PER_PAGE = 10
 const EXECUTIONS_TITLE = 'Executions'
 
 interface ExecutionParameters {
@@ -32,8 +32,8 @@ interface ExecutionsListProps {
 }
 
 const getLimitAndOffset = (params: ExecutionParameters) => ({
-  limit: EXECUTION_PER_PAGE,
-  offset: (params.page - 1) * EXECUTION_PER_PAGE,
+  limit: EXECUTIONS_PER_PAGE,
+  offset: (params.page - 1) * EXECUTIONS_PER_PAGE,
   ...(params.status !== StatusType.Waiting && { status: params.status }),
   searchInput: params.input,
 })
@@ -98,7 +98,17 @@ export default function Executions(): ReactElement {
     edges?.map(({ node }: { node: IExecution }) => node) ?? []
 
   const hasNoUserExecutions = executions.length === 0 && !isSearching
-  const hasPagination = !loading && pageInfo?.totalCount > EXECUTION_PER_PAGE
+  const totalCount: number = pageInfo?.totalCount ?? 0
+  const hasPagination = !loading && totalCount > EXECUTIONS_PER_PAGE
+
+  // ensure invalid pages won't be accessed even after deleting executions
+  const lastPage = Math.ceil(totalCount / EXECUTIONS_PER_PAGE)
+  useEffect(() => {
+    // Defer the search params update till after the initial render
+    if (lastPage !== 0 && page > lastPage) {
+      setSearchParams({ page: lastPage })
+    }
+  }, [lastPage, page, setSearchParams])
 
   return (
     <Container py={9}>
@@ -127,8 +137,8 @@ export default function Executions(): ReactElement {
           <Pagination
             currentPage={pageInfo?.currentPage}
             onPageChange={(page) => setSearchParams({ page })}
-            pageSize={EXECUTION_PER_PAGE}
-            totalCount={pageInfo?.totalCount}
+            pageSize={EXECUTIONS_PER_PAGE}
+            totalCount={totalCount}
           />
         </Flex>
       )}

packages/frontend/src/pages/Flows/index.tsx

@@ -1,5 +1,6 @@
 import type { IFlow } from '@plumber/types'
 
+import { ReactElement, useEffect } from 'react'
 import { useQuery } from '@apollo/client'
 import { Box, Center, Flex, useDisclosure } from '@chakra-ui/react'
 import { Button, Pagination } from '@opengovsg/design-system-react'
@@ -17,7 +18,7 @@ import ApproveTransfersInfobox from './components/ApproveTransfersInfobox'
 import CreateFlowModal from './components/CreateFlowModal'
 import EmptyFlows from './components/EmptyFlows'
 
-const FLOW_PER_PAGE = 10
+const FLOWS_PER_PAGE = 10
 const FLOWS_TITLE = 'Pipes'
 
 interface FlowsInternalProps {
@@ -28,8 +29,8 @@ interface FlowsInternalProps {
 }
 
 const getLimitAndOffset = (page: number) => ({
-  limit: FLOW_PER_PAGE,
-  offset: (page - 1) * FLOW_PER_PAGE,
+  limit: FLOWS_PER_PAGE,
+  offset: (page - 1) * FLOWS_PER_PAGE,
 })
 
 function FlowsList({
@@ -71,7 +72,7 @@ function FlowsList({
   )
 }
 
-export default function Flows(): React.ReactElement {
+export default function Flows(): ReactElement {
   const { input, page, setSearchParams, isSearching } = usePaginationAndFilter()
   const { isOpen, onOpen, onClose } = useDisclosure()
 
@@ -84,10 +85,19 @@ export default function Flows(): React.ReactElement {
 
   const { pageInfo, edges } = data?.getFlows || {}
   const flows: IFlow[] = edges?.map(({ node }: { node: IFlow }) => node) ?? []
-  const hasPagination =
-    !loading && pageInfo && pageInfo.totalCount > FLOW_PER_PAGE
+  const totalCount: number = pageInfo?.totalCount ?? 0
+  const hasPagination = !loading && totalCount > FLOWS_PER_PAGE
   const hasNoUserFlows = flows.length === 0 && !isSearching
 
+  // ensure invalid pages won't be accessed even after deleting flows
+  const lastPage = Math.ceil(totalCount / FLOWS_PER_PAGE)
+  useEffect(() => {
+    // Defer the search params update till after the initial render
+    if (lastPage !== 0 && page > lastPage) {
+      setSearchParams({ page: lastPage })
+    }
+  }, [lastPage, page, setSearchParams])
+
   return (
     <Container py={9}>
       {!hasNoUserFlows && (
@@ -121,8 +131,8 @@ export default function Flows(): React.ReactElement {
           <Pagination
             currentPage={pageInfo?.currentPage}
             onPageChange={(page) => setSearchParams({ page })}
-            pageSize={FLOW_PER_PAGE}
-            totalCount={pageInfo?.totalCount}
+            pageSize={FLOWS_PER_PAGE}
+            totalCount={totalCount}
           />
         </Flex>
       )}

packages/frontend/src/pages/Tiles/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { useQuery } from '@apollo/client'
 import { Center, Flex } from '@chakra-ui/react'
 import { Pagination } from '@opengovsg/design-system-react'
@@ -70,8 +71,17 @@ export default function Tiles(): JSX.Element {
   const tilesToDisplay = edges?.map(({ node }) => node) ?? []
 
   const hasNoUserTiles = tilesToDisplay.length === 0 && !isSearching
-  const hasPagination =
-    !loading && pageInfo && pageInfo.totalCount > TILES_PER_PAGE
+  const totalCount: number = pageInfo?.totalCount ?? 0
+  const hasPagination = !loading && pageInfo && totalCount > TILES_PER_PAGE
+
+  // ensure invalid pages won't be accessed even after deleting tiles
+  const lastPage = Math.ceil(totalCount / TILES_PER_PAGE)
+  useEffect(() => {
+    // Defer the search params update till after the initial render
+    if (lastPage !== 0 && page > lastPage) {
+      setSearchParams({ page: lastPage })
+    }
+  }, [lastPage, page, setSearchParams])
 
   return (
     <Container py={9}>
@@ -100,7 +110,7 @@ export default function Tiles(): JSX.Element {
             currentPage={pageInfo.currentPage}
             onPageChange={(page) => setSearchParams({ page })}
             pageSize={TILES_PER_PAGE}
-            totalCount={pageInfo.totalCount}
+            totalCount={totalCount}
           />
         </Flex>
       )}