feat(VIL-620): adding no pagination in url parameter to activities

parlemonde · Nov 12, 2024 · c32303f · c32303f
1 parent 086e7b7
commit c32303f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 16 deletions.
diff --git a/src/components/accueil/Accueil.tsx b/src/components/accueil/Accueil.tsx
@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import { Button } from '@mui/material';
@@ -23,6 +24,13 @@ export const Accueil = () => {
   const { village, selectedPhase, setSelectedPhase } = React.useContext(VillageContext);
   const { user } = React.useContext(UserContext);
   const isMediator = user && user.type <= UserType.MEDIATOR;
+  const router = useRouter();
+  const [withPagination, setWithPagination] = React.useState(true);
+
+  React.useEffect(() => {
+    if (!router.isReady) return;
+    setWithPagination(!('nopagination' in router.query));
+  }, [router.isReady, router.query]);
 
   //TODO: redo conditions and switchs
   const filterCountries = React.useMemo(() => {
@@ -106,7 +114,7 @@ export const Accueil = () => {
           </KeepRatio>
           <h1 style={{ marginTop: '1rem' }}>Dernières activités</h1>
           <Filters countries={filterCountries} filters={filters} onChange={setFilters} phase={selectedPhase} />
-          <Activities activities={activitiesFiltered} withLinks withPagination />
+          <Activities activities={activitiesFiltered} withLinks withPagination={withPagination} />
         </>
       ) : (
         <div style={{ display: 'flex', flexDirection: 'column', padding: '0 1rem', alignItems: 'center' }}>

diff --git 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<number>(1);
+  const [page, setPage] = React.useState<number>(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 (
     <div>
@@ -180,7 +192,7 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
           <Card key={index} activity={activity} index={index} {...cardProps} />
         ),
       )}
-      {withPagination && (
+      {usePagination && (
         <PaginationNav
           page={page}
           itemsPerPage={activitiesPerPage}

diff --git a/src/components/admin/OneVillageTable.tsx b/src/components/admin/OneVillageTable.tsx
@@ -32,9 +32,19 @@ interface OneVillageTableProps {
   columns: Array<{ key: string; label: string; sortable?: boolean }>;
   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<HTMLInputElement>) => {
-    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;