feat(trends): better pagination

dataesr · Jan 17, 2025 · 8950b0e · 8950b0e
1 parent 761b22d
commit 8950b0e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/client/src/pages/trends/components/panel/index.tsx b/client/src/pages/trends/components/panel/index.tsx
@@ -26,14 +26,17 @@ function TrendsViewItems() {
     }
   }, [inView, fetchNextPage])
 
+  const navigateToPage = (page: number) => {
+    handlePageChange(page)
+    window.scrollTo(0, scrollYTop)
+  }
+
   if (isFetching && !isFetchingNextPage) return <BaseSkeleton height="500px" />
   if (!trends?.pages || error) return <div>no data</div>
 
   const shouldChangePage = trends.pageParams.length >= scrollPerPage
   const totalPages = Math.ceil((trends?.pages?.[0]?.total || 0) / (itemsPerScroll * scrollPerPage))
 
-  console.log(totalPages)
-
   return (
     <>
       <div className="fr-accordions-group">
@@ -44,36 +47,43 @@ function TrendsViewItems() {
       {!isFetchingNextPage && shouldChangePage && (
         <Container fluid className="fr-mt-2w">
           <ButtonGroup isInlineFrom="xs" align="center">
-            <Button variant="tertiary" onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
+            <Button
+              variant="tertiary"
+              icon="arrow-left-s-line"
+              iconPosition="left"
+              onClick={() => navigateToPage(currentPage - 1)}
+              disabled={currentPage === 1}
+            >
               {intl.formatMessage({ id: "trends.views.page-previous" })}
             </Button>
             {currentPage > 1 && (
-              <Button variant="tertiary" onClick={() => handlePageChange(1)}>
+              <Button variant="tertiary" onClick={() => navigateToPage(1)}>
                 {1}
               </Button>
             )}
+            {currentPage > 3 && <Button variant="tertiary">{"..."}</Button>}
             {currentPage > 2 && (
-              <Button variant="tertiary" onClick={() => handlePageChange(currentPage - 1)}>
+              <Button variant="tertiary" onClick={() => navigateToPage(currentPage - 1)}>
                 {currentPage - 1}
               </Button>
             )}
             <Button variant="secondary">{currentPage}</Button>
             {currentPage < totalPages - 1 && (
-              <Button variant="tertiary" onClick={() => handlePageChange(currentPage + 1)}>
+              <Button variant="tertiary" onClick={() => navigateToPage(currentPage + 1)}>
                 {currentPage + 1}
               </Button>
             )}
+            {currentPage < totalPages - 2 && <Button variant="tertiary">{"..."}</Button>}
             {currentPage < totalPages && (
-              <Button variant="tertiary" onClick={() => handlePageChange(totalPages)}>
+              <Button variant="tertiary" onClick={() => navigateToPage(totalPages)}>
                 {totalPages}
               </Button>
             )}
             <Button
               variant="tertiary"
-              onClick={() => {
-                handlePageChange(currentPage + 1)
-                window.scrollTo(0, scrollYTop)
-              }}
+              icon="arrow-right-s-line"
+              iconPosition="right"
+              onClick={() => navigateToPage(currentPage + 1)}
               disabled={!hasNextPage}
             >
               {intl.formatMessage({ id: "trends.views.page-next" })}

diff --git a/client/src/pages/trends/locales/en.json b/client/src/pages/trends/locales/en.json
@@ -33,8 +33,8 @@
   "trends.views.header.count": "Volume ({max})",
   "trends.views.header.diff": "Variation (1 year)",
   "trends.views.header.trend": "Trend ({count} years)",
-  "trends.views.page-next": "Next page",
-  "trends.views.page-previous": "Previous page",
+  "trends.views.page-next": "Next",
+  "trends.views.page-previous": "Back",
   "trends.line-chart.xAxis.accessibility.description": "Years from {min, number} to {max, number}",
   "trends.line-chart.yAxis.accessibility.description": "Number of {source}",
   "trends.line-chart.yAxis.title.text": "Number of {source}",

diff --git a/client/src/pages/trends/locales/fr.json b/client/src/pages/trends/locales/fr.json
@@ -39,8 +39,8 @@
   "trends.views.header.count": "Volume ({max})",
   "trends.views.header.diff": "Variation (1 an)",
   "trends.views.header.trend": "Tendance ({count} ans)",
-  "trends.views.page-next": "Page suivante",
-  "trends.views.page-previous": "Page précédente",
+  "trends.views.page-next": "Suivante",
+  "trends.views.page-previous": "Précédent",
   "trends.line-chart.xAxis.accessibility.description": "Années de {min, number} à {max, number}",
   "trends.line-chart.yAxis.accessibility.description": "Nombre de {source}",
   "trends.line-chart.yAxis.title.text": "Nombre de {source}",