fix: pagination issues

src/app/[organizationId]/forks/[forkId]/page.tsx

@@ -67,13 +67,18 @@ const Fork = () => {
   )
 
   const [deleteMirrorName, setDeleteMirrorName] = useState<string | null>(null)
+  const [numberOfMirrorsOnPage, setNumberOfMirrorsOnPage] = useState(0)
+
   const closeDeleteDialog = useCallback(
     () => setDeleteMirrorName(null),
     [setDeleteMirrorName],
   )
   const openDeleteDialog = useCallback(
-    (mirrorName: string) => setDeleteMirrorName(mirrorName),
-    [setDeleteMirrorName],
+    (mirrorName: string, numberOfMirrorsOnPage: number) => {
+      setDeleteMirrorName(mirrorName)
+      setNumberOfMirrorsOnPage(numberOfMirrorsOnPage)
+    },
+    [setDeleteMirrorName, setNumberOfMirrorsOnPage],
   )
 
   const [isCreateErrorFlashOpen, setIsCreateErrorFlashOpen] = useState(false)
@@ -145,7 +150,7 @@ const Fork = () => {
   const [searchValue, setSearchValue] = useState('')
 
   // values for pagination
-  const pageSize = 5
+  const pageSize = 10
   const [pageIndex, setPageIndex] = useState(0)
   const start = pageIndex * pageSize
   const end = start + pageSize
@@ -275,13 +280,19 @@ const Fork = () => {
       })
 
       refetchMirrors()
+
+      // if the mirror being deleted is the only mirror on the page reload the page
+      if (numberOfMirrorsOnPage === 1) {
+        window.location.reload()
+      }
     },
     [
       closeAllFlashes,
       closeDeleteDialog,
       deleteMirror,
       openDeleteErrorFlash,
       refetchMirrors,
+      numberOfMirrorsOnPage,
       orgData,
     ],
   )
@@ -318,7 +329,7 @@ const Fork = () => {
                 align: 'end',
               },
             ]}
-            rows={5}
+            rows={pageSize}
             cellPadding="spacious"
           />
           <Table.Pagination aria-label="pagination" totalCount={0} />
@@ -333,17 +344,17 @@ const Fork = () => {
     threshold: 0.2,
   })
 
-  // set up pagination
-  let mirrorPaginationSet = []
+  // perform search if there is a search value
+  let mirrorSet = []
   if (searchValue) {
-    mirrorPaginationSet = fuse
-      .search(searchValue)
-      .map((result) => result.item)
-      .slice(start, end)
+    mirrorSet = fuse.search(searchValue).map((result) => result.item)
   } else {
-    mirrorPaginationSet = mirrors.slice(start, end)
+    mirrorSet = mirrors
   }
 
+  // slice the data based on the pagination
+  const mirrorPaginationSet = mirrorSet.slice(start, end)
+
   return (
     <Box>
       <ForkHeader forkData={forkData} />
@@ -517,7 +528,10 @@ const Fork = () => {
                           <ActionList.Item
                             variant="danger"
                             onSelect={() => {
-                              openDeleteDialog(row.name)
+                              openDeleteDialog(
+                                row.name,
+                                mirrorPaginationSet.length,
+                              )
                             }}
                           >
                             <Stack align="center" direction="horizontal">
@@ -538,9 +552,7 @@ const Fork = () => {
           />
           <Table.Pagination
             aria-label="pagination"
-            totalCount={
-              searchValue ? mirrorPaginationSet.length : mirrors.length
-            }
+            totalCount={mirrorSet.length}
             pageSize={pageSize}
             onChange={({ pageIndex }) => {
               setPageIndex(pageIndex)

src/app/[organizationId]/page.tsx

@@ -38,7 +38,7 @@ const Organization = () => {
   const [searchValue, setSearchValue] = useState('')
 
   // values for pagination
-  const pageSize = 5
+  const pageSize = 10
   const [pageIndex, setPageIndex] = useState(0)
   const start = pageIndex * pageSize
   const end = start + pageSize
@@ -75,7 +75,7 @@ const Organization = () => {
                 width: 'auto',
               },
             ]}
-            rows={5}
+            rows={pageSize}
             cellPadding="spacious"
           />
           <Table.Pagination aria-label="pagination" totalCount={0} />
@@ -92,17 +92,17 @@ const Organization = () => {
     threshold: 0.2,
   })
 
-  // set up pagination
-  let forksPaginationSet = []
+  // perform search if there is a search value
+  let forksSet = []
   if (searchValue) {
-    forksPaginationSet = fuse
-      .search(searchValue)
-      .map((result) => result.item)
-      .slice(start, end)
+    forksSet = fuse.search(searchValue).map((result) => result.item)
   } else {
-    forksPaginationSet = forks.slice(start, end)
+    forksSet = forks
   }
 
+  // slice the data based on the pagination
+  const forksPaginationSet = forksSet.slice(start, end)
+
   return (
     <Box>
       <OrgHeader orgData={orgData} />
@@ -260,9 +260,7 @@ const Organization = () => {
           />
           <Table.Pagination
             aria-label="pagination"
-            totalCount={
-              searchValue ? forksPaginationSet.length : forksData.totalCount
-            }
+            totalCount={forksSet.length}
             pageSize={pageSize}
             onChange={({ pageIndex }) => {
               setPageIndex(pageIndex)

src/app/layout.tsx

@@ -29,6 +29,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
                         top: 0,
                         height: 64,
                         display: 'grid',
+                        zIndex: 1000,
                       }}
                     >
                       <MainHeader />

src/app/page.tsx

@@ -18,7 +18,7 @@ const Home = () => {
   const [searchValue, setSearchValue] = useState('')
 
   // values for pagination
-  const pageSize = 5
+  const pageSize = 10
   const [pageIndex, setPageIndex] = useState(0)
   const start = pageIndex * pageSize
   const end = start + pageSize
@@ -41,7 +41,7 @@ const Home = () => {
                 rowHeader: true,
               },
             ]}
-            rows={5}
+            rows={pageSize}
             cellPadding="spacious"
           />
           <Table.Pagination aria-label="pagination" totalCount={0} />
@@ -94,17 +94,17 @@ const Home = () => {
     threshold: 0.2,
   })
 
-  // set up pagination
-  let orgsPaginationSet: OrgsData = []
+  // perform search if there is a search value
+  let orgsSet: OrgsData = []
   if (searchValue) {
-    orgsPaginationSet = fuse
-      .search(searchValue)
-      .map((result) => result.item)
-      .slice(start, end)
+    orgsSet = fuse.search(searchValue).map((result) => result.item)
   } else {
-    orgsPaginationSet = orgsData.data.slice(start, end)
+    orgsSet = orgsData.data
   }
 
+  // slice the data based on the pagination
+  const orgsPaginationSet = orgsSet.slice(start, end)
+
   return (
     <Box>
       <WelcomeHeader />
@@ -151,9 +151,7 @@ const Home = () => {
         />
         <Table.Pagination
           aria-label="pagination"
-          totalCount={
-            searchValue ? orgsPaginationSet.length : orgsData.data.length
-          }
+          totalCount={orgsSet.length}
           pageSize={pageSize}
           onChange={({ pageIndex }) => {
             setPageIndex(pageIndex)