diff --git a/frontend/src/pages/UpcomingPage.tsx b/frontend/src/pages/UpcomingPage.tsx
index 960cdb12..495d9822 100644
--- a/frontend/src/pages/UpcomingPage.tsx
+++ b/frontend/src/pages/UpcomingPage.tsx
@@ -393,7 +393,8 @@ const UpcomingPage = (): React.ReactElement => {
nodes: TABLE_LIBRARY_TYPES.TableNode[] | undefined;
}>();
- const rowsPerPage = 10;
+ const ROWS_PER_PAGE_UPCOMING = 3;
+ const ROWS_PER_PAGE_COMPLETED = 10;
const [
getUpcomingMealRequests,
@@ -455,7 +456,7 @@ const UpcomingPage = (): React.ReactElement => {
variables: {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
donorId: authenticatedUser!.id,
- limit: 3,
+ limit: ROWS_PER_PAGE_UPCOMING,
offset,
sortByDateDirection,
minDropOffDate: formattedTime,
@@ -472,8 +473,8 @@ const UpcomingPage = (): React.ReactElement => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
donorId: authenticatedUser!.id,
sortByDateDirection,
- limit: rowsPerPage,
- offset: (currentPage - 1) * rowsPerPage,
+ limit: ROWS_PER_PAGE_COMPLETED,
+ offset: (currentPage - 1) * ROWS_PER_PAGE_COMPLETED,
status: [MealStatus.UPCOMING, MealStatus.FULFILLED],
maxDropOffDate: yesterday.toISOString().split("T")[0],
},
@@ -514,7 +515,7 @@ const UpcomingPage = (): React.ReactElement => {
if (shouldReload) {
reloadCompletedMealRequests();
reloadUpcomingMealRequests();
- setShouldReload(false)
+ setShouldReload(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [shouldReload]);
@@ -628,23 +629,28 @@ const UpcomingPage = (): React.ReactElement => {
leftIcon={}
colorScheme="black"
variant="ghost"
+ disabled={offset === 0}
onClick={() => {
if (offset > 0) {
- setOffset(offset - 3);
+ setOffset(offset - ROWS_PER_PAGE_UPCOMING);
}
}}
/>
- {offset / 3 + 1}
+ {offset / ROWS_PER_PAGE_UPCOMING + 1}
}
colorScheme="black"
variant="ghost"
+ disabled={
+ upcomingMealRequests &&
+ upcomingMealRequests.length < ROWS_PER_PAGE_UPCOMING
+ }
onClick={() => {
if (
upcomingMealRequests &&
- upcomingMealRequests.length >= offset
+ upcomingMealRequests.length === ROWS_PER_PAGE_UPCOMING // If we have a full page of results
) {
- setOffset(offset + 3);
+ setOffset(offset + ROWS_PER_PAGE_UPCOMING);
}
}}
/>