From 236afd44b22fe5980769b588351bbf757b79c1e4 Mon Sep 17 00:00:00 2001
From: YoanRos <yoan.roszak@etu.imt-nord-europe.fr>
Date: Wed, 24 Jul 2024 10:47:02 +0200
Subject: [PATCH] feat: add fetching

---
 next-app/app/partners/page.tsx | 219 +++++----------------------------
 next-app/app/plan/page.tsx     |  63 ++++++----
 2 files changed, 71 insertions(+), 211 deletions(-)

diff --git a/next-app/app/partners/page.tsx b/next-app/app/partners/page.tsx
index d055d0b..bb59bcc 100644
--- a/next-app/app/partners/page.tsx
+++ b/next-app/app/partners/page.tsx
@@ -1,5 +1,7 @@
 import Footer from "~/components/Footer"
 import Navigation from "~/components/Navigation"
+import { fetchAPI, getStrapiMedia } from "~/app/api/strapi"
+import { Key} from "react";
 
 export const metadata = {
   title: "Partenaires | Oz Ensemble",
@@ -7,209 +9,56 @@ export const metadata = {
     "Découvrez les partenaires d'Oz Ensemble, une application mobile pour maitriser sa consommation d'alcool.",
 }
 
-export default function Partners() {
+async function getPartners() {
+  try {
+    const path = `/partners-page`;
+    const urlParamsObject = {
+      populate: ["section", "section.logos", "section.logos.image"],
+    };
+    const options = {};
+    const { data } = await fetchAPI(path, urlParamsObject, options);
+    return data?.attributes;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}
+
+export default async function Partners() {
+  const partners = await getPartners();
   return (
     <div className="mt-[70px]">
       <Navigation />
       <div className="mt-30 lg:mt-40">
         <h1 className="mb-2 text-3xl text-center font-extrabold lg:text-5xl text-oz-blue">
-          Ils parlent de nous
+          {partners?.title || "Ils parlent de nous"}
         </h1>
-        <div className="px-20 lg:py-10">
+        {partners?.section?.map((section: { id: Key; title: string; logos: any[]; }) => (
+          <div key={section.id} className="px-20 lg:py-10">
           <h3 className="text-2xl font-bold lg:text-4xl text-oz-green">
-            Institutions
+            {section.title}
           </h3>
-          <div className="flex flex-wrap mt-10 gap-10 ">
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
+          <div className="flex items-center flex-wrap mt-10 gap-10 ">
+            {section.logos?.map((logo)=>(
+              <div key={logo.id} className="transition duration-500 hover:scale-110 basis-1/6">
               <a
                 className=""
-                href="https://www.alcool-info-service.fr/Actualites/Oz-ensemble-une-application-pour-maitriser-sa-consommation-d-alcool"
+                href={logo.url}
               >
                 <img
                   className="pt-8"
-                  src="images/logo_alcool_info_service.png"
-                  alt="Partenaire alcool info service, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://www.federationaddiction.fr/actualites/oz-ensemble-une-application-pour-smartphone-pour-reprendre-la-maitrise-de-sa-consommation-dalcool/">
-                <img
-                  className="pt-7"
-                  src="images/logo_federation_addiction.png"
-                  alt="Partenaire fédération addiction, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-32">
-              <a href="https://www.ars.sante.fr/">
-                <img
-                  className=""
-                  src="images/logo_ars.png"
-                  alt="Partenaire l'agence régionale de santé Ile-de-France, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-40">
-              <a href="https://capasscite.fr/association/">
-                <img
-                  className=""
-                  src="images/logo_CaPASSCite.png"
-                  alt="Partenaire l'association Capasscité, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-          </div>
-        </div>
-        <div className="px-20 py-20 lg:py-10">
-          <h3 className="text-2xl font-bold lg:text-4xl text-oz-green">
-            Communes
-          </h3>
-          <div className="flex flex-wrap mt-10 gap-10 ">
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://correns.fr/fr/nw/1870442/1732031/dispositif-oz-ensemble">
-                <img
-                  className=""
-                  src="images/logo_correns.png"
-                  alt="La commune de Correns, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110">
-              <a href="https://www.mairie-jury.fr/a-la-une/une-861/oz-le-dispositif-du-ministere-de-la-sante-en-addictologie-5326.html">
-                <img
-                  className=""
-                  src="images/logo_jury.png"
-                  alt="Commune jury, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110">
-              <a href="https://mairie-martressurmorge.fr/2023/10/18/oz-ensemble-maitriser-sa-consommation-dalcool/">
-                <img
-                  className=""
-                  src="images/logo_martres_sur_morge.png"
-                  alt="Commune les martres sur morge, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-32">
-              <a href="https://www.intramuros.org/laa-mondrans/actualites/321342">
-                <img
-                  className=""
-                  src="images/logo_laa_mondrans.jpg"
-                  alt="Commune Laà Mondras , accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://gps.gf/agenda/presentation-de-l-application-oz-ensemble/">
-                <img
-                  className=""
-                  src="images/logo_guyane_promo_sante.png"
-                  alt="L'association guyane promo santé, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://ouzouersurloire.fr/application-mobile-oz-ensemble ">
-                <img
-                  className=""
-                  src="images/logo_ouzouer.png"
-                  alt="La commune ouzouer-sur-loire, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://villeneuvelesbouloc.fr/fr/nw/1326795/1651652/application-oz-ensemble">
-                <img
-                  className=""
-                  src="images/logo_villeneuve_les_bouloc.jpg"
-                  alt="Partenaire fédération addiction, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-          </div>
-        </div>
-        <div className="px-20 py-20 lg:py-10">
-          <h3 className="text-2xl font-bold lg:text-4xl text-oz-green">
-            Autres
-          </h3>
-          <div className="flex flex-wrap mt-10 gap-10 ">
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://www.whatsupdoc-lemag.fr/article/quarantaine-confinement-une-app-oz-ensemble-aide-au-controle-de-la-consommation-dalcool">
-                <img
-                  className=""
-                  src="images/logo_whatsupdoc.png"
-                  alt="Magazine what's up doc, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-1/12">
-              <a href="https://apps.apple.com/app/id1443535001">
-                <img
-                  className=""
-                  src="images/logo_nutri_app.png"
-                  alt="Application nutri app, accédez à la page de téléchargement en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://www.ordotype.fr/recommandations/sevrage-alcoolique-application-oz-ensemble">
-                <img
-                  className=""
-                  src="images/logo_ordotype.svg"
-                  alt="Le site internet ordotype, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://www.lanutrition.fr/dry-january-quels-bienfaits-en-attendre-pour-la-sante">
-                <img
-                  className=""
-                  src="images/logo_la_nutrition.svg"
-                  alt="Journal la nutrition, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://app.vivatechnology.com/partner/2d36f8bb-2201-ee11-907a-002248859577/oz-ensemble">
-                <img
-                  className=""
-                  src="images/logo_viva_technology.png"
-                  alt="Entreprise VIVA technology, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-          </div>
-        </div>
-        <div className="px-20 py-20 lg:py-10">
-          <h3 className="text-2xl font-bold lg:text-4xl text-oz-green">
-            Presse
-          </h3>
-          <div className="flex flex-wrap my-10 gap-10 ">
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://rmc.bfmtv.com/conso/dry-january-maitrisez-votre-consommation-d-alcool-grace-a-ces-applications_AN-202401020669.html">
-                <img
-                  className=""
-                  src="images/logo_rmc_conso.svg"
-                  alt="Journal rmc conso, accédez à leur site en cliquant sur ce logo"
-                />
-              </a>
-            </div>
-            <div className="transition duration-500 hover:scale-110 basis-1/6">
-              <a href="https://www.liberation.fr/lifestyle/gastronomie/dry-january-questionner-sa-consommation-dalcool-sur-la-duree-20230131_M6DBQPJS4VALHIKGNUPSS7KIHA/">
-                <img
-                  className=""
-                  src="images/logo_liberation.svg"
-                  alt="Journal libération, accédez à leur site en cliquant sur ce logo"
+                  src={getStrapiMedia(logo.image.data?.attributes.url) || ""}
+                  alt={logo.image.data?.attributes.alternativeText || ""}
+                  height={120}
+                  width={120}
                 />
               </a>
             </div>
+          ))}
           </div>
         </div>
+        ))}
       </div>
       <Footer />
     </div>
-  )
-}
+  )}
diff --git a/next-app/app/plan/page.tsx b/next-app/app/plan/page.tsx
index 783405d..0a8de86 100644
--- a/next-app/app/plan/page.tsx
+++ b/next-app/app/plan/page.tsx
@@ -4,45 +4,56 @@ export const metadata = {
   title: "Plan du site | Oz Ensemble",
   description: "Plan du site de l'application Oz Ensemble",
 }
+import { fetchAPI } from "~/app/api/strapi";
 
-export default function Plan() {
+
+export default async function Plan() {
+  const data = await getData();
   return (
     <div className="mt-[70px]">
       <Navigation />
       <div className="mt-30 lg:mt-40">
-        <h1 className="mb-2 text-3xl text-center font-extrabold lg:text-5xl text-oz-blue">
-          Plan du site
+        <h1 className="mb-2 text-3xl text-center font-extrabold lg:text-5xl text-oz-blue">         {data?.title || "Plan du site"}
         </h1>
         <div className="flex flex-col gap-9 pl-40 py-12">
-          <ArrowList text="Accueil" link="/" />
-          <div className="flex flex-col gap-6 px-12">
-            <SubArrowList text="Comment ça marche ?" link="/#how-it-works" />
-            <SubArrowList text="Qui sommes-nous ?" link="/#who-are-we" />
-          </div>
-          <ArrowList text="Blog" link="/blog" />
-          <ArrowList text="Ils parlent de nous" link="/partners" />
-          <h3 className="text-2xl text-[#115F3D]">Utilités</h3>
-          <div className="flex flex-col gap-6 px-12">
-            <SubArrowList
-              text="Mentions légales"
-              link="/files/25012023-Oz_Ensemble-Mentions_legales_site_V2.pdf"
-            />
-            <SubArrowList
-              text="Politique de confidentialité"
-              link="/files/25012023-Oz_Ensemble-Politique_de_confidentialite_site_V3.pdf"
-            />
-            <SubArrowList text="Statistiques" link="/stats" />
-            <SubArrowList
-              text="Accessibilité : non conforme"
-              link="/accessibility"
-            />
-          </div>
+        { data?.sections?.map((section)=> ( 
+            <>
+            { section.parentUrl ?
+              <ArrowList key={section.id} text={section.title} link={section.parentUrl} />
+              : <h3 key={section.id} className="text-2xl text-[#115F3D]">{section.title}</h3>
+            }
+            { section.urls?.length > 0 &&
+              <div className="flex flex-col gap-6 px-12">
+                {section.urls.map((link)=>(
+                  <SubArrowList key={link.id} text={link.title} link={link.url} />
+                ))}
+              </div>
+            }
+          </>
+          ))}
+
         </div>
       </div>
       <Footer />
     </div>
   )
 }
+
+async function getData() {
+  try {
+    const path = `/plan-page`;
+    const urlParamsObject = {
+      populate: ["sections", "sections.urls"],
+    };
+    const options = {};
+    const { data } = await fetchAPI(path, urlParamsObject, options);
+    console.log(data);
+    return data?.attributes;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}
 const ArrowList = ({ text, link }) => (
   <div className="mb-2 items-start">
     <a href={link}>