Corrige une régression d'affichage sur le composant Pagination

incubateur-ademe · Jan 10, 2025 · 980fcdc · 980fcdc
1 parent f8a635d
commit 980fcdc
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 33 deletions.
diff --git a/....react/src/app/pages/collectivite/Indicateurs/lists/indicateurs-list/indicateurs-list.tsx b/....react/src/app/pages/collectivite/Indicateurs/lists/indicateurs-list/indicateurs-list.tsx
@@ -257,15 +257,14 @@ const IndicateursListe = ({
               />
             ))}
           </div>
-          <div className="flex mt-16">
-            <Pagination
-              className="mx-auto"
-              selectedPage={currentPage}
-              nbOfElements={countTotal}
-              maxElementsPerPage={maxNbOfCards}
-              onChange={(page) => setCurrentPage(page)}
-            />
-          </div>
+          <Pagination
+            className="mx-auto mt-16"
+            selectedPage={currentPage}
+            nbOfElements={countTotal}
+            maxElementsPerPage={maxNbOfCards}
+            idToScrollTo="app-header"
+            onChange={setCurrentPage}
+          />
         </div>
       )}
     </>

diff --git a/...itions.react/src/app/pages/collectivite/PlansActions/PlanAction/list/PlansActionListe.tsx b/...itions.react/src/app/pages/collectivite/PlansActions/PlanAction/list/PlansActionListe.tsx
@@ -188,15 +188,14 @@ const PlansActionListe = ({
               />
             ))}
           </div>
-          <div className="flex mt-16">
-            <Pagination
-              className="mx-auto"
-              selectedPage={currentPage}
-              nbOfElements={data?.count ?? 0}
-              maxElementsPerPage={maxNbOfCards}
-              onChange={(page) => setCurrentPage(page)}
-            />
-          </div>
+          <Pagination
+            className="mx-auto mt-16"
+            selectedPage={currentPage}
+            nbOfElements={data?.count ?? 0}
+            maxElementsPerPage={maxNbOfCards}
+            idToScrollTo="app-header"
+            onChange={setCurrentPage}
+          />
         </div>
       )}
     </>

diff --git a/...react/src/app/pages/collectivite/PlansActions/ToutesLesFichesAction/FichesActionListe.tsx b/...react/src/app/pages/collectivite/PlansActions/ToutesLesFichesAction/FichesActionListe.tsx
@@ -353,15 +353,14 @@ const FichesActionListe = ({
                   />
                 ))}
               </div>
-              <div className="flex mt-16">
-                <Pagination
-                  className="mx-auto"
-                  selectedPage={currentPage}
-                  nbOfElements={countTotal}
-                  maxElementsPerPage={maxNbOfCards}
-                  onChange={(page) => setCurrentPage(page)}
-                />
-              </div>
+              <Pagination
+                className="mx-auto mt-16"
+                selectedPage={currentPage}
+                nbOfElements={countTotal}
+                maxElementsPerPage={maxNbOfCards}
+                idToScrollTo="app-header"
+                onChange={setCurrentPage}
+              />
             </div>
           )}
 

diff --git a/packages/site/app/programme/annuaire/page.tsx b/packages/site/app/programme/annuaire/page.tsx
@@ -60,7 +60,7 @@ const Annuaire = () => {
         nbOfElements={total}
         maxElementsPerPage={PAGINATION_LIMIT}
         idToScrollTo="annuaire-header"
-        onChange={(selectedPage) => setSelectPage(selectedPage)}
+        onChange={setSelectPage}
       />
     </Section>
   );

diff --git a/packages/ui/src/design-system/Pagination/Pagination.tsx b/packages/ui/src/design-system/Pagination/Pagination.tsx
@@ -33,7 +33,7 @@ export const Pagination = ({
   const [nbOfPages, setNbOfPages] = useState(
     Math.ceil(nbOfElements / maxElementsPerPage)
   );
-  const [pageButtons, setPageButtons] = useState<number[]>([]);
+  const [pageButtons, setPageButtons] = useState<(number | undefined)[]>([]);
   const [currentPage, setCurrentPage] = useState(selectedPage);
   const [windowWidth, setWindowWidth] = useState<number>(0);
   const [isMobile, setIsMobile] = useState(false);
@@ -100,7 +100,7 @@ export const Pagination = ({
             key={i}
             pageNumber={pageNum}
             isSelected={currentPage === pageNum}
-            onClick={() => handleChangePage(pageNum)}
+            onClick={() => !!pageNum && handleChangePage(pageNum)}
           />
         ))}
       </div>

diff --git a/packages/ui/src/design-system/Pagination/utils.ts b/packages/ui/src/design-system/Pagination/utils.ts
@@ -70,14 +70,15 @@ export const calculatePaginationArray = ({
       : undefined;
 
   // Construction du tableau final
-  const finalArray = [...leftRange];
-  if (!displayAllPages && leftIntersection !== undefined) {
+  const finalArray: (number | undefined)[] = [...leftRange];
+
+  if (!displayAllPages) {
     finalArray.push(leftIntersection);
   }
 
   finalArray.push(...middleRange);
 
-  if (isMiddlePage && !displayAllPages && rightIntersection !== undefined) {
+  if (isMiddlePage && !displayAllPages) {
     finalArray.push(rightIntersection);
   }