From b8b5a62dcce06580786ab020f6be73ef031bca84 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Mon, 4 Mar 2024 14:55:06 +0100
Subject: [PATCH 01/14] modify: add withPagination props set to false by
 default to List component, and display navigation only if activity number >
 activity per page

---
 src/components/accueil/Accueil.tsx |  2 +-
 src/components/activities/List.tsx | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/accueil/Accueil.tsx b/src/components/accueil/Accueil.tsx
index 6bb3c5a54..64d2bc485 100644
--- a/src/components/accueil/Accueil.tsx
+++ b/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' }}>
diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index 40a55188e..c6e6a1aad 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -15,11 +15,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;
@@ -148,9 +149,11 @@ 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 && activities.length > activitiesPerPage && (
+        <Stack spacing={2} alignItems="center">
+          <Pagination count={Math.ceil(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
+        </Stack>
+      )}
     </div>
   );
 };

From 482884487799b2452249963d60c38cbb99cc62c4 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Mon, 4 Mar 2024 15:07:56 +0100
Subject: [PATCH 02/14] test: activityPerPage

---
 src/components/activities/List.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index c6e6a1aad..fd41b2918 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -44,7 +44,7 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
     setPage(value);
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
-  const activitiesPerPage = 25;
+  const activitiesPerPage = 5;
   const startIdx = (page - 1) * activitiesPerPage;
   const endIdx = startIdx + activitiesPerPage;
 

From 1b8aef2ccc9d1134a6955a0e7a99a2a051b7ad18 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Mon, 4 Mar 2024 15:26:16 +0100
Subject: [PATCH 03/14] style: hide overflow y in ActivitySelect

---
 src/components/activities/List.tsx    | 3 ++-
 src/pages/reagir-a-une-activite/1.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index fd41b2918..6b02141d0 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -40,11 +40,12 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
     [users],
   );
   const [page, setPage] = useState<number>(1);
+
   const handlePage = (_: React.ChangeEvent<unknown>, value: number) => {
     setPage(value);
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
-  const activitiesPerPage = 5;
+  const activitiesPerPage = 25;
   const startIdx = (page - 1) * activitiesPerPage;
   const endIdx = startIdx + activitiesPerPage;
 
diff --git a/src/pages/reagir-a-une-activite/1.tsx b/src/pages/reagir-a-une-activite/1.tsx
index ecb12fb25..47fe19190 100644
--- a/src/pages/reagir-a-une-activite/1.tsx
+++ b/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', overflowY: 'hidden' }}
                 label={`Réagir à ${DESC[type]}`}
                 type={type}
               />

From 0eb4c524f028e5850a890aef8d1dd01fa58b97ac Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Mon, 4 Mar 2024 15:32:28 +0100
Subject: [PATCH 04/14] change: overflowX to overflowY

---
 src/pages/reagir-a-une-activite/1.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/reagir-a-une-activite/1.tsx b/src/pages/reagir-a-une-activite/1.tsx
index 47fe19190..a8a646d13 100644
--- a/src/pages/reagir-a-une-activite/1.tsx
+++ b/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', overflowY: 'hidden' }}
+                style={{ margin: '1rem 0 0 0', overflowX: 'hidden' }}
                 label={`Réagir à ${DESC[type]}`}
                 type={type}
               />

From e3617f377216deeaa1bd4b107fd3ac35a0648689 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Mon, 4 Mar 2024 16:47:44 +0100
Subject: [PATCH 05/14] test: add activity per page selection

---
 src/components/activities/List.tsx | 32 ++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index 6b02141d0..d0a988bfd 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
-import { Button, Pagination, Stack } from '@mui/material';
+import type { SelectChangeEvent } from '@mui/material';
+import { Button, MenuItem, Pagination, Select, Stack } from '@mui/material';
 
 import { ActivityCard } from './ActivityCard';
 import { isAnthem } from 'src/activity-types/anyActivity';
@@ -40,12 +41,18 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
     [users],
   );
   const [page, setPage] = useState<number>(1);
+  const [activitiesPerPage, setActivitiesPerPage] = React.useState(25);
 
   const handlePage = (_: React.ChangeEvent<unknown>, value: number) => {
     setPage(value);
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
-  const activitiesPerPage = 25;
+
+  const handleActivitiesPerPage = (e: SelectChangeEvent<string>) => {
+    setActivitiesPerPage(parseInt(e.target.value));
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   const startIdx = (page - 1) * activitiesPerPage;
   const endIdx = startIdx + activitiesPerPage;
 
@@ -150,10 +157,23 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
           }
           return card;
         })}
-      {withPagination && activities.length > activitiesPerPage && (
-        <Stack spacing={2} alignItems="center">
-          <Pagination count={Math.ceil(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
-        </Stack>
+      {withPagination && (
+        <nav>
+          <Select
+            labelId="demo-simple-select-standard-label"
+            id="demo-simple-select-standard"
+            value={activitiesPerPage.toString()}
+            onChange={handleActivitiesPerPage}
+            label="Age"
+          >
+            <MenuItem value={5}>5</MenuItem>
+            <MenuItem value={10}>10</MenuItem>
+            <MenuItem value={25}>25</MenuItem>
+          </Select>
+          <Stack spacing={2} alignItems="center">
+            <Pagination count={Math.ceil(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
+          </Stack>
+        </nav>
       )}
     </div>
   );

From 72bbd5d685cf5cc4a0b205ca4c11a8b1f81f1fb0 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Mon, 4 Mar 2024 17:00:07 +0100
Subject: [PATCH 06/14] test: activity length condtionnal renderer

---
 src/components/activities/List.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index d0a988bfd..545839c52 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -50,7 +50,6 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
 
   const handleActivitiesPerPage = (e: SelectChangeEvent<string>) => {
     setActivitiesPerPage(parseInt(e.target.value));
-    window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   const startIdx = (page - 1) * activitiesPerPage;
@@ -161,18 +160,20 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
         <nav>
           <Select
             labelId="demo-simple-select-standard-label"
+            size="small"
             id="demo-simple-select-standard"
             value={activitiesPerPage.toString()}
             onChange={handleActivitiesPerPage}
-            label="Age"
           >
             <MenuItem value={5}>5</MenuItem>
             <MenuItem value={10}>10</MenuItem>
             <MenuItem value={25}>25</MenuItem>
           </Select>
-          <Stack spacing={2} alignItems="center">
-            <Pagination count={Math.ceil(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
-          </Stack>
+          {activities.length > activitiesPerPage && (
+            <Stack spacing={2} alignItems="center">
+              <Pagination count={Math.ceil(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
+            </Stack>
+          )}
         </nav>
       )}
     </div>

From f81a7f326c65986c25fe0aa75ec61ea1e8fed306 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Mon, 4 Mar 2024 17:06:55 +0100
Subject: [PATCH 07/14] test: change Math.ceil to Math.floor

---
 src/components/activities/List.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index 545839c52..16825d0ba 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -171,7 +171,7 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
           </Select>
           {activities.length > activitiesPerPage && (
             <Stack spacing={2} alignItems="center">
-              <Pagination count={Math.ceil(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
+              <Pagination count={Math.floor(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
             </Stack>
           )}
         </nav>

From 3a341bc4196bbc9e07af90aea3dddaae1172d0f3 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Tue, 5 Mar 2024 11:28:01 +0100
Subject: [PATCH 08/14] fix: activities per page bug

---
 src/components/activities/List.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index 16825d0ba..29508dcc8 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import type { SelectChangeEvent } from '@mui/material';
-import { Button, MenuItem, Pagination, Select, Stack } from '@mui/material';
+import { InputLabel, Button, MenuItem, Pagination, Select, Stack } from '@mui/material';
 
 import { ActivityCard } from './ActivityCard';
 import { isAnthem } from 'src/activity-types/anyActivity';
@@ -49,7 +49,9 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
   };
 
   const handleActivitiesPerPage = (e: SelectChangeEvent<string>) => {
+    setPage(1);
     setActivitiesPerPage(parseInt(e.target.value));
+    window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   const startIdx = (page - 1) * activitiesPerPage;
@@ -158,6 +160,7 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
         })}
       {withPagination && (
         <nav>
+          <InputLabel id="demo-simple-select-helper-label">Activités par page</InputLabel>
           <Select
             labelId="demo-simple-select-standard-label"
             size="small"
@@ -166,12 +169,13 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
             onChange={handleActivitiesPerPage}
           >
             <MenuItem value={5}>5</MenuItem>
+
             <MenuItem value={10}>10</MenuItem>
             <MenuItem value={25}>25</MenuItem>
           </Select>
           {activities.length > activitiesPerPage && (
             <Stack spacing={2} alignItems="center">
-              <Pagination count={Math.floor(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
+              <Pagination count={Math.ceil(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
             </Stack>
           )}
         </nav>

From c1fb8c23a8ec831554b3f18960a2e745b56a8fae Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Tue, 5 Mar 2024 11:36:25 +0100
Subject: [PATCH 09/14] fix: go to top of window when activitiesPerPage or Page
 change in navigation

---
 src/components/activities/List.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index 29508dcc8..804e47183 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -43,15 +43,17 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
   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 handleActivitiesPerPage = (e: SelectChangeEvent<string>) => {
     setPage(1);
     setActivitiesPerPage(parseInt(e.target.value));
-    window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   const startIdx = (page - 1) * activitiesPerPage;

From 1daac2b4648fd0466da41a73afca053276a6210d Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Tue, 5 Mar 2024 15:48:53 +0100
Subject: [PATCH 10/14] add pagination nav component

---
 .../PaginationNav/PaginationNav.tsx           | 36 +++++++++++++++++++
 src/components/activities/List.tsx            | 29 +++++----------
 2 files changed, 45 insertions(+), 20 deletions(-)
 create mode 100644 src/components/PaginationNav/PaginationNav.tsx

diff --git a/src/components/PaginationNav/PaginationNav.tsx b/src/components/PaginationNav/PaginationNav.tsx
new file mode 100644
index 000000000..b55c87e8f
--- /dev/null
+++ b/src/components/PaginationNav/PaginationNav.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import type { SelectChangeEvent } from '@mui/material';
+import { InputLabel, MenuItem, Pagination, Select, Stack } from '@mui/material';
+
+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 (
+    <Stack direction="row" spacing={4} alignItems="center" justifyContent="flex-start">
+      <Stack direction="row" alignItems="center" justifyContent="center" spacing={2}>
+        <InputLabel id="activities-per-page-label">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>
+      </Stack>
+      {totalItems > itemsPerPage && <Pagination count={Math.ceil(totalItems / itemsPerPage)} page={page} onChange={handlePage} variant="outlined" />}
+    </Stack>
+  );
+};
+export default PaginationNav;
diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index 804e47183..3d54c76ee 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -2,7 +2,9 @@ import React, { useState } from 'react';
 
 import type { SelectChangeEvent } from '@mui/material';
 import { InputLabel, Button, MenuItem, Pagination, Select, Stack } from '@mui/material';
+import { margin } from '@mui/system';
 
+import PaginationNav from '../PaginationNav/PaginationNav';
 import { ActivityCard } from './ActivityCard';
 import { isAnthem } from 'src/activity-types/anyActivity';
 import { UserContext } from 'src/contexts/userContext';
@@ -161,26 +163,13 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
           return card;
         })}
       {withPagination && (
-        <nav>
-          <InputLabel id="demo-simple-select-helper-label">Activités par page</InputLabel>
-          <Select
-            labelId="demo-simple-select-standard-label"
-            size="small"
-            id="demo-simple-select-standard"
-            value={activitiesPerPage.toString()}
-            onChange={handleActivitiesPerPage}
-          >
-            <MenuItem value={5}>5</MenuItem>
-
-            <MenuItem value={10}>10</MenuItem>
-            <MenuItem value={25}>25</MenuItem>
-          </Select>
-          {activities.length > activitiesPerPage && (
-            <Stack spacing={2} alignItems="center">
-              <Pagination count={Math.ceil(activities.length / activitiesPerPage)} page={page} onChange={handlePage} variant="outlined" />
-            </Stack>
-          )}
-        </nav>
+        <PaginationNav
+          page={page}
+          itemsPerPage={activitiesPerPage}
+          totalItems={activities.length}
+          handlePage={handlePage}
+          handleItemsPerPage={handleActivitiesPerPage}
+        />
       )}
     </div>
   );

From 8214a3bcdbceb23a60a0e13233a915fe8e4ea3da Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Tue, 5 Mar 2024 15:50:59 +0100
Subject: [PATCH 11/14] remove: unused import

---
 src/components/activities/List.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index 3d54c76ee..a1331c4fd 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 
 import type { SelectChangeEvent } from '@mui/material';
-import { InputLabel, Button, MenuItem, Pagination, Select, Stack } from '@mui/material';
-import { margin } from '@mui/system';
+import { Button } from '@mui/material';
 
 import PaginationNav from '../PaginationNav/PaginationNav';
 import { ActivityCard } from './ActivityCard';

From b64d9ffd2aa2ca8d1e89f5f9ffcc7644ded1471e Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Tue, 5 Mar 2024 17:24:07 +0100
Subject: [PATCH 12/14] change style

---
 src/components/PaginationNav/PaginationNav.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/PaginationNav/PaginationNav.tsx b/src/components/PaginationNav/PaginationNav.tsx
index b55c87e8f..7bddf21ec 100644
--- a/src/components/PaginationNav/PaginationNav.tsx
+++ b/src/components/PaginationNav/PaginationNav.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { SelectChangeEvent } from '@mui/material';
-import { InputLabel, MenuItem, Pagination, Select, Stack } from '@mui/material';
+import { Fade, InputLabel, MenuItem, Pagination, Select, Stack } from '@mui/material';
 
 interface PaginationNavProps {
   page: number;
@@ -13,9 +13,12 @@ interface PaginationNavProps {
 
 const PaginationNav = ({ page, itemsPerPage, totalItems, handlePage, handleItemsPerPage }: PaginationNavProps) => {
   return (
-    <Stack direction="row" spacing={4} alignItems="center" justifyContent="flex-start">
+    <Stack direction="row" spacing={6} alignItems="center" justifyContent="flex-end">
+      {totalItems > itemsPerPage && <Pagination count={Math.ceil(totalItems / itemsPerPage)} page={page} onChange={handlePage} variant="outlined" />}
       <Stack direction="row" alignItems="center" justifyContent="center" spacing={2}>
-        <InputLabel id="activities-per-page-label">Activités par page</InputLabel>
+        <InputLabel id="activities-per-page-label" sx={{ fontSize: '.9rem' }}>
+          Activités par page
+        </InputLabel>
         <Select
           labelId="activities-per-page-label"
           variant="standard"
@@ -29,7 +32,6 @@ const PaginationNav = ({ page, itemsPerPage, totalItems, handlePage, handleItems
           <MenuItem value={25}>25</MenuItem>
         </Select>
       </Stack>
-      {totalItems > itemsPerPage && <Pagination count={Math.ceil(totalItems / itemsPerPage)} page={page} onChange={handlePage} variant="outlined" />}
     </Stack>
   );
 };

From 6c8214a7719bf872fe190c3bc0512a7299dd27f9 Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Tue, 5 Mar 2024 17:25:53 +0100
Subject: [PATCH 13/14] remove unsued import

---
 src/components/PaginationNav/PaginationNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PaginationNav/PaginationNav.tsx b/src/components/PaginationNav/PaginationNav.tsx
index 7bddf21ec..45e3ef356 100644
--- a/src/components/PaginationNav/PaginationNav.tsx
+++ b/src/components/PaginationNav/PaginationNav.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { SelectChangeEvent } from '@mui/material';
-import { Fade, InputLabel, MenuItem, Pagination, Select, Stack } from '@mui/material';
+import { InputLabel, MenuItem, Pagination, Select, Stack } from '@mui/material';
 
 interface PaginationNavProps {
   page: number;

From c9f97d330124ff2a04042261043f9395db74fd8b Mon Sep 17 00:00:00 2001
From: Simon Nedjari <simon.nedjari@outlook.com>
Date: Wed, 6 Mar 2024 10:59:30 +0100
Subject: [PATCH 14/14] modify: center pagination

---
 .../PaginationNav/PaginationNav.module.css    |  7 ++++++
 .../PaginationNav/PaginationNav.tsx           | 24 +++++++++++++------
 2 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 src/components/PaginationNav/PaginationNav.module.css

diff --git a/src/components/PaginationNav/PaginationNav.module.css b/src/components/PaginationNav/PaginationNav.module.css
new file mode 100644
index 000000000..30449c9ad
--- /dev/null
+++ b/src/components/PaginationNav/PaginationNav.module.css
@@ -0,0 +1,7 @@
+.paginationContainer{
+    position: relative;
+}
+
+.itemsPerPageContainer{
+    display: inline;
+}
\ No newline at end of file
diff --git a/src/components/PaginationNav/PaginationNav.tsx b/src/components/PaginationNav/PaginationNav.tsx
index 45e3ef356..37e46e2de 100644
--- a/src/components/PaginationNav/PaginationNav.tsx
+++ b/src/components/PaginationNav/PaginationNav.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
 import type { SelectChangeEvent } from '@mui/material';
-import { InputLabel, MenuItem, Pagination, Select, Stack } from '@mui/material';
+import { InputLabel, MenuItem, Pagination, Select } from '@mui/material';
+
+import styles from './PaginationNav.module.css';
 
 interface PaginationNavProps {
   page: number;
@@ -13,10 +15,9 @@ interface PaginationNavProps {
 
 const PaginationNav = ({ page, itemsPerPage, totalItems, handlePage, handleItemsPerPage }: PaginationNavProps) => {
   return (
-    <Stack direction="row" spacing={6} alignItems="center" justifyContent="flex-end">
-      {totalItems > itemsPerPage && <Pagination count={Math.ceil(totalItems / itemsPerPage)} page={page} onChange={handlePage} variant="outlined" />}
-      <Stack direction="row" alignItems="center" justifyContent="center" spacing={2}>
-        <InputLabel id="activities-per-page-label" sx={{ fontSize: '.9rem' }}>
+    <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
@@ -31,8 +32,17 @@ const PaginationNav = ({ page, itemsPerPage, totalItems, handlePage, handleItems
           <MenuItem value={10}>10</MenuItem>
           <MenuItem value={25}>25</MenuItem>
         </Select>
-      </Stack>
-    </Stack>
+      </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;