diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index 02682a9ff..01da6caa5 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { useRouter } from 'next/router';
+import React from 'react';
import type { SelectChangeEvent } from '@mui/material';
import { Button } from '@mui/material';
@@ -59,6 +60,7 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
responseActivityId: null,
});
const { activity: responseActivity } = useActivity(responseActivityId ?? -1);
+ const router = useRouter();
const { user } = React.useContext(UserContext);
const { users } = useVillageUsers();
const userMap = React.useMemo(
@@ -69,8 +71,16 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
}, {}),
[users],
);
- const [page, setPage] = useState
(1);
+ const [page, setPage] = React.useState(1);
const [activitiesPerPage, setActivitiesPerPage] = React.useState(25);
+ const [usePagination, setUsePagination] = React.useState(withPagination);
+
+ React.useEffect(() => {
+ if (!router.isReady) {
+ return;
+ }
+ setUsePagination(!('nopagination' in router.query));
+ }, [router.isReady, router.query, withPagination]);
React.useEffect(() => {
window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -96,7 +106,9 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
onSelect,
};
- const currentPageActivities = activities.filter((activity) => !isAnthem(activity)).slice(startIdx, endIdx);
+ const currentPageActivities = usePagination
+ ? activities.filter((activity) => !isAnthem(activity)).slice(startIdx, endIdx)
+ : activities.filter((activity) => !isAnthem(activity));
return (
@@ -180,7 +192,7 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
),
)}
- {withPagination && (
+ {usePagination && (
;
actions?(id: string | number, index: number): React.ReactNode | React.ReactNodeArray;
titleContent?: string;
+ usePagination?: boolean;
}
-export const OneVillageTable = ({ 'aria-label': ariaLabel, emptyPlaceholder, admin, data, columns, actions, titleContent }: OneVillageTableProps) => {
+export const OneVillageTable = ({
+ 'aria-label': ariaLabel,
+ emptyPlaceholder,
+ admin,
+ data,
+ columns,
+ actions,
+ titleContent,
+ usePagination: usePaginationProp,
+}: OneVillageTableProps) => {
const theme = useTheme();
const color = admin ? 'white' : 'black';
const backgroundColor = admin ? theme.palette.secondary.main : primaryColorLight;
@@ -43,26 +53,47 @@ export const OneVillageTable = ({ 'aria-label': ariaLabel, emptyPlaceholder, adm
limit: 10,
sort: 'asc',
});
+
const handleChangePage = (_event: unknown, newPage: number) => {
- setTableOptions({ ...options, page: newPage + 1 });
+ setTableOptions((prevOptions) => ({ ...prevOptions, page: newPage + 1 }));
};
+
const handleChangeRowsPerPage = (event: React.ChangeEvent) => {
- setTableOptions({ ...options, page: 1, limit: parseInt(event.target.value, 10) });
+ setTableOptions((prevOptions) => ({
+ ...prevOptions,
+ page: 1,
+ limit: parseInt(event.target.value, 10),
+ }));
};
const onSortBy = (name: string) => () => {
- if (options.order === name) {
- setTableOptions({ ...options, page: 1, sort: options.sort === 'asc' ? 'desc' : 'asc' });
- } else {
- setTableOptions({ ...options, page: 1, order: name });
- }
+ setTableOptions((prevOptions) => {
+ if (prevOptions.order === name) {
+ return {
+ ...prevOptions,
+ page: 1,
+ sort: prevOptions.sort === 'asc' ? 'desc' : 'asc',
+ };
+ } else {
+ return { ...prevOptions, page: 1, order: name };
+ }
+ });
};
- const usePagination = options.page !== undefined && options.limit !== undefined;
+ const usePagination = usePaginationProp !== undefined ? usePaginationProp : options.page !== undefined && options.limit !== undefined;
const displayedData = React.useMemo(() => {
const useSort = options.sort !== undefined && options.order !== undefined;
const sortedData = useSort
- ? data.sort((a, b) => {
- return (a[options.order || 0] || 0) >= (b[options.order || 0] || 0) ? (options.sort === 'asc' ? 1 : -1) : options.sort === 'asc' ? -1 : 1;
+ ? [...data].sort((a, b) => {
+ const aValue = a[options.order || ''] || '';
+ const bValue = b[options.order || ''] || '';
+
+ if (aValue > bValue) {
+ return options.sort === 'asc' ? 1 : -1;
+ } else if (aValue < bValue) {
+ return options.sort === 'asc' ? -1 : 1;
+ } else {
+ return 0;
+ }
})
: data;
return usePagination ? paginate(sortedData, options.limit || 10, options.page || 1) : sortedData;