Skip to content

Commit af005af

Browse files
pan93412pan93412
authored
Merge pull request #17 from database-playground/pan93412/dbp-48-pagination-of-events-is-not-working
DBP-48: Table pagination is not working
2 parents 04f144c + 719cd91 commit af005af

7 files changed

Lines changed: 74 additions & 70 deletions

File tree

‎app/(admin)/(activity-management)/events/_components/data-table.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ import { EVENTS_TABLE_QUERY } from "./query";
99

1010
export function EventsDataTable() {
1111
const PAGE_SIZE = 10;
12-
const [after, setAfter] = useState<string | null>(null);
13-
const [before, setBefore] = useState<string | null>(null);
14-
const [direction, setDirection] = useState<Direction>("backward");
12+
const [cursors, setCursors] = useState<(string | null)[]>([null]);
13+
const [currentIndex, setCurrentIndex] = useState(0);
1514

16-
const variables = direction === "backward"
17-
? { first: PAGE_SIZE, after, last: undefined, before: undefined }
18-
: { last: PAGE_SIZE, before, first: undefined, after: undefined };
15+
const after = cursors[currentIndex];
16+
const variables = { first: PAGE_SIZE, after };
1917

2018
const { data } = useSuspenseQuery(EVENTS_TABLE_QUERY, {
2119
variables,
@@ -42,13 +40,15 @@ export function EventsDataTable() {
4240
const handlePageChange = (direction: Direction) => {
4341
if (!pageInfo) return;
4442
if (direction === "forward" && pageInfo.hasNextPage) {
45-
setAfter(pageInfo.endCursor ?? null);
46-
setBefore(null);
47-
setDirection("forward");
48-
} else if (direction === "backward" && pageInfo.hasPreviousPage) {
49-
setBefore(pageInfo.startCursor ?? null);
50-
setAfter(null);
51-
setDirection("backward");
43+
const nextCursor = pageInfo.endCursor ?? null;
44+
setCursors(prev => {
45+
const newCursors = prev.slice(0, currentIndex + 1);
46+
newCursors.push(nextCursor);
47+
return newCursors;
48+
});
49+
setCurrentIndex(currentIndex + 1);
50+
} else if (direction === "backward" && currentIndex > 0) {
51+
setCurrentIndex(currentIndex - 1);
5252
}
5353
};
5454

@@ -58,7 +58,7 @@ export function EventsDataTable() {
5858
data={eventList}
5959
totalCount={data?.events.totalCount ?? 0}
6060
hasNextPage={!!pageInfo?.hasNextPage}
61-
hasPreviousPage={!!pageInfo?.hasPreviousPage}
61+
hasPreviousPage={currentIndex > 0}
6262
onPageChange={handlePageChange}
6363
/>
6464
);

‎app/(admin)/(activity-management)/points/_components/data-table.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ import { POINTS_TABLE_QUERY } from "./query";
99

1010
export function PointsDataTable() {
1111
const PAGE_SIZE = 10;
12-
const [after, setAfter] = useState<string | null>(null);
13-
const [before, setBefore] = useState<string | null>(null);
14-
const [direction, setDirection] = useState<Direction>("backward");
12+
const [cursors, setCursors] = useState<(string | null)[]>([null]);
13+
const [currentIndex, setCurrentIndex] = useState(0);
1514

16-
const variables = direction === "backward"
17-
? { first: PAGE_SIZE, after, last: undefined, before: undefined }
18-
: { last: PAGE_SIZE, before, first: undefined, after: undefined };
15+
const after = cursors[currentIndex];
16+
const variables = { first: PAGE_SIZE, after };
1917

2018
const { data } = useSuspenseQuery(POINTS_TABLE_QUERY, {
2119
variables,
@@ -43,13 +41,15 @@ export function PointsDataTable() {
4341
const handlePageChange = (direction: Direction) => {
4442
if (!pageInfo) return;
4543
if (direction === "forward" && pageInfo.hasNextPage) {
46-
setAfter(pageInfo.endCursor ?? null);
47-
setBefore(null);
48-
setDirection("forward");
49-
} else if (direction === "backward" && pageInfo.hasPreviousPage) {
50-
setBefore(pageInfo.startCursor ?? null);
51-
setAfter(null);
52-
setDirection("backward");
44+
const nextCursor = pageInfo.endCursor ?? null;
45+
setCursors(prev => {
46+
const newCursors = prev.slice(0, currentIndex + 1);
47+
newCursors.push(nextCursor);
48+
return newCursors;
49+
});
50+
setCurrentIndex(currentIndex + 1);
51+
} else if (direction === "backward" && currentIndex > 0) {
52+
setCurrentIndex(currentIndex - 1);
5353
}
5454
};
5555

@@ -59,7 +59,7 @@ export function PointsDataTable() {
5959
data={pointsList}
6060
totalCount={data?.points.totalCount ?? 0}
6161
hasNextPage={!!pageInfo?.hasNextPage}
62-
hasPreviousPage={!!pageInfo?.hasPreviousPage}
62+
hasPreviousPage={currentIndex > 0}
6363
onPageChange={handlePageChange}
6464
/>
6565
);

‎app/(admin)/(activity-management)/submissions/_components/data-table.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ import { SUBMISSIONS_TABLE_QUERY } from "./query";
99

1010
export function SubmissionsDataTable() {
1111
const PAGE_SIZE = 10;
12-
const [after, setAfter] = useState<string | null>(null);
13-
const [before, setBefore] = useState<string | null>(null);
14-
const [direction, setDirection] = useState<Direction>("backward");
12+
const [cursors, setCursors] = useState<(string | null)[]>([null]);
13+
const [currentIndex, setCurrentIndex] = useState(0);
1514

16-
const variables = direction === "backward"
17-
? { first: PAGE_SIZE, after, last: undefined, before: undefined }
18-
: { last: PAGE_SIZE, before, first: undefined, after: undefined };
15+
const after = cursors[currentIndex];
16+
const variables = { first: PAGE_SIZE, after };
1917

2018
const { data } = useSuspenseQuery(SUBMISSIONS_TABLE_QUERY, {
2119
variables,
@@ -46,13 +44,15 @@ export function SubmissionsDataTable() {
4644
const handlePageChange = (direction: Direction) => {
4745
if (!pageInfo) return;
4846
if (direction === "forward" && pageInfo.hasNextPage) {
49-
setAfter(pageInfo.endCursor ?? null);
50-
setBefore(null);
51-
setDirection("forward");
52-
} else if (direction === "backward" && pageInfo.hasPreviousPage) {
53-
setBefore(pageInfo.startCursor ?? null);
54-
setAfter(null);
55-
setDirection("backward");
47+
const nextCursor = pageInfo.endCursor ?? null;
48+
setCursors(prev => {
49+
const newCursors = prev.slice(0, currentIndex + 1);
50+
newCursors.push(nextCursor);
51+
return newCursors;
52+
});
53+
setCurrentIndex(currentIndex + 1);
54+
} else if (direction === "backward" && currentIndex > 0) {
55+
setCurrentIndex(currentIndex - 1);
5656
}
5757
};
5858

@@ -62,7 +62,7 @@ export function SubmissionsDataTable() {
6262
data={submissionList}
6363
totalCount={data?.submissions.totalCount ?? 0}
6464
hasNextPage={!!pageInfo?.hasNextPage}
65-
hasPreviousPage={!!pageInfo?.hasPreviousPage}
65+
hasPreviousPage={currentIndex > 0}
6666
onPageChange={handlePageChange}
6767
/>
6868
);

‎app/(admin)/(question-management)/questions/_components/data-table.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ import { QUESTIONS_TABLE_QUERY } from "./query";
99

1010
export function QuestionsDataTable() {
1111
const PAGE_SIZE = 5;
12-
const [after, setAfter] = useState<string | null>(null);
13-
const [before, setBefore] = useState<string | null>(null);
14-
const [direction, setDirection] = useState<Direction>("backward");
12+
const [cursors, setCursors] = useState<(string | null)[]>([null]);
13+
const [currentIndex, setCurrentIndex] = useState(0);
1514

16-
const variables = direction === "backward"
17-
? { first: PAGE_SIZE, after, last: undefined, before: undefined }
18-
: { last: PAGE_SIZE, before, first: undefined, after: undefined };
15+
const after = cursors[currentIndex];
16+
const variables = { first: PAGE_SIZE, after };
1917

2018
const { data } = useSuspenseQuery(QUESTIONS_TABLE_QUERY, {
2119
variables,
@@ -42,13 +40,15 @@ export function QuestionsDataTable() {
4240
const handlePageChange = (direction: Direction) => {
4341
if (!pageInfo) return;
4442
if (direction === "forward" && pageInfo.hasNextPage) {
45-
setAfter(pageInfo.endCursor ?? null);
46-
setBefore(null);
47-
setDirection("forward");
48-
} else if (direction === "backward" && pageInfo.hasPreviousPage) {
49-
setBefore(pageInfo.startCursor ?? null);
50-
setAfter(null);
51-
setDirection("backward");
43+
const nextCursor = pageInfo.endCursor ?? null;
44+
setCursors(prev => {
45+
const newCursors = prev.slice(0, currentIndex + 1);
46+
newCursors.push(nextCursor);
47+
return newCursors;
48+
});
49+
setCurrentIndex(currentIndex + 1);
50+
} else if (direction === "backward" && currentIndex > 0) {
51+
setCurrentIndex(currentIndex - 1);
5252
}
5353
};
5454

@@ -58,7 +58,7 @@ export function QuestionsDataTable() {
5858
data={questionList}
5959
totalCount={data?.questions.totalCount ?? 0}
6060
hasNextPage={!!pageInfo?.hasNextPage}
61-
hasPreviousPage={!!pageInfo?.hasPreviousPage}
61+
hasPreviousPage={currentIndex > 0}
6262
onPageChange={handlePageChange}
6363
/>
6464
);

‎app/(admin)/(user-management)/users/_components/data-table.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ import { USERS_TABLE_QUERY } from "./query";
99

1010
export function UsersDataTable() {
1111
const PAGE_SIZE = 5;
12-
const [after, setAfter] = useState<string | null>(null);
13-
const [before, setBefore] = useState<string | null>(null);
14-
const [direction, setDirection] = useState<Direction>("backward");
12+
const [cursors, setCursors] = useState<(string | null)[]>([null]);
13+
const [currentIndex, setCurrentIndex] = useState(0);
1514

16-
const variables = direction === "backward"
17-
? { first: PAGE_SIZE, after, last: undefined, before: undefined }
18-
: { last: PAGE_SIZE, before, first: undefined, after: undefined };
15+
const after = cursors[currentIndex];
16+
const variables = { first: PAGE_SIZE, after };
1917

2018
const { data } = useSuspenseQuery(USERS_TABLE_QUERY, {
2119
variables,
@@ -45,13 +43,15 @@ export function UsersDataTable() {
4543
const handlePageChange = (direction: Direction) => {
4644
if (!pageInfo) return;
4745
if (direction === "forward" && pageInfo.hasNextPage) {
48-
setAfter(pageInfo.endCursor ?? null);
49-
setBefore(null);
50-
setDirection("forward");
51-
} else if (direction === "backward" && pageInfo.hasPreviousPage) {
52-
setBefore(pageInfo.startCursor ?? null);
53-
setAfter(null);
54-
setDirection("backward");
46+
const nextCursor = pageInfo.endCursor ?? null;
47+
setCursors(prev => {
48+
const newCursors = prev.slice(0, currentIndex + 1);
49+
newCursors.push(nextCursor);
50+
return newCursors;
51+
});
52+
setCurrentIndex(currentIndex + 1);
53+
} else if (direction === "backward" && currentIndex > 0) {
54+
setCurrentIndex(currentIndex - 1);
5555
}
5656
};
5757

@@ -61,7 +61,7 @@ export function UsersDataTable() {
6161
data={userList}
6262
totalCount={data?.users.totalCount ?? 0}
6363
hasNextPage={!!pageInfo?.hasNextPage}
64-
hasPreviousPage={!!pageInfo?.hasPreviousPage}
64+
hasPreviousPage={currentIndex > 0}
6565
onPageChange={handlePageChange}
6666
/>
6767
);

‎components/data-table/cursor.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export function CursorDataTable<TData, TValue>({
2020
hasPreviousPage,
2121
onPageChange,
2222
}: CursorDataTableProps<TData, TValue>) {
23+
"use no memo";
24+
2325
const table = useReactTable({
2426
data,
2527
columns,

‎components/data-table/table.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export interface DataTableProps<TData, TValue> {
88
}
99

1010
export function DataTableMain<TData, TValue>({ table, columns }: DataTableProps<TData, TValue>) {
11+
"use no memo";
12+
1113
return (
1214
<div className="rounded-md border">
1315
<Table>

0 commit comments

Comments
 (0)