Spaghetti bowl (#1014)

* fix: activité inconnue () * fix: MultChoice * feat: create dedicated pages for modifications
annuaire-entreprises-data-gouv-fr · Apr 24, 2024 · cdc24f9 · cdc24f9
1 parent eabf512
commit cdc24f9
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 105 deletions.
diff --git a/app/(header-default)/faq/[slug]/page.tsx b/app/(header-default)/faq/[slug]/page.tsx
@@ -4,22 +4,18 @@ import ButtonLink from '#components-ui/button';
 import TextWrapper from '#components-ui/text-wrapper';
 import { RenderMarkdownServerOnly } from '#components/markdown';
 import { allFaqArticles, getFaqArticle } from '#models/article/faq';
-import { InternalError } from '#models/exceptions';
+import { AppRouterProps } from '#utils/server-side-helper/app/extract-params';
+import { redirectFAQPageNotFound } from '#utils/server-side-helper/app/redirect-faq-not-found';
 
 type IParams = {
   slug: string;
 };
 
-export default async function FAQArticle({ params }: { params: IParams }) {
-  const slug = params.slug;
-  const article = getFaqArticle(slug);
+export default async function FAQArticle(props: AppRouterProps) {
+  const article = getFaqArticle(props.params.slug);
   if (!article) {
-    throw new InternalError({
-      message: 'Article not found',
-      context: params,
-    });
+    return redirectFAQPageNotFound(props.params.slug);
   }
-
   return (
     <>
       <TextWrapper>
@@ -69,17 +65,10 @@ export async function generateStaticParams(): Promise<Array<IParams>> {
     });
 }
 
-export const generateMetadata = function ({
-  params,
-}: {
-  params: IParams;
-}): Metadata {
-  const article = getFaqArticle(params.slug);
+export const generateMetadata = function (props: AppRouterProps): Metadata {
+  const article = getFaqArticle(props.params.slug);
   if (!article) {
-    throw new InternalError({
-      message: 'Article not found',
-      context: params,
-    });
+    return redirectFAQPageNotFound(props.params.slug);
   }
   return {
     title: article.seo.title || article.title,

diff --git a/app/(header-default)/faq/modifier/[slug]/page.tsx b/app/(header-default)/faq/modifier/[slug]/page.tsx
@@ -0,0 +1,96 @@
+import { Metadata } from 'next';
+import Breadcrumb from '#components-ui/breadcrumb';
+import ButtonLink from '#components-ui/button';
+import TextWrapper from '#components-ui/text-wrapper';
+import {
+  allDataToModify,
+  getDataToModify,
+} from '#models/administrations/data-to-modify';
+import { AppRouterProps } from '#utils/server-side-helper/app/extract-params';
+import { redirectFAQPageNotFound } from '#utils/server-side-helper/app/redirect-faq-not-found';
+
+type IParams = {
+  slug: string;
+};
+
+export default async function FAQArticle(props: AppRouterProps) {
+  const dataToModify = getDataToModify(props.params.slug);
+  if (!dataToModify) {
+    return redirectFAQPageNotFound(props.params.slug);
+  }
+  return (
+    <>
+      <TextWrapper>
+        <Breadcrumb
+          links={[
+            { href: '/faq', label: 'Questions fréquentes' },
+            { href: '/faq', label: 'Comment modifier ces informations' },
+
+            { href: '', label: dataToModify.label },
+          ]}
+        />
+        <h1>
+          Comment modifier : “<strong>{dataToModify.label}</strong>” ?
+        </h1>
+        <p></p>
+        <p>Ces informations proviennent de :</p>
+        <ul>
+          <li>
+            Source de la donnée :{' '}
+            <a href={dataToModify.datagouvLink}>{dataToModify.dataSource}</a>
+          </li>
+          <li>
+            Service responsable :{' '}
+            <a href={dataToModify.site}>{dataToModify.long}</a>.
+          </li>
+        </ul>
+        {dataToModify.form ? (
+          <>
+            <p>Cette administration propose une démarche en ligne&nbsp;:</p>
+            <ButtonLink to={dataToModify.form}>
+              Accéder à la démarche en ligne
+            </ButtonLink>
+          </>
+        ) : (
+          <>
+            <br />
+            <ButtonLink to={dataToModify.contact}>
+              Contacter le service ({dataToModify.short})
+            </ButtonLink>
+          </>
+        )}
+
+        <h2>Vous ne trouvez pas votre réponse ?</h2>
+        <div className="layout-left">
+          <ButtonLink to="/faq" alt small>
+            Consultez notre FAQ
+          </ButtonLink>
+        </div>
+      </TextWrapper>
+    </>
+  );
+}
+
+export async function generateStaticParams(): Promise<Array<IParams>> {
+  return allDataToModify
+    .filter(({ slug }) => !!slug)
+    .map(({ slug }) => {
+      return {
+        slug,
+      };
+    });
+}
+
+export const generateMetadata = function (props: AppRouterProps): Metadata {
+  const dataToModify = getDataToModify(props.params.slug);
+  if (!dataToModify) {
+    return redirectFAQPageNotFound(props.params.slug);
+  }
+  return {
+    title: dataToModify.label,
+    robots: 'index, follow',
+    alternates: {
+      canonical: `https://annuaire-entreprises.data.gouv.fr/faq/modifier/${dataToModify.slug}`,
+    },
+  };
+};
diff --git a/app/(header-default)/faq/page.tsx b/app/(header-default)/faq/page.tsx
@@ -2,10 +2,12 @@ import { Metadata } from 'next';
 import TextWrapper from '#components-ui/text-wrapper';
 import parseMarkdownSync from '#components/markdown/parse-markdown';
 import StructuredDataFAQ from '#components/structured-data/faq';
+import { allDataToModify } from '#models/administrations/data-to-modify';
 import { allFaqArticles } from '#models/article/faq';
 
 export default function FAQPage() {
   const articles = allFaqArticles;
+
   return (
     <>
       <StructuredDataFAQ
@@ -23,6 +25,14 @@ export default function FAQPage() {
             </li>
           ))}
         </ul>
+        <h2>Comment modifier les informations d’une entreprise ?</h2>
+        <ul>
+          {allDataToModify.map(({ label, slug }) => (
+            <li key={slug}>
+              <a href={`/faq/modifier/${slug}`}>{label}</a>
+            </li>
+          ))}
+        </ul>
       </TextWrapper>
     </>
   );

diff --git a/app/(header-default)/faq/parcours/_components/parcours-questions.tsx b/app/(header-default)/faq/parcours/_components/parcours-questions.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import { useRef, useState } from 'react';
 import { MultiChoice } from '#components-ui/multi-choice';
 import Question, { EQuestionType } from '#components/faq-parcours/question';

diff --git a/components-ui/multi-choice/index.tsx b/components-ui/multi-choice/index.tsx
@@ -1,12 +1,13 @@
 'use client';
 
+import { ChangeEventHandler } from 'react';
 import styles from './style.module.css';
 
 export type IProps = {
   values: {
     label: string;
     value?: string;
-    onClick?: Function;
+    onClick?: ChangeEventHandler<HTMLInputElement>;
     href?: string;
     checked?: boolean;
   }[];
@@ -60,9 +61,9 @@ export const MultiChoice: React.FC<IProps> = ({
                 name={name}
                 value={value}
                 required={required}
-                //@ts-ignore
-                onChange={!!onClick ? onClick : () => null}
-                defaultChecked={checked}
+                onChange={!!onClick ? onClick : undefined}
+                checked={!!onClick ? checked : undefined}
+                defaultChecked={!!onClick ? undefined : checked}
                 tabIndex={-1}
               />
               <label

diff --git a/components/faq-parcours/question.tsx b/components/faq-parcours/question.tsx
@@ -2,8 +2,7 @@ import { PropsWithChildren, useEffect, useRef, useState } from 'react';
 import ButtonLink from '#components-ui/button';
 import { MultiChoice } from '#components-ui/multi-choice';
 import TextWrapper from '#components-ui/text-wrapper';
-import MatomoEvent from '#components/matomo-event';
-import { allData } from '#models/administrations';
+import { allDataToModify } from '#models/administrations/data-to-modify';
 import { IFaqArticle } from '#models/article/faq';
 import constants from '#models/constants';
 export enum EQuestionType {
@@ -114,7 +113,7 @@ export default function Question({
           </p>
           <MultiChoice
             idPrefix="modification"
-            values={allData
+            values={allDataToModify
               .filter((data) => {
                 if (userType === 'agent' || userType === 'all') {
                   return true;
@@ -127,60 +126,11 @@ export default function Question({
               })
               .map((data) => {
                 return {
-                  onClick: () => selectDataToModify(data),
-                  checked: data.label === dataToModify.label,
+                  href: `/faq/modifier/${data.slug}`,
                   label: data.label,
                 };
               })}
           />
-          {dataToModify && (
-            <Answer>
-              <span ref={bottomRef} />
-              <MatomoEvent
-                category="parcours:modification"
-                action={userType}
-                name={dataToModify.label}
-              />
-              Comment modifier les informations suivantes ?
-              <p>
-                “<strong>{dataToModify.label}</strong>”
-              </p>
-              <p>Ces informations proviennent de :</p>
-              <ul>
-                <li>
-                  Source de la donnée :{' '}
-                  <a href={dataToModify.datagouvLink}>
-                    {dataToModify.dataSource}
-                  </a>
-                </li>
-                <li>
-                  Service responsable :{' '}
-                  <a href={dataToModify.site}>{dataToModify.long}</a>.
-                </li>
-              </ul>
-              {dataToModify.form ? (
-                <>
-                  <p>
-                    Cette administration propose une démarche en ligne&nbsp;:
-                  </p>
-                  <div className="layout-center">
-                    <ButtonLink to={dataToModify.form}>
-                      Accéder à la démarche en ligne
-                    </ButtonLink>
-                  </div>
-                </>
-              ) : (
-                <>
-                  <br />
-                  <div className="layout-center">
-                    <ButtonLink to={dataToModify.contact}>
-                      Contacter le service ({dataToModify.short})
-                    </ButtonLink>
-                  </div>
-                </>
-              )}
-            </Answer>
-          )}
         </>
       );
     case EQuestionType.ALL:

diff --git a/components/search-results/advanced-search-tutorial/style.module.css b/components/search-results/advanced-search-tutorial/style.module.css
@@ -34,9 +34,9 @@
 @media only screen and (min-width: 1px) and (max-width: 576px) {
   .advanced-search-tutorial > svg {
     rotate: 225deg;
-    height: 60px;
     position: absolute;
-    top: -40px;
+    height: 70px !important;
+    top: -45px !important;
   }
 
   .advanced-search-tutorial > div {

diff --git a/components/search-results/results-list.tsx b/components/search-results/results-list.tsx
@@ -95,7 +95,8 @@ const ResultItem: React.FC<{
           )}
         </div>
         <div>
-          {result.libelleActivitePrincipale} ({result.activitePrincipale})
+          {result.libelleActivitePrincipale}{' '}
+          {result.activitePrincipale ? `(${result.activitePrincipale})` : null}
         </div>
         <DirigeantsOrElusList
           dirigeantsOrElus={

diff --git a/models/administrations/data-to-modify.ts b/models/administrations/data-to-modify.ts
@@ -0,0 +1,34 @@
+import { slugify } from '#utils/helpers';
+import { administrationsMetaData } from '.';
+
+const loadDataToModify = () => {
+  return Object.values(administrationsMetaData).flatMap(
+    ({ dataSources, contact, site, long, short }) => {
+      return dataSources.flatMap((datasource) => {
+        return (datasource.data || []).map(
+          ({ label, form = '', targets = [] }) => {
+            const slug = slugify(label);
+            return {
+              label: label,
+              slug,
+              dataSource: datasource.label,
+              datagouvLink: datasource.datagouvLink,
+              targets,
+              form,
+              contact,
+              site,
+              long,
+              short,
+            };
+          }
+        );
+      });
+    }
+  );
+};
+
+export const getDataToModify = (slug: string) => {
+  return allDataToModify.find((data) => data.slug === slug);
+};
+
+export const allDataToModify = loadDataToModify();
diff --git a/models/administrations/index.ts b/models/administrations/index.ts
@@ -61,26 +61,4 @@ const loadMonitoringIds = () =>
 
 export const administrationsMetaData: IAdministrationsMetaData = loadMetadata();
 
-export const allData = Object.values(administrationsMetaData).flatMap(
-  ({ dataSources, contact, site, long, short }) => {
-    return dataSources.flatMap((datasource) => {
-      return (datasource.data || []).map(
-        ({ label, form = '', targets = [] }) => {
-          return {
-            label: label,
-            dataSource: datasource.label,
-            datagouvLink: datasource.datagouvLink,
-            targets,
-            form,
-            contact,
-            site,
-            long,
-            short,
-          };
-        }
-      );
-    });
-  }
-);
-
 export const allMonitoringIds = loadMonitoringIds();
diff --git a/utils/helpers/formatting/formatting.ts b/utils/helpers/formatting/formatting.ts
@@ -212,6 +212,20 @@ export const removeSpecialChars = (term = '') => {
     .replace(/^\s+/, '');
 };
 
+/**
+ * Turn a string into a slug for URL use
+ */
+export const slugify = (text: string) =>
+  text
+    .toString()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-');
+
 /**
  * Removes whitespace
  */