feat: add count on year tabs and demarche titles

MTES-MCT · Dec 17, 2024 · ce24b49 · ce24b49
1 parent 86e9b69
commit ce24b49
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/app/projets/[codeDepartement]/page.tsx b/app/projets/[codeDepartement]/page.tsx
@@ -9,6 +9,7 @@ import {
   communesParDepartements,
   nomDepartements,
   projetsParCommunesAnneesDemarches,
+  ProjetsParDemarches,
   projetsParDepartementsAnneesDemarches,
 } from "@/utils/projets";
 
@@ -48,8 +49,16 @@ export default async function ProjetsDepartement({
           role="tablist"
           aria-label="Projets par année"
         >
-          <TabButton selected={true} annee={2024} />
-          <TabButton selected={false} annee={2023} />
+          <TabButton
+            selected={true}
+            annee={2024}
+            count={countProjets(projetsParDemarches2024)}
+          />
+          <TabButton
+            selected={false}
+            annee={2023}
+            count={countProjets(projetsParDemarches2023)}
+          />
         </ul>
         <ProjetsPanel
           selected={true}
@@ -65,3 +74,14 @@ export default async function ProjetsDepartement({
     </div>
   );
 }
+
+function countProjets(projetsParDemarches: ProjetsParDemarches) {
+  if (!projetsParDemarches) {
+    return 0;
+  }
+
+  return projetsParDemarches.reduce(
+    (acc, demarchProjets) => acc + demarchProjets.projets.length,
+    0,
+  );
+}
diff --git a/app/projets/_components/CommunesFilter.tsx b/app/projets/_components/CommunesFilter.tsx
@@ -24,7 +24,7 @@ export function CommunesFilter({
   };
 
   if (!communes) {
-    return <>Aucune commune pour ce département</>;
+    return null;
   }
 
   return (

diff --git a/app/projets/_components/ProjetsPanel.tsx b/app/projets/_components/ProjetsPanel.tsx
@@ -26,7 +26,7 @@ export function ProjetsPanel({
           ))}
         </ul>
       ) : (
-        "Aucun projet"
+        <div className="p-12 text-lg">Aucun projet sur cette année</div>
       )}
     </div>
   );
@@ -36,7 +36,7 @@ function DemarcheProjets({ key, projets }: { key: string; projets: Projets }) {
   return (
     <li key={key} className="p-10 mt-0 w-full bg-gray-100">
       <h2 className="mt-0 mb-5 leading-tight text-xl text-balance font-semibold">
-        {projets.demarche_title}
+        {projets.demarche_title} ({projets.projets.length})
       </h2>
       <ul className="list-none flex flex-wrap p-0 m-0 gap-8">
         {projets.projets.map((projet: Projet, index: number) => (

diff --git a/app/projets/_components/TabButton.tsx b/app/projets/_components/TabButton.tsx
@@ -1,9 +1,11 @@
 export function TabButton({
   selected,
   annee,
+  count,
 }: {
   selected: boolean;
   annee: number;
+  count: number;
 }) {
   return (
     <li role="presentation">
@@ -15,7 +17,7 @@ export function TabButton({
         aria-selected={selected ? true : false}
         aria-controls={`tabpanel-${annee}-panel`}
       >
-        Lauréats {annee}
+        Lauréats {annee} ({count})
       </button>
     </li>
   );