Skip to content

Commit

Permalink
Merge pull request #177 from github-community-projects/sutterj/pagina…
Browse files Browse the repository at this point in the history
…tion-count

fix: pagination issues
  • Loading branch information
sutterj authored Jun 18, 2024
2 parents ccd5f1f + 28608ce commit b152466
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 39 deletions.
42 changes: 27 additions & 15 deletions src/app/[organizationId]/forks/[forkId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
],
)
Expand Down Expand Up @@ -318,7 +329,7 @@ const Fork = () => {
align: 'end',
},
]}
rows={5}
rows={pageSize}
cellPadding="spacious"
/>
<Table.Pagination aria-label="pagination" totalCount={0} />
Expand All @@ -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} />
Expand Down Expand Up @@ -517,7 +528,10 @@ const Fork = () => {
<ActionList.Item
variant="danger"
onSelect={() => {
openDeleteDialog(row.name)
openDeleteDialog(
row.name,
mirrorPaginationSet.length,
)
}}
>
<Stack align="center" direction="horizontal">
Expand All @@ -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)
Expand Down
22 changes: 10 additions & 12 deletions src/app/[organizationId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -75,7 +75,7 @@ const Organization = () => {
width: 'auto',
},
]}
rows={5}
rows={pageSize}
cellPadding="spacious"
/>
<Table.Pagination aria-label="pagination" totalCount={0} />
Expand All @@ -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} />
Expand Down Expand Up @@ -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)
Expand Down
1 change: 1 addition & 0 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
top: 0,
height: 64,
display: 'grid',
zIndex: 1000,
}}
>
<MainHeader />
Expand Down
22 changes: 10 additions & 12 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -41,7 +41,7 @@ const Home = () => {
rowHeader: true,
},
]}
rows={5}
rows={pageSize}
cellPadding="spacious"
/>
<Table.Pagination aria-label="pagination" totalCount={0} />
Expand Down Expand Up @@ -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 />
Expand Down Expand Up @@ -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)
Expand Down

0 comments on commit b152466

Please sign in to comment.