feat: Add thematics block to the thematic pages #313

frontend/messages/fr/climate.json

@@ -2,6 +2,7 @@
   "climate": {
     "title": "Climat et biodiversité",
     "projectsTitle": "Nos projets",
-    "partners": "Partenaires"
+    "partners": "Partenaires",
+    "thematics": "Nos thématiques"
   }
 }

frontend/messages/fr/democracy.json

@@ -2,6 +2,7 @@
   "democracy": {
     "title": "Démocratie",
     "projectsTitle": "Nos projets",
-    "partners": "Partenaires"
+    "partners": "Partenaires",
+    "thematics": "Nos thématiques"
   }
 }

frontend/messages/fr/social.json

@@ -2,6 +2,7 @@
   "social": {
     "title": "Justice sociale",
     "projectsTitle": "Nos projets",
-    "partners": "Partenaires"
+    "partners": "Partenaires",
+    "thematics": "Nos thématiques"
   }
 }

frontend/src/app/[locale]/climate-and-biodiversity/climate.tsx

@@ -5,25 +5,29 @@ import {
   Kpis,
   PartnersBlock,
   ThematicHeroBlock,
+  ThematicsBlock,
   ThumbnailProjectsBlock,
 } from '@/components';
 import {
   transformProjects,
   transformKpis,
   transformPartners,
+  transformThematics,
 } from '@/lib/formatters/thematics';
 import { useTranslations } from 'next-intl';
-import { ThematicPageData } from './page';
+import { ThematicPageData, ThematicsData } from './page';
 
 type ThematicsProps = {
   data: ThematicPageData;
+  thematicsData: ThematicsData;
 }
 
-export default function SocialPage({ data }: ThematicsProps) {
+export default function SocialPage({ data , thematicsData }: ThematicsProps) {
   const t = useTranslations('climate');
   const partners = transformPartners(data.thematic?.funders);
   const kpis = transformKpis(data.thematic?.kpis);
   const projects = transformProjects(data.thematic?.projects);
+  const thematics = transformThematics(thematicsData);
 
   return (
     <>
@@ -64,6 +68,12 @@ export default function SocialPage({ data }: ThematicsProps) {
         partners={partners}
         className="my-lg"
       />
+
+      <ThematicsBlock
+        title={t('thematics')}
+        thematics={thematics}
+        className="my-lg"
+      />
     </>
   );
 }

frontend/src/app/[locale]/climate-and-biodiversity/page.tsx

@@ -56,14 +56,48 @@ async function fetchThematicPageData() {
   });
 }
 
+async function fetchThematics() {
+  return await client.GET('/thematics', {
+    params: {
+      query: {
+        populate: {
+          projects: {
+            populate: '*'
+          },
+          partners: {
+            populate: '*'
+          },
+          funders: {
+            populate: '*'
+          },
+          kpis: {
+            populate: '*'
+          },
+          image_1: {
+            fields: ["url"]
+          },
+          image_2: {
+            fields: ["url"]
+          },
+           thumbnail: {
+             fields: ["url"]
+           },
+         }
+       },
+    },
+  });
+}
+
 export type ThematicPageData = NonNullable<NonNullable<Awaited<ReturnType<typeof fetchThematicPageData>>["data"]>["data"]>;
+export type ThematicsData = NonNullable<NonNullable<Awaited<ReturnType<typeof fetchThematics>>["data"]>["data"]>;
 
 export default async function Page() {
   const { data } = await fetchThematicPageData();
+  const { data: thematicsData } = await fetchThematics();
 
-  if (!data?.data) {
+  if (!data?.data || !thematicsData?.data) {
     return null;
   }
 
-  return <ClimatePage data={data.data} />;
-};
+  return <ClimatePage data={data.data} thematicsData={thematicsData.data} />;
+};

frontend/src/app/[locale]/democracy/democracy.tsx

@@ -5,25 +5,29 @@ import {
   Kpis,
   PartnersBlock,
   ThematicHeroBlock,
+  ThematicsBlock,
   ThumbnailProjectsBlock,
 } from '@/components';
 import {
   transformProjects,
   transformKpis,
   transformPartners,
+  transformThematics,
 } from '@/lib/formatters/thematics';
 import { useTranslations } from 'next-intl';
-import { ThematicPageData } from './page';
+import { ThematicPageData , ThematicsData} from './page';
 
 type ThematicsProps = {
   data: ThematicPageData;
+  thematicsData: ThematicsData;
 }
 
-export default function SocialPage({ data }: ThematicsProps) {
+export default function SocialPage({ data, thematicsData }: ThematicsProps) {
   const t = useTranslations('democracy');
   const partners = transformPartners(data.thematic?.funders);
   const kpis = transformKpis(data.thematic?.kpis);
   const projects = transformProjects(data.thematic?.projects);
+  const thematics = transformThematics(thematicsData);
 
   return (
     <>
@@ -64,6 +68,12 @@ export default function SocialPage({ data }: ThematicsProps) {
         partners={partners}
         className="my-lg"
       />
+
+      <ThematicsBlock
+        title={t('thematics')}
+        thematics={thematics}
+        className="my-lg"
+      />
     </>
   );
 }

frontend/src/app/[locale]/democracy/page.tsx

@@ -56,14 +56,26 @@ async function fetchThematicPageData() {
   });
 }
 
+async function fetchThematics() {
+  return await client.GET('/thematics', {
+    params: {
+      query: {
+        populate: '*'
+      },
+    },
+  });
+}
+
 export type ThematicPageData = NonNullable<NonNullable<Awaited<ReturnType<typeof fetchThematicPageData>>["data"]>["data"]>;
+export type ThematicsData = NonNullable<NonNullable<Awaited<ReturnType<typeof fetchThematics>>["data"]>["data"]>;
 
 export default async function Page() {
   const { data } = await fetchThematicPageData();
+  const { data: thematicsData } = await fetchThematics();
 
-  if (!data?.data) {
+  if (!data?.data || !thematicsData?.data) {
     return null;
   }
 
-  return <DemocracyPage data={data.data} />;
-};
+  return <DemocracyPage data={data.data} thematicsData={thematicsData.data} />;
+};

frontend/src/app/[locale]/social-justice/page.tsx

@@ -56,14 +56,26 @@ async function fetchThematicPageData() {
   });
 }
 
+async function fetchThematics() {
+  return await client.GET('/thematics', {
+    params: {
+      query: {
+        populate: '*'
+      },
+    },
+  });
+}
+
 export type ThematicPageData = NonNullable<NonNullable<Awaited<ReturnType<typeof fetchThematicPageData>>["data"]>["data"]>;
+export type ThematicsData = NonNullable<NonNullable<Awaited<ReturnType<typeof fetchThematics>>["data"]>["data"]>;
 
 export default async function Page() {
   const { data } = await fetchThematicPageData();
+  const { data: thematicsData } = await fetchThematics();
 
-  if (!data?.data) {
+  if (!data?.data || !thematicsData?.data) {
     return null;
   }
 
-  return <SocialPage data={data.data} />;
-};
+  return <SocialPage data={data.data} thematicsData={thematicsData.data} />;
+};

frontend/src/app/[locale]/social-justice/social.tsx

@@ -5,26 +5,29 @@ import {
   Kpis,
   PartnersBlock,
   ThematicHeroBlock,
+  ThematicsBlock,
   ThumbnailProjectsBlock,
 } from '@/components';
 import {
   transformProjects,
   transformKpis,
   transformPartners,
+  transformThematics,
 } from '@/lib/formatters/thematics';
 import { useTranslations } from 'next-intl';
-import { ThematicPageData } from './page';
+import { ThematicPageData, ThematicsData } from './page';
 
 type ThematicsProps = {
   data: ThematicPageData;
+  thematicsData: ThematicsData;
 }
 
-
-export default function SocialPage({ data }: ThematicsProps) {
+export default function SocialPage({ data, thematicsData }: ThematicsProps) {
   const t = useTranslations('social');
   const partners = transformPartners(data.thematic?.funders);
   const kpis = transformKpis(data.thematic?.kpis);
   const projects = transformProjects(data.thematic?.projects);
+  const thematics = transformThematics(thematicsData);
 
   return (
     <>
@@ -65,6 +68,12 @@ export default function SocialPage({ data }: ThematicsProps) {
         partners={partners}
         className="my-lg"
       />
+
+      <ThematicsBlock
+        title={t('thematics')}
+        thematics={thematics.map(t => ({ ...t, id: t.id?.toString() || '' }))}
+        className="my-lg"
+      />
     </>
   );
 }

frontend/src/lib/formatters/thematics.ts

@@ -1,4 +1,5 @@
 import { ThematicPageData } from '@/app/[locale]/climate-and-biodiversity/page';
+import { ThematicsData } from '@/app/[locale]/social-justice/page';
 
 export function transformPartners(
   partners: NonNullable<ThematicPageData['funders']>
@@ -47,3 +48,24 @@ export function transformProjects(
     ],
   })) ?? [];
 }
+
+export function transformThematics(
+  thematics: NonNullable<ThematicsData>
+) {
+  return thematics?.map(thematic => ({
+    title: {
+      children: thematic.name || '',
+      props: {
+        colors: `text-black bg-${thematic.color}`,
+        className: "drop-shadow-3 drop-shadow-black before:-z-1",
+        rotation: -2.58,
+      }
+    },
+    id: thematic.id?.toString() || '',
+    talk: thematic.short_description || '',
+    talkOffset: 10,
+    image: thematic.thumbnail?.url || '',
+    ctaText: thematic.cta_text,
+    ctaLink: thematic.cta_link,
+  })).filter(thematic => thematic.talk) ?? [];
+}