From cbceb3d45264d6d461f7d36b6a2b768e53d44865 Mon Sep 17 00:00:00 2001 From: sutterj Date: Thu, 13 Jun 2024 14:17:54 -0400 Subject: [PATCH 1/3] fix: pagination issues - increase items per page - fix issue where body scrolled over header - fix issue with pagination count and search - due to limitations with primer table pagination, there is no way to fix the count when the last item on a table page is deleted, so when we run into this situation, reload the page --- .../[organizationId]/forks/[forkId]/page.tsx | 41 ++++++++++++------- src/app/[organizationId]/page.tsx | 19 ++++----- src/app/layout.tsx | 1 + src/app/page.tsx | 19 ++++----- 4 files changed, 43 insertions(+), 37 deletions(-) diff --git a/src/app/[organizationId]/forks/[forkId]/page.tsx b/src/app/[organizationId]/forks/[forkId]/page.tsx index 39b9e80..0816659 100644 --- a/src/app/[organizationId]/forks/[forkId]/page.tsx +++ b/src/app/[organizationId]/forks/[forkId]/page.tsx @@ -67,13 +67,18 @@ const Fork = () => { ) const [deleteMirrorName, setDeleteMirrorName] = useState(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,6 +280,11 @@ 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, @@ -282,6 +292,7 @@ const Fork = () => { deleteMirror, openDeleteErrorFlash, refetchMirrors, + numberOfMirrorsOnPage, orgData, ], ) @@ -318,7 +329,7 @@ const Fork = () => { align: 'end', }, ]} - rows={5} + rows={10} cellPadding="spacious" /> @@ -333,17 +344,16 @@ 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 } + const mirrorPaginationSet = mirrorSet.slice(start, end) + return ( @@ -517,7 +527,10 @@ const Fork = () => { { - openDeleteDialog(row.name) + openDeleteDialog( + row.name, + mirrorPaginationSet.length, + ) }} > @@ -538,9 +551,7 @@ const Fork = () => { /> { setPageIndex(pageIndex) diff --git a/src/app/[organizationId]/page.tsx b/src/app/[organizationId]/page.tsx index dad4f60..bec9001 100644 --- a/src/app/[organizationId]/page.tsx +++ b/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={10} cellPadding="spacious" /> @@ -93,16 +93,15 @@ const Organization = () => { }) // set up pagination - let forksPaginationSet = [] + 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 } + const forksPaginationSet = forksSet.slice(start, end) + return ( @@ -260,9 +259,7 @@ const Organization = () => { /> { setPageIndex(pageIndex) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 27693e0..1aa0b28 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -29,6 +29,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => { top: 0, height: 64, display: 'grid', + zIndex: 1000, }} > diff --git a/src/app/page.tsx b/src/app/page.tsx index e693de9..01eda7e 100644 --- a/src/app/page.tsx +++ b/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={10} cellPadding="spacious" /> @@ -95,16 +95,15 @@ const Home = () => { }) // set up pagination - let orgsPaginationSet: OrgsData = [] + 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 } + const orgsPaginationSet = orgsSet.slice(start, end) + return ( @@ -151,9 +150,7 @@ const Home = () => { /> { setPageIndex(pageIndex) From dd4abe069cb26e4b4af744e0d94e2e849436e340 Mon Sep 17 00:00:00 2001 From: sutterj Date: Thu, 13 Jun 2024 14:21:48 -0400 Subject: [PATCH 2/3] fix: add comments --- src/app/[organizationId]/forks/[forkId]/page.tsx | 1 + src/app/[organizationId]/page.tsx | 3 ++- src/app/page.tsx | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/[organizationId]/forks/[forkId]/page.tsx b/src/app/[organizationId]/forks/[forkId]/page.tsx index 0816659..f72478f 100644 --- a/src/app/[organizationId]/forks/[forkId]/page.tsx +++ b/src/app/[organizationId]/forks/[forkId]/page.tsx @@ -352,6 +352,7 @@ const Fork = () => { mirrorSet = mirrors } + // slice the data based on the pagination const mirrorPaginationSet = mirrorSet.slice(start, end) return ( diff --git a/src/app/[organizationId]/page.tsx b/src/app/[organizationId]/page.tsx index bec9001..f0da6c2 100644 --- a/src/app/[organizationId]/page.tsx +++ b/src/app/[organizationId]/page.tsx @@ -92,7 +92,7 @@ const Organization = () => { threshold: 0.2, }) - // set up pagination + // perform search if there is a search value let forksSet = [] if (searchValue) { forksSet = fuse.search(searchValue).map((result) => result.item) @@ -100,6 +100,7 @@ const Organization = () => { forksSet = forks } + // slice the data based on the pagination const forksPaginationSet = forksSet.slice(start, end) return ( diff --git a/src/app/page.tsx b/src/app/page.tsx index 01eda7e..2a56ed4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -94,7 +94,7 @@ const Home = () => { threshold: 0.2, }) - // set up pagination + // perform search if there is a search value let orgsSet: OrgsData = [] if (searchValue) { orgsSet = fuse.search(searchValue).map((result) => result.item) @@ -102,6 +102,7 @@ const Home = () => { orgsSet = orgsData.data } + // slice the data based on the pagination const orgsPaginationSet = orgsSet.slice(start, end) return ( From 28608ceb274594206750997160c26ce70903b8a4 Mon Sep 17 00:00:00 2001 From: Jacob Sutter Date: Thu, 13 Jun 2024 14:32:37 -0400 Subject: [PATCH 3/3] fix: use pagesize for loading table rows count Co-authored-by: Zack Koppert --- src/app/[organizationId]/forks/[forkId]/page.tsx | 2 +- src/app/[organizationId]/page.tsx | 2 +- src/app/page.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/[organizationId]/forks/[forkId]/page.tsx b/src/app/[organizationId]/forks/[forkId]/page.tsx index f72478f..e50fb90 100644 --- a/src/app/[organizationId]/forks/[forkId]/page.tsx +++ b/src/app/[organizationId]/forks/[forkId]/page.tsx @@ -329,7 +329,7 @@ const Fork = () => { align: 'end', }, ]} - rows={10} + rows={pageSize} cellPadding="spacious" /> diff --git a/src/app/[organizationId]/page.tsx b/src/app/[organizationId]/page.tsx index f0da6c2..d5e9eac 100644 --- a/src/app/[organizationId]/page.tsx +++ b/src/app/[organizationId]/page.tsx @@ -75,7 +75,7 @@ const Organization = () => { width: 'auto', }, ]} - rows={10} + rows={pageSize} cellPadding="spacious" /> diff --git a/src/app/page.tsx b/src/app/page.tsx index 2a56ed4..efff29a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -41,7 +41,7 @@ const Home = () => { rowHeader: true, }, ]} - rows={10} + rows={pageSize} cellPadding="spacious" />