From 9dc0221d8236c6f471dbd54d276a62bf4f3c57f9 Mon Sep 17 00:00:00 2001
From: Mihoub <debache.mihoub@gmail.com>
Date: Tue, 4 Jun 2024 11:52:13 +0200
Subject: [PATCH] feat(fetch): change for useQuery, add segmentedControl

---
 package-lock.json                             |  10 ++
 package.json                                  |   1 +
 src/api/contribution-api/getData.tsx          |  13 +--
 .../useGetObjectContributeData.tsx            |  29 -----
 src/api/send-mail/index.tsx                   |  15 +--
 src/api/utils/buildURL.tsx                    |   6 +-
 src/components/edit-modal/index.tsx           |  43 ++++----
 src/components/graphs/by-domains.tsx          |  54 +++++-----
 .../graphs/by-missing-productions.tsx         |  16 +--
 src/components/graphs/by-status.tsx           |  54 +++++-----
 src/components/graphs/by-tags.tsx             |  54 +++++-----
 src/components/graphs/by-types.tsx            |  17 ++-
 src/components/graphs/comment-by-team.tsx     |  57 +++++-----
 .../graphs/contribution-by-type.tsx           |  22 ++--
 .../graphs/contributions-by-name.tsx          |  54 +++++-----
 .../graphs/contributions-by-year.tsx          |  55 +++++-----
 src/components/graphs/response-by-admin.tsx   |  56 +++++-----
 src/components/graphs/treatment-by-admin.tsx  |  58 +++++-----
 src/config/api.ts                             |  21 ++--
 src/pages/api-operation-page/index.tsx        |  11 +-
 src/pages/contribution-page/index.tsx         |  11 +-
 src/pages/home/index.tsx                      | 100 +++++++++++++++---
 22 files changed, 412 insertions(+), 345 deletions(-)
 delete mode 100644 src/api/contribution-api/useGetObjectContributeData.tsx

diff --git a/package-lock.json b/package-lock.json
index d0b62bf..5f47b6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "react-query": "^3.39.3",
         "react-router-dom": "^6.11.1",
         "react-select": "^5.8.0",
+        "react-spinners": "^0.13.8",
         "react-toastify": "^10.0.5",
         "sib-api-v3-sdk": "^8.5.0"
       },
@@ -5862,6 +5863,15 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-stately": {
       "version": "3.30.1",
       "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.30.1.tgz",
diff --git a/package.json b/package.json
index 60dd687..991edea 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "react-query": "^3.39.3",
     "react-router-dom": "^6.11.1",
     "react-select": "^5.8.0",
+    "react-spinners": "^0.13.8",
     "react-toastify": "^10.0.5",
     "sib-api-v3-sdk": "^8.5.0"
   },
diff --git a/src/api/contribution-api/getData.tsx b/src/api/contribution-api/getData.tsx
index 9760270..6816f0a 100644
--- a/src/api/contribution-api/getData.tsx
+++ b/src/api/contribution-api/getData.tsx
@@ -1,17 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { postHeaders } from "../../config/api";
-import { buildURL } from "../utils/buildURL";
 
-const ContributionData = ({
-  location,
-  sort,
-  status,
-  query,
-  page,
-  searchInMessage,
-}) => {
+const ContributionData = (url: string) => {
   const fetchContributions = async () => {
-    const url = buildURL(location, sort, status, query, page, searchInMessage);
     const response = await fetch(url, {
       headers: postHeaders,
     });
@@ -22,7 +13,7 @@ const ContributionData = ({
   };
 
   const { data, isLoading, isError, refetch } = useQuery(
-    [location, sort, status, query, page, searchInMessage],
+    [url],
     fetchContributions
   );
 
diff --git a/src/api/contribution-api/useGetObjectContributeData.tsx b/src/api/contribution-api/useGetObjectContributeData.tsx
deleted file mode 100644
index 92c6e5a..0000000
--- a/src/api/contribution-api/useGetObjectContributeData.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useState, useEffect } from "react";
-import { postHeaders } from "../../config/api";
-
-function useGetContributionData(URL: unknown, reload: unknown) {
-  const [data, setData] = useState({});
-  const [isLoading, setLoading] = useState(true);
-  const [isError, setError] = useState(false);
-  useEffect(() => {
-    async function getData() {
-      const url = URL as RequestInfo;
-      try {
-        const response = await fetch(url, {
-          headers: postHeaders,
-        });
-        const res = await response.json();
-        setData(res);
-        setLoading(false);
-      } catch (error) {
-        setError(true);
-        setLoading(false);
-      }
-    }
-    getData();
-  }, [URL, reload]);
-
-  return { data, isLoading, isError };
-}
-
-export default useGetContributionData;
diff --git a/src/api/send-mail/index.tsx b/src/api/send-mail/index.tsx
index 9c75440..4a61d09 100644
--- a/src/api/send-mail/index.tsx
+++ b/src/api/send-mail/index.tsx
@@ -13,7 +13,14 @@ function EmailSender({
 }) {
   const [, setEmailSent] = useState(false);
   const [userResponse, setUserResponse] = useState("");
+  const isDevelopment = import.meta.env.VITE_HEADER_TAG === "Development";
   let basePath = "contact";
+  const brevoUrl = isDevelopment
+    ? "https://api.brevo.com/v3/smtp/email"
+    : "/email/";
+  const scanRUrl = isDevelopment
+    ? `https://scanr-api.dataesr.ovh/${basePath}/${contribution._id}`
+    : `/api/${basePath}/${contribution._id}`;
 
   if (window.location.pathname.includes("contributionpage")) {
     basePath = "contribute";
@@ -51,8 +58,7 @@ function EmailSender({
   <p>${userResponse}</p>
 `,
     };
-    const responseBrevo = await fetch("/email/", {
-      // const responseBrevo = await fetch("https://api.brevo.com/v3/smtp/email", {
+    const responseBrevo = await fetch(brevoUrl, {
       method: "POST",
       headers: {
         "api-key": import.meta.env.VITE_BREVO_API_AUTHORIZATION,
@@ -70,10 +76,7 @@ function EmailSender({
       responseFrom: selectedProfile,
     };
 
-    const responseScanR = await fetch(`/api/${basePath}/${contribution._id}`, {
-      // const responseScanR = await fetch(
-      //   `https://scanr-api.dataesr.ovh/${basePath}/${contribution._id}`,
-      //   {
+    const responseScanR = await fetch(scanRUrl, {
       method: "PATCH",
       headers: postHeaders,
       body: JSON.stringify(dataForScanR),
diff --git a/src/api/utils/buildURL.tsx b/src/api/utils/buildURL.tsx
index 1b65271..18e418b 100644
--- a/src/api/utils/buildURL.tsx
+++ b/src/api/utils/buildURL.tsx
@@ -6,6 +6,9 @@ export const buildURL = (
   page: number,
   searchInMessages: boolean = false
 ): string => {
+  const isDevelopment = import.meta.env.VITE_HEADER_TAG === "Development";
+  const baseApiUrl = isDevelopment ? "https://scanr-api.dataesr.ovh" : "/api";
+
   let baseUrl = "contact";
 
   if (location?.pathname?.includes("contributionpage")) {
@@ -29,6 +32,5 @@ export const buildURL = (
   const whereQuery =
     Object.keys(where).length > 0 ? `&where=${JSON.stringify(where)}` : "";
 
-  return `/api/${baseUrl}?${sorted}&page=${page}&max_results=20${whereQuery}`;
-  // return `https://scanr-api.dataesr.ovh/${baseUrl}?${sorted}&page=${page}&max_results=20${whereQuery}`;
+  return `${baseApiUrl}/${baseUrl}?${sorted}&page=${page}&max_results=20${whereQuery}`;
 };
diff --git a/src/components/edit-modal/index.tsx b/src/components/edit-modal/index.tsx
index 292f3f7..0ad3552 100644
--- a/src/components/edit-modal/index.tsx
+++ b/src/components/edit-modal/index.tsx
@@ -27,6 +27,18 @@ const EditModal: React.FC<EditModalProps> = ({
   refetch,
 }) => {
   const user = sessionStorage.getItem("selectedProfile");
+  let basePath = "contact";
+
+  if (window.location.pathname.includes("contributionpage")) {
+    basePath = "contribute";
+  } else if (window.location.pathname.includes("apioperations")) {
+    basePath = "contribute_productions";
+  }
+  const isDevelopment = import.meta.env.VITE_HEADER_TAG === "Development";
+  const url = isDevelopment
+    ? `${window.location.origin}/api/${basePath}/${data._id}`
+    : `https://your-production-url/api/${basePath}/${data._id}`;
+
   const [inputs, setInputs] = useState<Inputs>({
     team: [user],
     status: "treated",
@@ -68,29 +80,18 @@ const EditModal: React.FC<EditModalProps> = ({
     setInputs((prevInputs) => ({ ...prevInputs, idRef: newIdref }));
   };
 
-  let basePath = "contact";
-
-  if (window.location.pathname.includes("contributionpage")) {
-    basePath = "contribute";
-  } else if (window.location.pathname.includes("apioperations")) {
-    basePath = "contribute_productions";
-  }
   const handleSubmit = async () => {
     try {
-      const response = await fetch(
-        // `https://scanr-api.dataesr.ovh/${basePath}/${data._id}`,
-        `${window.location.origin}/api/${basePath}/${data._id}`,
-        {
-          method: "PATCH",
-          headers: postHeaders,
-          body: JSON.stringify({
-            status: inputs.status,
-            tag: inputs.tag,
-            idref: inputs.idRef,
-            comment: inputs.comment,
-          }),
-        }
-      );
+      const response = await fetch(url, {
+        method: "PATCH",
+        headers: postHeaders,
+        body: JSON.stringify({
+          status: inputs.status,
+          tag: inputs.tag,
+          idref: inputs.idRef,
+          comment: inputs.comment,
+        }),
+      });
       if (!response.ok) {
         console.log("Erreur de réponse", response);
       } else {
diff --git a/src/components/graphs/by-domains.tsx b/src/components/graphs/by-domains.tsx
index 1b5fe2d..840cc9b 100644
--- a/src/components/graphs/by-domains.tsx
+++ b/src/components/graphs/by-domains.tsx
@@ -1,18 +1,22 @@
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-import { contactUrl, contributionUrl } from "../../config/api";
-import { Button, Col } from "@dataesr/dsfr-plus";
-import { useState } from "react";
+import { Col, SegmentedControl, SegmentedElement } from "@dataesr/dsfr-plus";
 import { ContributionDataType } from "../../types";
+import { ClipLoader } from "react-spinners";
 
-const ContributionsGraphByDomains = () => {
-  const [filter, setFilter] = useState("contributions");
-  const url = filter === "object" ? contributionUrl : contactUrl;
-  const { data, isLoading, isError } = useGetContributionData(url, 0);
-  const contributions = (data as { data: [] })?.data;
+const ContributionsGraphByDomains = ({
+  contributions,
+  isLoading,
+  isError,
+  filter,
+  setFilter,
+}) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
@@ -64,23 +68,23 @@ const ContributionsGraphByDomains = () => {
 
   return (
     <>
-      <Col className="fr-mb-3w">
-        <Button
-          className="fr-mr-1w"
-          size="sm"
-          variant={filter === "object" ? "primary" : "secondary"}
+      <SegmentedControl name={""} className="fr-mb-5w">
+        <SegmentedElement
           onClick={() => setFilter("object")}
-        >
-          Par objet
-        </Button>
-        <Button
-          size="sm"
-          variant={filter === "contact" ? "primary" : "secondary"}
+          name="Par Objet"
+          label={"Par Objet"}
+          value={""}
+          icon="fr-fi-eye-line"
+          checked={filter === "object"}
+        />
+        <SegmentedElement
           onClick={() => setFilter("contact")}
-        >
-          Via formulaire contact
-        </Button>
-      </Col>
+          name="Par Objet"
+          label={"Via formulaire contact"}
+          value={""}
+          checked={filter === "contact"}
+        />
+      </SegmentedControl>
       <HighchartsReact highcharts={Highcharts} options={options} />
     </>
   );
diff --git a/src/components/graphs/by-missing-productions.tsx b/src/components/graphs/by-missing-productions.tsx
index f249085..a60b98a 100644
--- a/src/components/graphs/by-missing-productions.tsx
+++ b/src/components/graphs/by-missing-productions.tsx
@@ -1,15 +1,15 @@
+import { Col } from "@dataesr/dsfr-plus";
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-import { Contribute_Production } from "../../types";
-import { productionUrl } from "../../config/api";
-
-const ContributionsGraphByStatus = () => {
-  const { data, isLoading, isError } = useGetContributionData(productionUrl, 0);
-  const contributions = (data as { data: Contribute_Production[] })?.data;
+import { ClipLoader } from "react-spinners";
 
+const ContributionsGraphByStatus = ({ contributions, isLoading, isError }) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
diff --git a/src/components/graphs/by-status.tsx b/src/components/graphs/by-status.tsx
index ae6b2dd..cdb7e68 100644
--- a/src/components/graphs/by-status.tsx
+++ b/src/components/graphs/by-status.tsx
@@ -1,18 +1,22 @@
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-import { contactUrl, contributionUrl } from "../../config/api";
-import { Button, Col } from "@dataesr/dsfr-plus";
-import { useState } from "react";
+import { Col, SegmentedControl, SegmentedElement } from "@dataesr/dsfr-plus";
 import { ContributionDataType } from "../../types";
+import { ClipLoader } from "react-spinners";
 
-const ContributionsGraphByStatus = () => {
-  const [filter, setFilter] = useState("contributions");
-  const url = filter === "object" ? contributionUrl : contactUrl;
-  const { data, isLoading, isError } = useGetContributionData(url, 0);
-  const contributions = (data as { data: [] })?.data;
+const ContributionsGraphByStatus = ({
+  contributions,
+  isLoading,
+  isError,
+  filter,
+  setFilter,
+}) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
@@ -66,23 +70,23 @@ const ContributionsGraphByStatus = () => {
 
   return (
     <>
-      <Col className="fr-mb-3w">
-        <Button
-          className="fr-mr-1w"
-          size="sm"
-          variant={filter === "object" ? "primary" : "secondary"}
+      <SegmentedControl name={""} className="fr-mb-5w">
+        <SegmentedElement
           onClick={() => setFilter("object")}
-        >
-          Par objet
-        </Button>
-        <Button
-          size="sm"
-          variant={filter === "contact" ? "primary" : "secondary"}
+          name="Par Objet"
+          label={"Par Objet"}
+          value={""}
+          icon="fr-fi-eye-line"
+          checked={filter === "object"}
+        />
+        <SegmentedElement
           onClick={() => setFilter("contact")}
-        >
-          Via formulaire contact
-        </Button>
-      </Col>
+          name="Par Objet"
+          label={"Via formulaire contact"}
+          value={""}
+          checked={filter === "contact"}
+        />
+      </SegmentedControl>
       <HighchartsReact highcharts={Highcharts} options={options} />
     </>
   );
diff --git a/src/components/graphs/by-tags.tsx b/src/components/graphs/by-tags.tsx
index b905f5b..829962d 100644
--- a/src/components/graphs/by-tags.tsx
+++ b/src/components/graphs/by-tags.tsx
@@ -1,18 +1,22 @@
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-import { contactUrl, contributionUrl } from "../../config/api";
-import { Button, Col } from "@dataesr/dsfr-plus";
-import { useState } from "react";
+import { Col, SegmentedControl, SegmentedElement } from "@dataesr/dsfr-plus";
 import { ContributionDataType } from "../../types";
+import { ClipLoader } from "react-spinners";
 
-const ContributionsGraphByTags = () => {
-  const [filter, setFilter] = useState("contributions");
-  const url = filter === "object" ? contributionUrl : contactUrl;
-  const { data, isLoading, isError } = useGetContributionData(url, 0);
-  const contributions = (data as { data: [] })?.data;
+const ContributionsGraphByTags = ({
+  contributions,
+  isLoading,
+  isError,
+  filter,
+  setFilter,
+}) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
@@ -71,23 +75,23 @@ const ContributionsGraphByTags = () => {
 
   return (
     <>
-      <Col className="fr-mb-3w">
-        <Button
-          className="fr-mr-1w"
-          size="sm"
-          variant={filter === "object" ? "primary" : "secondary"}
+      <SegmentedControl name={""} className="fr-mb-5w">
+        <SegmentedElement
           onClick={() => setFilter("object")}
-        >
-          Par objet
-        </Button>
-        <Button
-          size="sm"
-          variant={filter === "contact" ? "primary" : "secondary"}
+          name="Par Objet"
+          label={"Par Objet"}
+          value={""}
+          icon="fr-fi-eye-line"
+          checked={filter === "object"}
+        />
+        <SegmentedElement
           onClick={() => setFilter("contact")}
-        >
-          Via formulaire contact
-        </Button>
-      </Col>
+          name="Par Objet"
+          label={"Via formulaire contact"}
+          value={""}
+          checked={filter === "contact"}
+        />
+      </SegmentedControl>
       <HighchartsReact highcharts={Highcharts} options={options} />
     </>
   );
diff --git a/src/components/graphs/by-types.tsx b/src/components/graphs/by-types.tsx
index 785968a..ce37a3b 100644
--- a/src/components/graphs/by-types.tsx
+++ b/src/components/graphs/by-types.tsx
@@ -1,17 +1,16 @@
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-import { contributionUrl } from "../../config/api";
 import { ContributionDataType } from "../../types";
+import { ClipLoader } from "react-spinners";
+import { Col } from "@dataesr/dsfr-plus";
 
-const ContributionsGraphByTypes = () => {
-  const { data, isLoading, isError } = useGetContributionData(
-    contributionUrl,
-    0
-  );
-  const contributions = (data as { data: [] })?.data;
+const ContributionsGraphByTypes = ({ contributions, isLoading, isError }) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
diff --git a/src/components/graphs/comment-by-team.tsx b/src/components/graphs/comment-by-team.tsx
index 0274c36..52c110b 100644
--- a/src/components/graphs/comment-by-team.tsx
+++ b/src/components/graphs/comment-by-team.tsx
@@ -1,20 +1,21 @@
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-import { Contribution } from "../../types";
-import { contactUrl, contributionUrl } from "../../config/api";
-import { useState } from "react";
-import { Button, Col } from "@dataesr/dsfr-plus";
-
-const CommentsGraphByTeamMember = () => {
-  const [filter, setFilter] = useState("contributions");
-  const url = filter === "object" ? contributionUrl : contactUrl;
-  const { data, isLoading, isError } = useGetContributionData(url, 0);
-
-  const contributions = (data as { data: Contribution[] })?.data;
+import { Col, SegmentedControl, SegmentedElement } from "@dataesr/dsfr-plus";
+import { ClipLoader } from "react-spinners";
 
+const CommentsGraphByTeamMember = ({
+  contributions,
+  isLoading,
+  isError,
+  filter,
+  setFilter,
+}) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
@@ -62,23 +63,23 @@ const CommentsGraphByTeamMember = () => {
 
   return (
     <>
-      <Col className="fr-mb-3w">
-        <Button
-          className="fr-mr-1w"
-          size="sm"
-          variant={filter === "object" ? "primary" : "secondary"}
+      <SegmentedControl name={""} className="fr-mb-5w">
+        <SegmentedElement
           onClick={() => setFilter("object")}
-        >
-          Par objet
-        </Button>
-        <Button
-          size="sm"
-          variant={filter === "contact" ? "primary" : "secondary"}
+          name="Par Objet"
+          label={"Par Objet"}
+          value={""}
+          icon="fr-fi-eye-line"
+          checked={filter === "object"}
+        />
+        <SegmentedElement
           onClick={() => setFilter("contact")}
-        >
-          Via formulaire contact
-        </Button>
-      </Col>
+          name="Par Objet"
+          label={"Via formulaire contact"}
+          value={""}
+          checked={filter === "contact"}
+        />
+      </SegmentedControl>
       <HighchartsReact highcharts={Highcharts} options={options} />
     </>
   );
diff --git a/src/components/graphs/contribution-by-type.tsx b/src/components/graphs/contribution-by-type.tsx
index 1ec7448..697d96d 100644
--- a/src/components/graphs/contribution-by-type.tsx
+++ b/src/components/graphs/contribution-by-type.tsx
@@ -1,17 +1,19 @@
+import { Col } from "@dataesr/dsfr-plus";
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import { contributionUrl } from "../../config/api";
-import { Contribution } from "../../types";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-
-const ContributionsGraphByYearAndType = () => {
-  const url = contributionUrl;
-  const { data, isLoading, isError } = useGetContributionData(url, 0);
-
-  const contributions = (data as { data: Contribution[] })?.data;
+import { ClipLoader } from "react-spinners";
 
+const ContributionsGraphByYearAndType = ({
+  contributions,
+  isLoading,
+  isError,
+}) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
diff --git a/src/components/graphs/contributions-by-name.tsx b/src/components/graphs/contributions-by-name.tsx
index c718e0a..3932977 100644
--- a/src/components/graphs/contributions-by-name.tsx
+++ b/src/components/graphs/contributions-by-name.tsx
@@ -1,18 +1,22 @@
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
 import { Contribution } from "../../types";
-import { contactUrl, contributionUrl } from "../../config/api";
-import { Button, Col } from "@dataesr/dsfr-plus";
-import { useState } from "react";
+import { Col, SegmentedControl, SegmentedElement } from "@dataesr/dsfr-plus";
+import { ClipLoader } from "react-spinners";
 
-const ContributionsGraphByName = () => {
-  const [filter, setFilter] = useState("contributions");
-  const url = filter === "object" ? contributionUrl : contactUrl;
-  const { data, isLoading, isError } = useGetContributionData(url, 0);
-  const contributions = (data as { data: [] })?.data;
+const ContributionsGraphByName = ({
+  contributions,
+  isLoading,
+  isError,
+  filter,
+  setFilter,
+}) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
@@ -82,23 +86,23 @@ const ContributionsGraphByName = () => {
 
   return (
     <>
-      <Col className="fr-mb-3w">
-        <Button
-          className="fr-mr-1w"
-          size="sm"
-          variant={filter === "object" ? "primary" : "secondary"}
+      <SegmentedControl name={""} className="fr-mb-5w">
+        <SegmentedElement
           onClick={() => setFilter("object")}
-        >
-          Par objet
-        </Button>
-        <Button
-          size="sm"
-          variant={filter === "contact" ? "primary" : "secondary"}
+          name="Par Objet"
+          label={"Par Objet"}
+          value={""}
+          icon="fr-fi-eye-line"
+          checked={filter === "object"}
+        />
+        <SegmentedElement
           onClick={() => setFilter("contact")}
-        >
-          Via formulaire contact
-        </Button>
-      </Col>
+          name="Par Objet"
+          label={"Via formulaire contact"}
+          value={""}
+          checked={filter === "contact"}
+        />
+      </SegmentedControl>
       <HighchartsReact highcharts={Highcharts} options={options} />
     </>
   );
diff --git a/src/components/graphs/contributions-by-year.tsx b/src/components/graphs/contributions-by-year.tsx
index 48441f1..fc6177b 100644
--- a/src/components/graphs/contributions-by-year.tsx
+++ b/src/components/graphs/contributions-by-year.tsx
@@ -1,18 +1,21 @@
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-import { contributionUrl, contactUrl } from "../../config/api";
-import { useState } from "react";
-import { Button, Col } from "@dataesr/dsfr-plus";
-
-const ContributionsGraphByYear = () => {
-  const [filter, setFilter] = useState("contributions");
-  const url = filter === "object" ? contributionUrl : contactUrl;
-  const { data, isLoading, isError } = useGetContributionData(url, 0);
-  const contributions = (data as { data: [] })?.data;
+import { Col, SegmentedControl, SegmentedElement } from "@dataesr/dsfr-plus";
+import { ClipLoader } from "react-spinners";
 
+const ContributionsGraphByYear = ({
+  contributions,
+  isLoading,
+  isError,
+  filter,
+  setFilter,
+}) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
@@ -74,23 +77,23 @@ const ContributionsGraphByYear = () => {
 
   return (
     <>
-      <Col className="fr-mb-3w">
-        <Button
-          className="fr-mr-1w"
-          size="sm"
-          variant={filter === "object" ? "primary" : "secondary"}
+      <SegmentedControl name={""} className="fr-mb-5w">
+        <SegmentedElement
           onClick={() => setFilter("object")}
-        >
-          Par objet
-        </Button>
-        <Button
-          size="sm"
-          variant={filter === "contact" ? "primary" : "secondary"}
+          name="Par Objet"
+          label={"Par Objet"}
+          value={""}
+          icon="fr-fi-eye-line"
+          checked={filter === "object"}
+        />
+        <SegmentedElement
           onClick={() => setFilter("contact")}
-        >
-          Via formulaire contact
-        </Button>
-      </Col>
+          name="Par Objet"
+          label={"Via formulaire contact"}
+          value={""}
+          checked={filter === "contact"}
+        />
+      </SegmentedControl>
       <HighchartsReact highcharts={Highcharts} options={options} />
     </>
   );
diff --git a/src/components/graphs/response-by-admin.tsx b/src/components/graphs/response-by-admin.tsx
index 1dafc28..abc1fb2 100644
--- a/src/components/graphs/response-by-admin.tsx
+++ b/src/components/graphs/response-by-admin.tsx
@@ -1,21 +1,23 @@
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
 
-import { useState } from "react";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-import { contactUrl, contributionUrl } from "../../config/api";
-import { Button, Col } from "@dataesr/dsfr-plus";
+import { Col, SegmentedControl, SegmentedElement } from "@dataesr/dsfr-plus";
 import { ContributionDataType } from "../../types";
+import { ClipLoader } from "react-spinners";
 
-const AdminResponseGraph = () => {
-  const [filter, setFilter] = useState("contributions");
-  const url = filter === "object" ? contributionUrl : contactUrl;
-  const { data, isLoading, isError } = useGetContributionData(url, 0);
-
-  const contributions = (data as { data: ContributionDataType[] })?.data;
-
+const AdminResponseGraph = ({
+  contributions,
+  isLoading,
+  isError,
+  filter,
+  setFilter,
+}) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
@@ -64,23 +66,23 @@ const AdminResponseGraph = () => {
 
   return (
     <>
-      <Col className="fr-mb-3w">
-        <Button
-          className="fr-mr-1w"
-          size="sm"
-          variant={filter === "object" ? "primary" : "secondary"}
+      <SegmentedControl name={""} className="fr-mb-5w">
+        <SegmentedElement
           onClick={() => setFilter("object")}
-        >
-          Par objet
-        </Button>
-        <Button
-          size="sm"
-          variant={filter === "contact" ? "primary" : "secondary"}
+          name="Par Objet"
+          label={"Par Objet"}
+          value={""}
+          icon="fr-fi-eye-line"
+          checked={filter === "object"}
+        />
+        <SegmentedElement
           onClick={() => setFilter("contact")}
-        >
-          Via formulaire contact
-        </Button>
-      </Col>
+          name="Par Objet"
+          label={"Via formulaire contact"}
+          value={""}
+          checked={filter === "contact"}
+        />
+      </SegmentedControl>
       <HighchartsReact highcharts={Highcharts} options={options} />
     </>
   );
diff --git a/src/components/graphs/treatment-by-admin.tsx b/src/components/graphs/treatment-by-admin.tsx
index 0da1dd4..6f8400b 100644
--- a/src/components/graphs/treatment-by-admin.tsx
+++ b/src/components/graphs/treatment-by-admin.tsx
@@ -1,21 +1,23 @@
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
 
-import { useState } from "react";
-import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-import { contactUrl, contributionUrl } from "../../config/api";
-import { Button, Col } from "@dataesr/dsfr-plus";
+import { Col, SegmentedControl, SegmentedElement } from "@dataesr/dsfr-plus";
 import { ContributionDataType } from "../../types";
+import { ClipLoader } from "react-spinners";
 
-const AdminTreatmentGraph = () => {
-  const [filter, setFilter] = useState("contributions");
-  const url = filter === "object" ? contributionUrl : contactUrl;
-  const { data, isLoading, isError } = useGetContributionData(url, 0);
-
-  const contributions = (data as { data: ContributionDataType[] })?.data;
-
+const AdminTreatmentGraph = ({
+  contributions,
+  isLoading,
+  isError,
+  filter,
+  setFilter,
+}) => {
   if (isLoading) {
-    return <div>Chargement...</div>;
+    return (
+      <Col className="comment">
+        <ClipLoader color="#123abc" size={50} />
+      </Col>
+    );
   }
 
   if (isError) {
@@ -45,7 +47,7 @@ const AdminTreatmentGraph = () => {
 
   const chartData = Object.entries(responsesByAdmin)
     .map(([name, y]) => ({ name, y }))
-    .sort((a, b) => b.y - a.y);
+    .sort((a: any, b: any) => b.y - a.y);
 
   const options = {
     chart: {
@@ -94,23 +96,23 @@ const AdminTreatmentGraph = () => {
 
   return (
     <>
-      <Col className="fr-mb-3w">
-        <Button
-          className="fr-mr-1w"
-          size="sm"
-          variant={filter === "object" ? "primary" : "secondary"}
+      <SegmentedControl name={""} className="fr-mb-5w">
+        <SegmentedElement
           onClick={() => setFilter("object")}
-        >
-          Par objet
-        </Button>
-        <Button
-          size="sm"
-          variant={filter === "contact" ? "primary" : "secondary"}
+          name="Par Objet"
+          label={"Par Objet"}
+          value={""}
+          icon="fr-fi-eye-line"
+          checked={filter === "object"}
+        />
+        <SegmentedElement
           onClick={() => setFilter("contact")}
-        >
-          Via formulaire contact
-        </Button>
-      </Col>
+          name="Par Objet"
+          label={"Via formulaire contact"}
+          value={""}
+          checked={filter === "contact"}
+        />
+      </SegmentedControl>
       <HighchartsReact highcharts={Highcharts} options={options} />
     </>
   );
diff --git a/src/config/api.ts b/src/config/api.ts
index aa151e6..52b0ea3 100644
--- a/src/config/api.ts
+++ b/src/config/api.ts
@@ -2,12 +2,15 @@ const API_KEY = import.meta.env.VITE_SCANR_API_AUTHORIZATION;
 export const headers = API_KEY ? { Authorization: `Basic ${API_KEY}` } : {};
 export const postHeaders = { ...headers, "Content-Type": "application/json" };
 
-export const contributionUrl = "/api/contribute?max_results=2000";
-export const contactUrl = "/api/contact?max_results=2000";
-export const productionUrl = "/api/contribute_productions?max_results=2000";
-// export const contributionUrl =
-//   "https://scanr-api.dataesr.ovh/contribute?max_results=2000";
-// export const contactUrl =
-//   "https://scanr-api.dataesr.ovh/contact?max_results=2000";
-// export const productionUrl =
-//   "https://scanr-api.dataesr.ovh/contribute_productions?max_results=2000";
+const isDevelopment = import.meta.env.VITE_HEADER_TAG === "Development";
+export const contributionUrl = isDevelopment
+  ? "https://scanr-api.dataesr.ovh/contribute?max_results=2000"
+  : "/api/contribute?max_results=2000";
+
+export const contactUrl = isDevelopment
+  ? "https://scanr-api.dataesr.ovh/contact?max_results=2000"
+  : "/api/contact?max_results=2000";
+
+export const productionUrl = isDevelopment
+  ? "https://scanr-api.dataesr.ovh/contribute_productions?max_results=2000"
+  : "/api/contribute_productions?max_results=2000";
diff --git a/src/pages/api-operation-page/index.tsx b/src/pages/api-operation-page/index.tsx
index b7d74ad..40abf23 100644
--- a/src/pages/api-operation-page/index.tsx
+++ b/src/pages/api-operation-page/index.tsx
@@ -14,6 +14,7 @@ import Selectors from "../../components/selectors";
 import TopPaginationButtons from "../../components/pagination/top-buttons";
 import ContributionProductionItem from "./contribution-production-card";
 import ContributionData from "../../api/contribution-api/getData";
+import { buildURL } from "../../api/utils/buildURL";
 
 const ContributionPage: React.FC<ContributionPageProps> = () => {
   const [reload] = useState(0);
@@ -49,19 +50,13 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
     }
   }, [location.pathname]);
 
+  const url = buildURL(location, sort, status, query, page);
   const {
     data: fetchedData,
     isLoading,
     isError,
     refetch,
-  } = ContributionData({
-    location: location,
-    sort,
-    status,
-    query,
-    page,
-    searchInMessage: reload,
-  });
+  } = ContributionData(url);
 
   useEffect(() => {
     setData(fetchedData);
diff --git a/src/pages/contribution-page/index.tsx b/src/pages/contribution-page/index.tsx
index 9fbefff..60c9423 100644
--- a/src/pages/contribution-page/index.tsx
+++ b/src/pages/contribution-page/index.tsx
@@ -16,6 +16,7 @@ import {
 } from "@dataesr/dsfr-plus";
 import ContributionItem from "./contribution-card";
 import ContributionData from "../../api/contribution-api/getData";
+import { buildURL } from "../../api/utils/buildURL";
 
 const ContributionPage: React.FC<ContributionPageProps> = () => {
   const [reload] = useState(0);
@@ -57,14 +58,8 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
       setSearchInMessage(false);
     }
   }, [location.pathname]);
-  const { data, isLoading, isError, refetch } = ContributionData({
-    location: location,
-    sort,
-    status,
-    query,
-    page,
-    searchInMessage,
-  });
+  const url = buildURL(location, sort, status, query, page, searchInMessage);
+  const { data, isLoading, isError, refetch } = ContributionData(url);
 
   const meta = (data as { meta: any })?.meta;
   const maxPage = meta ? Math.ceil(meta?.total / 10) : 1;
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 7ffa5b5..7423162 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -1,4 +1,4 @@
-import { Col, Container, Row } from "@dataesr/dsfr-plus";
+import { Col, Container, Row, Title } from "@dataesr/dsfr-plus";
 import ContributionsGraphByYear from "../../components/graphs/contributions-by-year";
 import ContributionsGraphByName from "../../components/graphs/contributions-by-name";
 import ContributionsGraphByStatus from "../../components/graphs/by-status";
@@ -10,54 +10,124 @@ import AdminResponseGraph from "../../components/graphs/response-by-admin";
 import ContributionsGraphByProductions from "../../components/graphs/by-missing-productions";
 import CommentsGraphByTeamMember from "../../components/graphs/comment-by-team";
 import ContributionsGraphByYearAndType from "../../components/graphs/contribution-by-type";
+import { useState } from "react";
+import { contactUrl, contributionUrl } from "../../config/api";
+import ContributionData from "../../api/contribution-api/getData";
 
 const Home = () => {
+  const [filter, setFilter] = useState("contributions");
+  const url = filter === "object" ? contributionUrl : contactUrl;
+  const { data, isLoading, isError } = ContributionData(url);
+  const contributions = (data as { data: [] })?.data;
+
   return (
     <Container className="fr-mt-10v">
-      <h1>Bienvenue sur le Guichet numérique du DISD</h1>
+      <Title>Bienvenue sur le Guichet numérique du DISD</Title>
       <Row gutters className="fr-grid-row--center fr-mt-5w">
         <Col md="6">
-          <ContributionsGraphByYear />
+          <ContributionsGraphByYear
+            contributions={contributions}
+            isLoading={isLoading}
+            isError={isError}
+            filter={filter}
+            setFilter={setFilter}
+          />
         </Col>
         <Col md="6">
-          <ContributionsGraphByName />
+          <ContributionsGraphByName
+            contributions={contributions}
+            isLoading={isLoading}
+            isError={isError}
+            filter={filter}
+            setFilter={setFilter}
+          />
         </Col>
       </Row>
       <Row gutters className="fr-grid-row--center fr-mt-5w">
         <Col md="6">
-          <AdminTreatmentGraph />
+          <AdminTreatmentGraph
+            contributions={contributions}
+            isLoading={isLoading}
+            isError={isError}
+            filter={filter}
+            setFilter={setFilter}
+          />
         </Col>
         <Col md="6">
-          <ContributionsGraphByStatus />
+          <ContributionsGraphByStatus
+            contributions={contributions}
+            isLoading={isLoading}
+            isError={isError}
+            filter={filter}
+            setFilter={setFilter}
+          />
         </Col>
       </Row>
       <Row gutters className="fr-grid-row--center fr-mt-5w">
         <Col md="6">
-          <ContributionsGraphByTags />
+          <ContributionsGraphByTags
+            contributions={contributions}
+            isLoading={isLoading}
+            isError={isError}
+            filter={filter}
+            setFilter={setFilter}
+          />
         </Col>
         <Col md="6">
-          <ContributionsGraphByDomains />
+          <ContributionsGraphByDomains
+            contributions={contributions}
+            isLoading={isLoading}
+            isError={isError}
+            filter={filter}
+            setFilter={setFilter}
+          />
         </Col>
       </Row>
       <Row gutters className="fr-grid-row--center fr-mt-5w">
+        {url === contributionUrl && (
+          <Col md="6">
+            <ContributionsGraphByTypes
+              contributions={contributions}
+              isLoading={isLoading}
+              isError={isError}
+            />
+          </Col>
+        )}
         <Col md="6">
-          <ContributionsGraphByTypes />
-        </Col>
-        <Col md="6">
-          <AdminResponseGraph />
+          <AdminResponseGraph
+            contributions={contributions}
+            isLoading={isLoading}
+            isError={isError}
+            filter={filter}
+            setFilter={setFilter}
+          />
         </Col>
       </Row>
       <Row gutters className="fr-grid-row--center fr-mt-5w">
         <Col md="6">
-          <ContributionsGraphByProductions />
+          <ContributionsGraphByProductions
+            contributions={contributions}
+            isLoading={isLoading}
+            isError={isError}
+          />
         </Col>
         <Col md="6">
-          <CommentsGraphByTeamMember />
+          <CommentsGraphByTeamMember
+            contributions={contributions}
+            isLoading={isLoading}
+            isError={isError}
+            filter={filter}
+            setFilter={setFilter}
+          />
         </Col>
       </Row>
       <Row gutters className="fr-grid-row--center fr-mt-5w">
         <Col md="6">
-          <ContributionsGraphByYearAndType />
+          <ContributionsGraphByYearAndType
+            contributions={contributions}
+            isLoading={isLoading}
+            isError={isError}
+          />
         </Col>
       </Row>
     </Container>