From ce24b49f227c0693b1eecaebb968b54ed30851e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Soulas?= <soulascedric@gmail.com>
Date: Tue, 17 Dec 2024 20:22:55 +0100
Subject: [PATCH] feat: add count on year tabs and demarche titles

---
 app/projets/[codeDepartement]/page.tsx     | 24 ++++++++++++++++++++--
 app/projets/_components/CommunesFilter.tsx |  2 +-
 app/projets/_components/ProjetsPanel.tsx   |  4 ++--
 app/projets/_components/TabButton.tsx      |  4 +++-
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/app/projets/[codeDepartement]/page.tsx b/app/projets/[codeDepartement]/page.tsx
index b81afb2..11e3a2d 100644
--- 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
index 25f6af8..7f8f932 100644
--- 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
index 5439583..96a0352 100644
--- 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
index dd0b15e..0e66b48 100644
--- 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>
   );