Merge pull request #887 from parlemonde/fix_pagination_bug

Fix pagination bug

src/components/PaginationNav/PaginationNav.module.css

@@ -0,0 +1,7 @@
+.paginationContainer{
+    position: relative;
+}
+
+.itemsPerPageContainer{
+    display: inline;
+}

src/components/PaginationNav/PaginationNav.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import type { SelectChangeEvent } from '@mui/material';
+import { InputLabel, MenuItem, Pagination, Select } from '@mui/material';
+
+import styles from './PaginationNav.module.css';
+
+interface PaginationNavProps {
+  page: number;
+  itemsPerPage: number;
+  totalItems: number;
+  handlePage: (_: React.ChangeEvent<unknown>, value: number) => void;
+  handleItemsPerPage: (e: SelectChangeEvent<string>) => void;
+}
+
+const PaginationNav = ({ page, itemsPerPage, totalItems, handlePage, handleItemsPerPage }: PaginationNavProps) => {
+  return (
+    <div className={styles.paginationContainer}>
+      <div className={styles.itemsPerPageContainer}>
+        <InputLabel id="activities-per-page-label" sx={{ fontSize: '.9rem', marginRight: '18px', display: 'inline' }}>
+          Activités par page
+        </InputLabel>
+        <Select
+          labelId="activities-per-page-label"
+          variant="standard"
+          size="small"
+          id="demo-simple-select-standard"
+          value={itemsPerPage.toString()}
+          onChange={handleItemsPerPage}
+        >
+          <MenuItem value={5}>5</MenuItem>
+          <MenuItem value={10}>10</MenuItem>
+          <MenuItem value={25}>25</MenuItem>
+        </Select>
+      </div>
+      {totalItems > itemsPerPage && (
+        <Pagination
+          count={Math.ceil(totalItems / itemsPerPage)}
+          page={page}
+          onChange={handlePage}
+          variant="outlined"
+          sx={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', bottom: '0' }}
+        />
+      )}
+    </div>
+  );
+};
+export default PaginationNav;

src/components/accueil/Accueil.tsx

@@ -97,7 +97,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 />
+          <Activities activities={activitiesFiltered} withLinks withPagination />
         </>
       ) : (
         <div style={{ display: 'flex', flexDirection: 'column', padding: '0 1rem', alignItems: 'center' }}>

src/components/activities/List.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 
-import { Button, Pagination, Stack } from '@mui/material';
+import type { SelectChangeEvent } from '@mui/material';
+import { Button } from '@mui/material';
 
+import PaginationNav from '../PaginationNav/PaginationNav';
 import { ActivityCard } from './ActivityCard';
 import { isAnthem } from 'src/activity-types/anyActivity';
 import { UserContext } from 'src/contexts/userContext';
@@ -15,11 +17,12 @@ import type { Activity } from 'types/activity.type';
 interface ActivitiesProps {
   activities: Activity[];
   withLinks?: boolean;
+  withPagination?: boolean;
   noButtons?: boolean;
   onSelect?: (index: number) => void;
 }
 
-export const Activities = ({ activities, noButtons = false, withLinks = false, onSelect }: ActivitiesProps) => {
+export const Activities = ({ activities, noButtons = false, withLinks = false, withPagination = false, onSelect }: ActivitiesProps) => {
   const [{ selectedActivityId, responseActivityId }, setResponseActivityId] = React.useState<{
     selectedActivityId: number | null;
     responseActivityId?: number | null;
@@ -39,11 +42,21 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, o
     [users],
   );
   const [page, setPage] = useState<number>(1);
+  const [activitiesPerPage, setActivitiesPerPage] = React.useState(25);
+
+  React.useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [page, activitiesPerPage]);
+
   const handlePage = (_: React.ChangeEvent<unknown>, value: number) => {
     setPage(value);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
   };
-  const activitiesPerPage = 25;
+
+  const handleActivitiesPerPage = (e: SelectChangeEvent<string>) => {
+    setPage(1);
+    setActivitiesPerPage(parseInt(e.target.value));
+  };
+
   const startIdx = (page - 1) * activitiesPerPage;
   const endIdx = startIdx + activitiesPerPage;
 
@@ -148,9 +161,15 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, o
           }
           return card;
         })}
-      <Stack spacing={2} alignItems="center">
-        <Pagination count={Math.ceil(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
-      </Stack>
+      {withPagination && (
+        <PaginationNav
+          page={page}
+          itemsPerPage={activitiesPerPage}
+          totalItems={activities.length}
+          handlePage={handlePage}
+          handleItemsPerPage={handleActivitiesPerPage}
+        />
+      )}
     </div>
   );
 };

src/pages/reagir-a-une-activite/1.tsx

@@ -87,7 +87,7 @@ const ReactionStep1 = () => {
                 value={selectedActivity.type === type ? selectedActivity.id : null}
                 onChange={onChange}
                 onSelect={onNext}
-                style={{ margin: '1rem 0 0 0' }}
+                style={{ margin: '1rem 0 0 0', overflowX: 'hidden' }}
                 label={`Réagir à ${DESC[type]}`}
                 type={type}
               />