fix(header): add count of new contribution

dataesr · Sep 30, 2024 · 6c85106 · 6c85106
1 parent 7e6255f
commit 6c85106
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 55 deletions.
diff --git a/client/src/components/last-mail/lasts-mails-sent.tsx b/client/src/components/last-mail/lasts-mails-sent.tsx
@@ -25,6 +25,7 @@ const LatestMails: React.FC<LatestMailsProps> = ({ data }) => {
       ).getTime();
       return dateB - dateA;
     });
+
   useEffect(() => {
     let interval = null;
 

diff --git a/client/src/layout/header.tsx b/client/src/layout/header.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useLocation } from "react-router-dom";
 import {
   Header as HeaderWrapper,
@@ -15,40 +15,69 @@ import {
 import ProfileModal from "../components/profil-modal";
 import LatestMails from "../components/last-mail/lasts-mails-sent";
 import ContributionData from "../api/contribution-api/getData";
-import { contactUrl } from "../config/api";
+import {
+  contactUrl,
+  contributionUrl,
+  productionUrl,
+  nameChangeUrl,
+  removeUserUrl,
+} from "../config/api";
 
 const Header: React.FC = () => {
   const [showModal, setShowModal] = useState(false);
   const [selectedProfile, setSelectedProfile] = useState<string | null>(null);
   const { pathname } = useLocation();
 
-  useEffect(() => {
-    const savedProfile = localStorage.getItem("selectedProfile");
-    if (savedProfile) {
-      setSelectedProfile(savedProfile);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (selectedProfile) {
-      localStorage.setItem("selectedProfile", selectedProfile);
-    }
-  }, [selectedProfile]);
+  const urls = [
+    {
+      url: contributionUrl,
+      name: "Contribution par objet",
+      href: "/scanr-contributionPage",
+    },
+    {
+      url: contactUrl,
+      name: "Formulaire de contact",
+      href: "/scanr-contact",
+    },
+    {
+      url: productionUrl,
+      name: "Lier des publications",
+      href: "/scanr-apioperations",
+    },
+    {
+      url: removeUserUrl,
+      name: "Supprimer des personnes de la base de données",
+      href: "/scanr-removeuser",
+    },
+    {
+      url: nameChangeUrl,
+      name: "Changer le nom d'une personne",
+      href: "/scanr-namechange",
+    },
+  ];
 
-  const url = contactUrl;
+  const contributionsData = urls.map(({ url }) => ContributionData(url));
 
-  const { data, isLoading, isError, refetch } = ContributionData(url);
-  const handleButtonClick = () => {
-    setShowModal(true);
-  };
+  const handleButtonClick = () => setShowModal(true);
 
   const handleProfileSelect = (profile: string) => {
     setSelectedProfile(profile);
     setShowModal(false);
   };
 
-  const handleCloseModal = () => {
-    setShowModal(false);
+  const handleCloseModal = () => setShowModal(false);
+
+  const countNewContributions = (data, appName) => {
+    if (!data || !data.data) return 0;
+
+    const filterByAppName = appName
+      ? (contribution) => contribution.fromApplication === appName
+      : () => true;
+
+    return data.data.filter(
+      (contribution) =>
+        filterByAppName(contribution) && contribution.status === "new"
+    ).length;
   };
 
   return (
@@ -94,49 +123,59 @@ const Header: React.FC = () => {
             current={pathname.split("/").includes("scanr")}
             title={"scanR"}
           >
-            <Link
-              current={pathname.startsWith("/scanr")}
-              href="/scanr-contributionpage"
-            >
-              Contribution par objet
-            </Link>
-            <Link current={pathname.startsWith("/scanr")} href="/scanr-contact">
-              Formulaire de contact
-            </Link>
-            <Link
-              current={pathname.startsWith("/scanr")}
-              href="/scanr-apioperations"
-            >
-              Lier des publications
-            </Link>
-            <Link
-              current={pathname.startsWith("/scanr")}
-              href="/scanr-removeuser"
-            >
-              Supprimer des personnes de la base de données
-            </Link>
-            <Link
-              current={pathname.startsWith("/scanr")}
-              href="/scanr-namechange"
-            >
-              Changer le nom d'une personne
-            </Link>
+            {urls.map(({ href, name }, index) => {
+              const { data, isLoading, isError } = contributionsData[index];
+              const appName = href === "/scanr-contact" ? "scanr" : null;
+
+              return (
+                <Link
+                  key={href}
+                  current={pathname.startsWith("/scanr")}
+                  href={href}
+                >
+                  {name}{" "}
+                  {isLoading
+                    ? "(Chargement...)"
+                    : !isError && data
+                    ? `(${countNewContributions(data, appName)})`
+                    : ""}
+                </Link>
+              );
+            })}
           </NavItem>
           <Link
             current={pathname.startsWith("/paysage")}
             href="/paysage-contact"
           >
-            Paysage
+            Paysage{" "}
+            {!contributionsData[1].isLoading &&
+            countNewContributions(contributionsData[1].data, "paysage") > 0
+              ? `(${countNewContributions(
+                  contributionsData[1].data,
+                  "paysage"
+                )})`
+              : ""}
           </Link>
           <Link
             current={pathname.startsWith("/curiexplore")}
             href="/curiexplore-contact"
           >
-            CurieXplore
+            CurieXplore{" "}
+            {!contributionsData[1].isLoading &&
+            countNewContributions(contributionsData[1].data, "curiexplore") > 0
+              ? `(${countNewContributions(
+                  contributionsData[1].data,
+                  "curiexplore"
+                )})`
+              : ""}
           </Link>
           <NavItem current={pathname.split("/").includes("bso")} title={"BSO"}>
             <Link current={pathname.startsWith("/bso")} href="/bso-contact">
-              Formulaire de contact
+              Formulaire de contact{" "}
+              {!contributionsData[1].isLoading &&
+              countNewContributions(contributionsData[1].data, "bso") > 0
+                ? `(${countNewContributions(contributionsData[1].data, "bso")})`
+                : ""}
             </Link>
             <Link current={pathname.startsWith("/bso")} href="/bso-local">
               Demandes de BSO local
@@ -146,19 +185,38 @@ const Header: React.FC = () => {
             current={pathname.startsWith("/datasupr")}
             href="/datasupr-contact"
           >
-            datasupR
+            datasupR{" "}
+            {!contributionsData[1].isLoading &&
+            countNewContributions(contributionsData[1].data, "datasupr") > 0
+              ? `(${countNewContributions(
+                  contributionsData[1].data,
+                  "datasupr"
+                )})`
+              : ""}
           </Link>
           <Link
             current={pathname.startsWith("/works-magnet")}
             href="/works-magnet-contact"
           >
-            Works magnet
+            Works magnet{" "}
+            {!contributionsData[1].isLoading &&
+            countNewContributions(contributionsData[1].data, "works-magnet") > 0
+              ? `(${countNewContributions(
+                  contributionsData[1].data,
+                  "works-magnet"
+                )})`
+              : ""}
           </Link>
         </Nav>
       </HeaderWrapper>
-      {!isLoading && !isError && data ? (
+      {!contributionsData.some(({ isLoading }) => isLoading) &&
+      !contributionsData.some(({ isError }) => isError) &&
+      contributionsData[0].data ? (
         <Col>
-          <LatestMails data={data} refetch={refetch} />
+          <LatestMails
+            data={contributionsData[0].data}
+            refetch={contributionsData[0].refetch}
+          />
         </Col>
       ) : (
         <Text>Chargement des mails...</Text>