fix(layout): fix faq items order + fix css load to avoid flickering on page load

cypress/integration/faq.spec.js

@@ -1,14 +1,11 @@
 describe("FAQ", () => {
   it("shoudl display FAQ", () => {
     cy.visit("/faq");
-    cy.get("h1").should(
-      "have.text",
-      "Information sur le dispositif MonPsy"
-    );
+    cy.get("h1").should("have.text", "Information sur le dispositif MonPsy");
 
     cy.get("h2").should(
       "have.text",
-      "Présentation du dispositif MonPsyMédecinPatientPsychologues"
+      "Présentation du dispositif MonPsyPatientPsychologueMédecin"
     );
   });
 });

src/components/Footer.tsx

@@ -20,6 +20,14 @@ const FooterDescription = () => (
     >
       Voir le code source
     </a>
+    . Illustrations de{" "}
+    <a
+      href="https://storyset.com/work"
+      target="_blank"
+      rel="noreferrer nofollow noopener"
+    >
+      Freepik Storyset
+    </a>
     .
   </>
 );

src/components/HeadTag.tsx

@@ -13,7 +13,7 @@ const HeadTag = ({ title, description, image }: HeadProps) => (
     <meta property="og:title" content={title} />
 
     <meta name="description" content={description} />
-    <meta name="og:description" content={description} />
+    <meta property="og:description" content={description} />
     <link rel="shortcut icon" href="/favicon.ico" />
 
     <meta property="og:type" content="website" />

src/pages/_app.tsx

@@ -1,3 +1,4 @@
+import "@gouvfr/dsfr/dist/dsfr/dsfr.min.css";
 import "../css/style.css";
 
 import { SkiplinkItem, Skiplinks } from "@dataesr/react-dsfr";

src/pages/faq.tsx

@@ -24,20 +24,20 @@ const Page = () => {
             buttonLabel="Dans cette rubrique"
             className="fr-sidemenu--sticky fr-col-md-4 fr-col-sm-12 fr-mb-3w"
           >
-            {Object.keys(items).map(
-              (key) =>
-                items[key].title && (
-                  <SideMenuLink href={"/faq#" + key}>
-                    {items[key].title}
+            {items.map(
+              (item) =>
+                item.title && (
+                  <SideMenuLink href={"/faq#" + item.key}>
+                    {item.title}
                   </SideMenuLink>
                 )
             )}
           </SideMenu>
           <Col n="md-8 sm-12">
-            {Object.keys(items).map((key) => (
-              <div id={key} key={key}>
-                {items[key].title && <h2>{items[key].title}</h2>}
-                {items[key].sections.map((section) => (
+            {items.map((item) => (
+              <div id={item.key} key={item.key}>
+                {item.title && <h2>{item.title}</h2>}
+                {item.sections.map((section) => (
                   <div key={section.title}>
                     {section.title && <h3>{section.title}</h3>}
                     <Accordion className="fr-mb-4w">

src/pages/mentions-legales.tsx

@@ -57,7 +57,13 @@ const Page = () => {
               <br />
               Pour en savoir plus sur la politique d’accessibilité numérique de
               l’État&nbsp;:
-              http://references.modernisation.gouv.fr/accessibilite-numerique
+              <a
+                href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                numerique.gouv.fr/publications/rgaa-accessibilite
+              </a>
             </p>
           </div>
           <div className="fr-mt-3w">

src/services/faq/doctor/exchange.ts

@@ -2,7 +2,7 @@
 export default [
   {
     answer:
-      "<p>Pour permettre une prise en charge coordonnée, vous transmettez au patient, avec le courrier d’adressage, un courrier d'accompagnement destiné au psychologue (modèle disponible ici).  Ce document, que le psychologue conserve, a vocation à l’informer du contexte, des éléments cliniques et des motifs de l’adressage, éventuellement des scores ou d’échelles.</p><p>En retour, le psychologue vous informe du nombre de séances prévues avec le patient. </p>",
+      "<p>Pour permettre une prise en charge coordonnée, vous transmettez au patient, avec le courrier d’adressage, un courrier d'accompagnement destiné au psychologue (modèle disponible <a href='/documents/Courrier_d_adressage.docx' target='_blank'>ici</a>).  Ce document, que le psychologue conserve, a vocation à l’informer du contexte, des éléments cliniques et des motifs de l’adressage, éventuellement des scores ou d’échelles.</p><p>En retour, le psychologue vous informe du nombre de séances prévues avec le patient. </p>",
     question:
       "Quels échanges en début de prise en charge avec le psychologue ?",
   },

src/services/faq/doctor/practices.ts

@@ -8,7 +8,7 @@ export default [
   },
   {
     answer:
-      "<p>Avant d’orienter un patient vers un accompagnement psychologique, vous devez réévaluer les traitements médicamenteux de votre patient et en particulier ses traitements psychotropes. <p>La Haute Autorité de Santé (HAS) met par exemple en ligne des outils d’aide à la déprescritption des benzodiazépines et médicaments apparentés :<ul><li>Fiche de bon usage des médicaments : <a href='https://www.has-sante.fr/upload/docs/application/pdf/2018-07/fiche_bum_benzodiazepines_anxiete_cd_27062018.pdf' target='_blank'>Quelle place pour les benzodiazépines dans l’anxiété ?</a></li><li>Recommandations de bonne pratique : <a href='https://www.has-sante.fr/jcms/c_601509/modalites-d-arret-des-benzodiazepines-et-medicaments-apparentes-chez-le-patient-age' target='_blank'>Modalités d'arrêt des benzodiazépines et médicaments apparentés chez le patient âgé</a></li></ul></p><p><b>A savoir</b> : si votre patient est éligible, mais qu’il est dans une des situations suivantes : <ul><li>traitement par antidépresseurs depuis plus de 3 mois </li><li>traitement par hypnotiques ou benzodiazépines depuis plus d’un mois</li><li>traitement par un autre psychotrope</li><li>patients bipolaires ou borderline sous antiépileptiques </li></ul></p><p>Avant de l’orienter vers un accompagnement psychologique, vous sollicitez l’avis d’un psychiatre. Celui-ci formalise un avis quant à la prise en charge la plus adaptée pour votre patient et réévalue la pertinence des psychotropes prescrits.</p>",
+      "<p>Avant d’orienter un patient vers un accompagnement psychologique, vous devez réévaluer les traitements médicamenteux de votre patient et en particulier ses traitements psychotropes. <p>La Haute Autorité de Santé (HAS) met par exemple en ligne des outils d’aide à la déprescription des benzodiazépines et médicaments apparentés :<ul><li>Fiche de bon usage des médicaments : <a href='https://www.has-sante.fr/upload/docs/application/pdf/2018-07/fiche_bum_benzodiazepines_anxiete_cd_27062018.pdf' target='_blank'>Quelle place pour les benzodiazépines dans l’anxiété ?</a></li><li>Recommandations de bonne pratique : <a href='https://www.has-sante.fr/jcms/c_601509/modalites-d-arret-des-benzodiazepines-et-medicaments-apparentes-chez-le-patient-age' target='_blank'>Modalités d'arrêt des benzodiazépines et médicaments apparentés chez le patient âgé</a></li></ul></p><p><b>A savoir</b> : si votre patient est éligible, mais qu’il est dans une des situations suivantes : <ul><li>traitement par antidépresseurs depuis plus de 3 mois </li><li>traitement par hypnotiques ou benzodiazépines depuis plus d’un mois</li><li>traitement par un autre psychotrope</li><li>patients bipolaires ou borderline sous antiépileptiques </li></ul></p><p>Avant de l’orienter vers un accompagnement psychologique, vous sollicitez l’avis d’un psychiatre. Celui-ci formalise un avis quant à la prise en charge la plus adaptée pour votre patient et réévalue la pertinence des psychotropes prescrits.</p>",
     question:
       "L’orientation vers un accompagnement psychologique est-elle l’occasion de réévaluer la pertinence des traitements médicamenteux ?",
   },

src/services/faq/faq.ts

@@ -17,25 +17,16 @@ import ending from "./psy/ending";
 import patient from "./psy/patient";
 import registration from "./psy/registration";
 
-const items = {
-  general: {
+const items = [
+  {
+    key: "general",
     sections: [{ faq: general }],
     title: "Présentation du dispositif MonPsy",
   },
-  medecin: {
+  {
+    key: "patient",
     sections: [
-      { faq: orientation, title: "Orientation du patient" },
-      { faq: practices, title: "Bonnes pratiques" },
-      {
-        faq: exchange,
-        title: "Echanges avec le psychologue et suite de la prise en charge",
-      },
-    ],
-    title: "Médecin",
-  },
-  patient: {
-    sections: [
-      { faq: eligibility, title: "Eligibilité" },
+      { faq: eligibility, title: "Éligibilité" },
       { faq: begin, title: "Début du parcours" },
       { faq: accompaniment, title: "Accompagnement par le psychologue" },
       { faq: reimbursment, title: "Remboursement" },
@@ -46,7 +37,8 @@ const items = {
     ],
     title: "Patient",
   },
-  psychologue: {
+  {
+    key: "psychologue",
     sections: [
       { faq: eligibility, title: "Éligibilité" },
       { faq: registration, title: "Candidature" },
@@ -62,8 +54,20 @@ const items = {
       { faq: billing, title: "Facturation & remboursement" },
       { faq: ending, title: "Retrait du dispositif" },
     ],
-    title: "Psychologues",
+    title: "Psychologue",
+  },
+  {
+    key: "medecin",
+    sections: [
+      { faq: orientation, title: "Orientation du patient" },
+      { faq: practices, title: "Bonnes pratiques" },
+      {
+        faq: exchange,
+        title: "Echanges avec le psychologue et suite de la prise en charge",
+      },
+    ],
+    title: "Médecin",
   },
-};
+];
 
 export default items;