Skip to content

Commit 6e512db

Browse files
ErwanDecosterErwanDecoster
committed
feat: implement usePageParam hook for consistent pagination state management and url page preservation
1 parent 78547c2 commit 6e512db

File tree

16 files changed

+137
-90
lines changed

16 files changed

+137
-90
lines changed

‎src/hooks/usePageParam.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { useSearch, useNavigate } from '@tanstack/react-router';
2+
3+
export function usePageParam(paramName: string, defaultValue = 1) {
4+
const search = useSearch({ strict: false });
5+
const navigate = useNavigate();
6+
7+
const page = Number(search?.[paramName]) || defaultValue;
8+
9+
const setPage = (newPage: number) => {
10+
if (newPage !== page) {
11+
navigate({
12+
search: (prev) => ({
13+
...prev,
14+
[paramName]: newPage,
15+
}),
16+
replace: true,
17+
resetScroll: false,
18+
});
19+
}
20+
};
21+
22+
return [page, setPage] as const;
23+
}

‎src/modules/addresses/address/apps/AddressAppsTable.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { LoaderCircle } from 'lucide-react';
5-
import { useState } from 'react';
65
import { DataTable } from '@/components/DataTable';
76
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
7+
import { usePageParam } from '@/hooks/usePageParam';
88
import { ErrorAlert } from '@/modules/ErrorAlert';
99
import { columns } from '@/modules/apps/appsTable/columns';
1010
import useUserStore from '@/stores/useUser.store';
@@ -67,15 +67,15 @@ export function AddressAppsTable({
6767
}: {
6868
addressAddress: string;
6969
}) {
70-
const [currentPage, setCurrentPage] = useState(0);
70+
const [currentPage, setCurrentPage] = usePageParam('addressAppsPage');
7171
const {
7272
data: apps,
7373
isError,
7474
isLoading,
7575
isRefetching,
7676
additionalPages,
7777
hasPastError,
78-
} = useAddressAppsData({ addressAddress, currentPage });
78+
} = useAddressAppsData({ addressAddress, currentPage: currentPage - 1 });
7979

8080
const filteredColumns = columns.filter(
8181
(col) => col.accessorKey !== 'owner.address'
@@ -104,9 +104,9 @@ export function AddressAppsTable({
104104
/>
105105
)}
106106
<PaginatedNavigation
107-
currentPage={currentPage + 1}
108-
totalPages={currentPage + 1 + additionalPages}
109-
onPageChange={(newPage) => setCurrentPage(newPage - 1)}
107+
currentPage={currentPage}
108+
totalPages={currentPage + additionalPages}
109+
onPageChange={setCurrentPage}
110110
/>
111111
</div>
112112
);

‎src/modules/addresses/address/datasets/AddressDatasetsTable.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { LoaderCircle } from 'lucide-react';
5-
import { useState } from 'react';
65
import { DataTable } from '@/components/DataTable';
76
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
7+
import { usePageParam } from '@/hooks/usePageParam';
88
import { ErrorAlert } from '@/modules/ErrorAlert';
99
import { columns } from '@/modules/datasets/datasetsTable/columns';
1010
import useUserStore from '@/stores/useUser.store';
@@ -73,15 +73,15 @@ export function AddressDatasetsTable({
7373
}: {
7474
addressAddress: string;
7575
}) {
76-
const [currentPage, setCurrentPage] = useState(0);
76+
const [currentPage, setCurrentPage] = usePageParam('addressDatasetsPage');
7777
const {
7878
data: datasets,
7979
isError,
8080
isLoading,
8181
isRefetching,
8282
additionalPages,
8383
hasPastError,
84-
} = useAddressDatasetsData({ addressAddress, currentPage });
84+
} = useAddressDatasetsData({ addressAddress, currentPage: currentPage - 1 });
8585

8686
const filteredColumns = columns.filter(
8787
(col) => col.accessorKey !== 'owner.address'
@@ -110,9 +110,9 @@ export function AddressDatasetsTable({
110110
/>
111111
)}
112112
<PaginatedNavigation
113-
currentPage={currentPage + 1}
114-
totalPages={currentPage + 1 + additionalPages}
115-
onPageChange={(newPage) => setCurrentPage(newPage - 1)}
113+
currentPage={currentPage}
114+
totalPages={currentPage + additionalPages}
115+
onPageChange={setCurrentPage}
116116
/>
117117
</div>
118118
);

‎src/modules/addresses/address/requests/beneficiaryDeals/AddressBeneficiaryDealsTable.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { LoaderCircle } from 'lucide-react';
5-
import { useState } from 'react';
65
import { DataTable } from '@/components/DataTable';
76
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
7+
import { usePageParam } from '@/hooks/usePageParam';
88
import { ErrorAlert } from '@/modules/ErrorAlert';
99
import { columns } from '@/modules/deals/dealsTable/columns';
1010
import useUserStore from '@/stores/useUser.store';
@@ -75,15 +75,20 @@ export function AddressBeneficiaryDealsTable({
7575
}: {
7676
addressAddress: string;
7777
}) {
78-
const [currentPage, setCurrentPage] = useState(0);
78+
const [currentPage, setCurrentPage] = usePageParam(
79+
'addressBeneficiaryDealsPage'
80+
);
7981
const {
8082
data: beneficiaryDeals,
8183
isError,
8284
isLoading,
8385
isRefetching,
8486
additionalPages,
8587
hasPastError,
86-
} = useAddressBeneficiaryDealsData({ addressAddress, currentPage });
88+
} = useAddressBeneficiaryDealsData({
89+
addressAddress,
90+
currentPage: currentPage - 1,
91+
});
8792

8893
return (
8994
<div className="space-y-6">
@@ -108,9 +113,9 @@ export function AddressBeneficiaryDealsTable({
108113
/>
109114
)}
110115
<PaginatedNavigation
111-
currentPage={currentPage + 1}
112-
totalPages={currentPage + 1 + additionalPages}
113-
onPageChange={(newPage) => setCurrentPage(newPage - 1)}
116+
currentPage={currentPage}
117+
totalPages={currentPage + additionalPages}
118+
onPageChange={setCurrentPage}
114119
/>
115120
</div>
116121
);

‎src/modules/addresses/address/requests/requestedDeals/AddressRequestedDealsTable.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { LoaderCircle } from 'lucide-react';
5-
import { useState } from 'react';
65
import { DataTable } from '@/components/DataTable';
76
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
7+
import { usePageParam } from '@/hooks/usePageParam';
88
import { ErrorAlert } from '@/modules/ErrorAlert';
99
import { columns } from '@/modules/deals/dealsTable/columns';
1010
import useUserStore from '@/stores/useUser.store';
@@ -74,15 +74,20 @@ export function AddressRequestedDealsTable({
7474
}: {
7575
addressAddress: string;
7676
}) {
77-
const [currentPage, setCurrentPage] = useState(0);
77+
const [currentPage, setCurrentPage] = usePageParam(
78+
'addressRequestedDealsPage'
79+
);
7880
const {
7981
data: requestedDeals,
8082
isError,
8183
isLoading,
8284
isRefetching,
8385
additionalPages,
8486
hasPastError,
85-
} = useAddressRequestedDealsData({ addressAddress, currentPage });
87+
} = useAddressRequestedDealsData({
88+
addressAddress,
89+
currentPage: currentPage - 1,
90+
});
8691

8792
return (
8893
<div className="space-y-6">
@@ -107,9 +112,9 @@ export function AddressRequestedDealsTable({
107112
/>
108113
)}
109114
<PaginatedNavigation
110-
currentPage={currentPage + 1}
111-
totalPages={currentPage + 1 + additionalPages}
112-
onPageChange={(newPage) => setCurrentPage(newPage - 1)}
115+
currentPage={currentPage}
116+
totalPages={currentPage + additionalPages}
117+
onPageChange={setCurrentPage}
113118
/>
114119
</div>
115120
);

‎src/modules/addresses/address/requests/requestedTasks/AddressRequestedTasksTable.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { LoaderCircle } from 'lucide-react';
5-
import { useState } from 'react';
65
import { DataTable } from '@/components/DataTable';
76
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
7+
import { usePageParam } from '@/hooks/usePageParam';
88
import { ErrorAlert } from '@/modules/ErrorAlert';
99
import { columns } from '@/modules/tasks/tasksTable/columns';
1010
import useUserStore from '@/stores/useUser.store';
@@ -74,15 +74,20 @@ export function AddressRequestedTasksTable({
7474
}: {
7575
addressAddress: string;
7676
}) {
77-
const [currentPage, setCurrentPage] = useState(0);
77+
const [currentPage, setCurrentPage] = usePageParam(
78+
'addressRequestedTasksPage'
79+
);
7880
const {
7981
data: requestedTasks,
8082
isError,
8183
isLoading,
8284
isRefetching,
8385
additionalPages,
8486
hasPastError,
85-
} = useAddressRequestedTasksData({ addressAddress, currentPage });
87+
} = useAddressRequestedTasksData({
88+
addressAddress,
89+
currentPage: currentPage - 1,
90+
});
8691

8792
return (
8893
<div className="space-y-6">
@@ -107,9 +112,9 @@ export function AddressRequestedTasksTable({
107112
/>
108113
)}
109114
<PaginatedNavigation
110-
currentPage={currentPage + 1}
111-
totalPages={currentPage + 1 + additionalPages}
112-
onPageChange={(newPage) => setCurrentPage(newPage - 1)}
115+
currentPage={currentPage}
116+
totalPages={currentPage + additionalPages}
117+
onPageChange={setCurrentPage}
113118
/>
114119
</div>
115120
);

‎src/modules/addresses/address/workerpools/AddressWorkerpoolsTable.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { LoaderCircle } from 'lucide-react';
5-
import { useState } from 'react';
65
import { DataTable } from '@/components/DataTable';
76
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
7+
import { usePageParam } from '@/hooks/usePageParam';
88
import { ErrorAlert } from '@/modules/ErrorAlert';
99
import { columns } from '@/modules/workerpools/workerpoolsTable/columns';
1010
import useUserStore from '@/stores/useUser.store';
@@ -74,15 +74,18 @@ export function AddressWorkerpoolsTable({
7474
}: {
7575
addressAddress: string;
7676
}) {
77-
const [currentPage, setCurrentPage] = useState(0);
77+
const [currentPage, setCurrentPage] = usePageParam('addressWorkerpoolsPage');
7878
const {
7979
data: workerpools,
8080
isError,
8181
isLoading,
8282
isRefetching,
8383
additionalPages,
8484
hasPastError,
85-
} = useAddressWorkerpoolsData({ addressAddress, currentPage });
85+
} = useAddressWorkerpoolsData({
86+
addressAddress,
87+
currentPage: currentPage - 1,
88+
});
8689

8790
const filteredColumns = columns.filter(
8891
(col) => col.accessorKey !== 'owner.address'
@@ -111,9 +114,9 @@ export function AddressWorkerpoolsTable({
111114
/>
112115
)}
113116
<PaginatedNavigation
114-
currentPage={currentPage + 1}
115-
totalPages={currentPage + 1 + additionalPages}
116-
onPageChange={(newPage) => setCurrentPage(newPage - 1)}
117+
currentPage={currentPage}
118+
totalPages={currentPage + additionalPages}
119+
onPageChange={setCurrentPage}
117120
/>
118121
</div>
119122
);

‎src/modules/addresses/address/workers/beneficiaryDeals/addressContributionTable.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { LoaderCircle } from 'lucide-react';
5-
import { useState } from 'react';
65
import { DataTable } from '@/components/DataTable';
76
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
7+
import { usePageParam } from '@/hooks/usePageParam';
88
import { ErrorAlert } from '@/modules/ErrorAlert';
99
import useUserStore from '@/stores/useUser.store';
1010
import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
@@ -74,15 +74,18 @@ export function AddressContributionTable({
7474
}: {
7575
addressAddress: string;
7676
}) {
77-
const [currentPage, setCurrentPage] = useState(0);
77+
const [currentPage, setCurrentPage] = usePageParam('addressContributionPage');
7878
const {
7979
data: contribution,
8080
isError,
8181
isLoading,
8282
isRefetching,
8383
additionalPages,
8484
hasPastError,
85-
} = useAddressContributionData({ addressAddress, currentPage });
85+
} = useAddressContributionData({
86+
addressAddress,
87+
currentPage: currentPage - 1,
88+
});
8689
console.log('AddressContributionTable', contribution);
8790

8891
return (
@@ -108,9 +111,9 @@ export function AddressContributionTable({
108111
/>
109112
)}
110113
<PaginatedNavigation
111-
currentPage={currentPage + 1}
112-
totalPages={currentPage + 1 + additionalPages}
113-
onPageChange={(newPage) => setCurrentPage(newPage - 1)}
114+
currentPage={currentPage}
115+
totalPages={currentPage + additionalPages}
116+
onPageChange={setCurrentPage}
114117
/>
115118
</div>
116119
);

‎src/modules/apps/app/AppDealsTable.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { DETAIL_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { LoaderCircle } from 'lucide-react';
5-
import { useState } from 'react';
65
import { DataTable } from '@/components/DataTable';
76
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
7+
import { usePageParam } from '@/hooks/usePageParam';
88
import { ErrorAlert } from '@/modules/ErrorAlert';
99
import { columns } from '@/modules/deals/dealsTable/columns';
1010
import useUserStore from '@/stores/useUser.store';
@@ -59,15 +59,15 @@ function useAppDealsData({
5959
}
6060

6161
export function AppDealsTable({ appAddress }: { appAddress: string }) {
62-
const [currentPage, setCurrentPage] = useState(0);
62+
const [currentPage, setCurrentPage] = usePageParam('appDealsPage');
6363
const {
6464
data: deals,
6565
isError,
6666
isLoading,
6767
isRefetching,
6868
additionalPages,
6969
hasPastError,
70-
} = useAppDealsData({ appAddress, currentPage });
70+
} = useAppDealsData({ appAddress, currentPage: currentPage - 1 });
7171

7272
const filteredColumns = columns.filter((col) => col.accessorKey !== 'app');
7373

@@ -94,9 +94,9 @@ export function AppDealsTable({ appAddress }: { appAddress: string }) {
9494
/>
9595
)}
9696
<PaginatedNavigation
97-
currentPage={currentPage + 1}
98-
totalPages={currentPage + 1 + additionalPages}
99-
onPageChange={(newPage) => setCurrentPage(newPage - 1)}
97+
currentPage={currentPage}
98+
totalPages={currentPage + additionalPages}
99+
onPageChange={setCurrentPage}
100100
/>
101101
</div>
102102
);

0 commit comments

Comments
 (0)