feat: allow custom colors for actu tags

components/ActualitesModal.tsx

@@ -54,6 +54,18 @@ export default function ActualitesModal({ onClose }: ActualitesModalProps) {
               key={article.id}
             >
               <h3 className='font-bold text-primary my-2'>{article.titre}</h3>
+              {article.etiquette.length > 0 && (
+                <div className='flex gap-2'>
+                  {article.etiquette.map((etiquette) => (
+                    <span
+                      key={etiquette.id}
+                      className={`flex items-center w-fit text-s-medium text-${etiquette.couleur} px-3 bg-${etiquette.couleur}_lighten whitespace-nowrap rounded-full`}
+                    >
+                      {etiquette.nom}
+                    </span>
+                  ))}
+                </div>
+              )}
               {article.contenu}
             </div>
           ))}

interfaces/actualites.ts

@@ -2,29 +2,44 @@ import { domToReact } from 'html-react-parser'
 
 export type ActualitesRaw = {
   articles: Array<{
-    contenu: string
     id: string
     titre: string
+    etiquette: EtiquetteArticle[]
+    contenu: string
   }>
   dateDerniereModification: string
 }
 
 export type ActualitesParsees = {
   articles: Array<{
-    contenu: ReturnType<typeof domToReact>
     id: string
     titre: ReturnType<typeof domToReact>
+    etiquette: EtiquetteArticle[]
+    contenu: ReturnType<typeof domToReact>
   }>
   dateDerniereModification: string
 }
 
 export type ArticleJson = {
+  id: string
   modified: string
-  content: {
+  title: {
     rendered: string
   }
-  title: {
+  tags: string[]
+  content: {
     rendered: string
   }
+}
+
+export type TagJson = {
+  id: string
+  name: string
+  description: string
+}
+
+export type EtiquetteArticle = {
   id: string
+  nom: string
+  couleur: string
 }

services/actualites.service.ts

@@ -1,76 +1,78 @@
 import sanitizeHtml from 'sanitize-html'
 
-import { ActualitesRaw, ArticleJson } from 'interfaces/actualites'
+import {
+  ActualitesRaw,
+  ArticleJson,
+  EtiquetteArticle,
+  TagJson,
+} from 'interfaces/actualites'
 import { StructureConseiller } from 'interfaces/conseiller'
 import { fetchJson } from 'utils/httpClient'
 
 export async function getActualites(
   structure: StructureConseiller
 ): Promise<ActualitesRaw | undefined> {
-  const url = ((): string => {
-    switch (structure) {
-      case StructureConseiller.MILO:
-        return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_MILO_LINK as string
-      case StructureConseiller.POLE_EMPLOI:
-        return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_FT_CEJ_LINK as string
-      case StructureConseiller.POLE_EMPLOI_BRSA:
-        return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_FR_BRSA_LINK as string
-      case StructureConseiller.POLE_EMPLOI_AIJ:
-        return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_FR_AIJ_LINK as string
-      case StructureConseiller.CONSEIL_DEPT:
-        return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_CD_LINK as string
-      case StructureConseiller.AVENIR_PRO:
-        return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_AVENIR_PRO_LINK as string
-    }
-  })()
+  const urlTags = process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_TAGS
+  const urlActualites = getUrlActualites(structure)
+  if (!urlTags || !urlActualites) return
 
-  if (!url) return
+  const [{ content: tagsJson }, { content: articlesJson }]: [
+    { content: TagJson[] },
+    { content: ArticleJson[] },
+  ] = await Promise.all([fetchJson(urlTags), fetchJson(urlActualites)])
 
-  const articlesJson = await fetchJson(url)
-
-  const derniereDateModification = articlesJson.content.reduce(
+  const derniereDateModification = articlesJson.reduce(
     (latest: string, item: ArticleJson) => {
       return new Date(item.modified) > new Date(latest) ? item.modified : latest
     },
-    articlesJson.content[0].modified
+    articlesJson[0].modified
   )
 
   return {
-    articles: articlesJson.content.map((article: ArticleJson) => ({
+    articles: articlesJson.map((article: ArticleJson) => ({
       id: article.id,
-      contenu: formaterArticle(article),
       titre: article.title.rendered,
+      etiquette: extraireEtiquettes(article, tagsJson),
+      contenu: extraireContenuAssaini(article),
     })),
     dateDerniereModification: derniereDateModification,
   }
 }
 
-function formaterArticle({ content }: ArticleJson): string {
-  const contentAssaini = sanitizeHtml(content.rendered, {
+function extraireContenuAssaini({ content }: ArticleJson): string {
+  return sanitizeHtml(content.rendered, {
     disallowedTagsMode: 'recursiveEscape',
     allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
   })
-
-  return ajouterTagCategorie(contentAssaini)
 }
 
-function ajouterTagCategorie(str: string): string {
-  const codeRegex = /<code\b[^>]*>([\s\S]*?)<\/code>/
-
-  const baliseCode = str.match(codeRegex)
-  if (!baliseCode) return str
-  const baliseCodeContent = baliseCode[1]
-
-  const tags = baliseCodeContent.split(',').map((word) => word.trim())
-
-  const categories = tags
-    .map((tag) => {
-      return `<span className='flex items-center w-fit text-s-medium text-additional_3 px-3 bg-additional_3_lighten whitespace-nowrap rounded-full'>${tag}</span>`
-    })
-    .join('')
+function extraireEtiquettes(
+  article: ArticleJson,
+  tagsJson: TagJson[]
+): EtiquetteArticle[] {
+  return article.tags
+    .map((idTag) => tagsJson.find(({ id }) => id === idTag))
+    .filter((tag) => tag !== undefined)
+    .map((tag) => ({
+      id: tag!.id,
+      nom: tag!.name,
+      couleur: tag!.description,
+    }))
+}
 
-  return str.replace(
-    /<pre\b[^>]*>[\s\S]*?<\/pre>/g,
-    `<div className='flex gap-2'>${categories}</div>`
-  )
+function getUrlActualites(structure: StructureConseiller) {
+  switch (structure) {
+    case StructureConseiller.MILO:
+      return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_MILO_LINK as string
+    case StructureConseiller.POLE_EMPLOI:
+      return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_FT_CEJ_LINK as string
+    case StructureConseiller.POLE_EMPLOI_BRSA:
+      return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_FR_BRSA_LINK as string
+    case StructureConseiller.POLE_EMPLOI_AIJ:
+      return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_FR_AIJ_LINK as string
+    case StructureConseiller.CONSEIL_DEPT:
+      return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_CD_LINK as string
+    case StructureConseiller.AVENIR_PRO:
+      return process.env.NEXT_PUBLIC_WORDPRESS_ACTUS_AVENIR_PRO_LINK as string
+  }
 }