fix: pagination on commune page

components/editable-list.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useMemo} from 'react'
+import React, {useState, useMemo, useEffect} from 'react'
 import Pagination from 'react-js-pagination'
 
 type EditableListProps<T> = {
@@ -32,6 +32,7 @@ export const EditableList = <T extends unknown>({
   actions,
 }: EditableListProps<T>) => {
   const [filterInput, setFilterInput] = useState('')
+  const pageinationRef = React.createRef<HTMLDivElement>()
 
   const filteredData = useMemo(() => {
     if (!filterInput || !filter?.property) {
@@ -41,6 +42,19 @@ export const EditableList = <T extends unknown>({
     return data.filter(item => item[filter.property].toLowerCase().includes(filterInput.toLowerCase()))
   }, [data, filterInput, filter])
 
+  useEffect(() => {
+    if (pageinationRef.current) {
+      const paginationLinks = pageinationRef.current.querySelectorAll('.fr-pagination__link')
+      paginationLinks.forEach((link: HTMLAnchorElement, index) => {
+        if (index - 1 === page?.current) {
+          link.setAttribute('aria-current', 'page')
+        } else {
+          link.removeAttribute('aria-current')
+        }
+      })
+    }
+  }, [pageinationRef, page])
+
   return (
     <div className='fr-container fr-py-12v'>
       {filter?.property && (
@@ -73,7 +87,7 @@ export const EditableList = <T extends unknown>({
         ) : <p>Aucun résultat</p>}
         {(page !== undefined && filteredData.length > 0) && (
           <div className='pagination fr-mx-auto fr-my-2w'>
-            <nav role='navigation' className='fr-pagination' aria-label='Pagination'>
+            <nav ref={pageinationRef} role='navigation' className='fr-pagination' aria-label='Pagination'>
               <Pagination
                 activePage={page.current}
                 itemsCountPerPage={page.limit}

pages/communes/[code].tsx

@@ -30,19 +30,19 @@ const CommuneSource = (
   const [balToDeleted, setBalToDeleted] = useState(null)
 
   const [pageApiDepot, setPageApiDepot] = useState({
-    limit: 5,
-    count: initialRevisionsApiDepot.length,
+    limit: 10,
+    count: 0,
     current: 1,
   })
 
   const [pageMoissonneur, setPageMoissonneur] = useState({
-    limit: 5,
-    count: initialRevisionsMoissonneur.length,
+    limit: 10,
+    count: 0,
     current: 1,
   })
 
   const [pageMesAdresses, setPageMesAdresses] = useState({
-    limit: 5,
+    limit: 10,
     count: balsPage.count,
     current: 1,
   })
@@ -59,25 +59,30 @@ const CommuneSource = (
     setPageApiDepot(pageApiDepot => ({...pageApiDepot, current: newPage}))
   }
 
-  const fetchBals = async (commune: string) => {
+  const fetchBals = useCallback(async (commune: string) => {
     const res = await searchBasesLocales({commune, page: pageMesAdresses.current, limit: pageMesAdresses.limit})
     setBals(res.results)
-  }
+  }, [pageMesAdresses])
 
   useEffect(() => {
     const fetchData = async () => {
-      const initialRevisionsApiDepot = await getAllRevisionByCommune(code)
-      const initialRevisionsMoissonneur = await getRevisionsByCommune(code)
-      setInitialRevisionsApiDepot(initialRevisionsApiDepot)
-      setInitialRevisionsMoissonneur(initialRevisionsMoissonneur)
+      const initialRevisionsApiDepot: RevisionApiDepotType[] = await getAllRevisionByCommune(code)
+      const initialRevisionsMoissonneur: RevisionMoissoneurType[] = await getRevisionsByCommune(code)
+
+      // Show the last revisions first
+      setInitialRevisionsApiDepot(initialRevisionsApiDepot.reverse())
+      setPageApiDepot(pageApiDepot => ({...pageApiDepot, count: initialRevisionsApiDepot.length}))
+
+      setInitialRevisionsMoissonneur(initialRevisionsMoissonneur.reverse())
+      setPageMoissonneur(pageMoissonneur => ({...pageMoissonneur, count: initialRevisionsMoissonneur.length}))
     }
 
     fetchData().catch(console.error)
   }, [code])
 
   useEffect(() => {
     fetchBals(code).catch(console.error)
-  }, [pageMesAdresses, code])
+  }, [pageMesAdresses, code, fetchBals])
 
   const revisionsApiDepot = useMemo(() => {
     const start = (pageApiDepot.current - 1) * pageApiDepot.limit