feat(faq): add tab to FAQ page (#72)

SocialGouv · Feb 25, 2022 · 5c2d020 · 5c2d020
1 parent 23a7ed9
commit 5c2d020
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 46 deletions.
diff --git a/cypress/integration/faq.spec.js b/cypress/integration/faq.spec.js
@@ -1,11 +1,20 @@
 describe("FAQ", () => {
-  it("shoudl display FAQ", () => {
+  it("should display FAQ with default tab", () => {
     cy.visit("/faq");
     cy.get("h1").should("have.text", "Information sur le dispositif MonPsy");
 
-    cy.get("h2").should(
+    cy.get("h2").should("have.text", "PrésentationPatientPsychologueMédecin");
+    cy.get('[role="tab"][aria-selected="true"]').should(
       "have.text",
-      "Présentation du dispositif MonPsyPatientPsychologueMédecin"
+      "Présentation"
+    );
+  });
+  it("should open tab according to query param", () => {
+    cy.visit("/faq?tab=psychologue");
+
+    cy.get('[role="tab"][aria-selected="true"]').should(
+      "have.text",
+      "Psychologue"
     );
   });
 });
diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx
@@ -3,15 +3,27 @@ import {
   AccordionItem,
   Col,
   Row,
-  SideMenu,
-  SideMenuLink,
+  Tab,
+  Tabs,
 } from "@dataesr/react-dsfr";
 import Head from "next/head";
-import React from "react";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
 
 import items from "../services/faq/faq";
 
 const Page = () => {
+  const router = useRouter();
+
+  const [tabIndex, setTabIndex] = useState(-1);
+
+  useEffect(() => {
+    if (!router.isReady) return;
+    const tab = router.query.tab;
+    const index = items.findIndex((item) => item.key === tab);
+    setTabIndex(index >= 0 ? index : 0);
+  }, [router.isReady, router.query.tab]);
+
   return (
     <>
       <Head>
@@ -20,46 +32,38 @@ const Page = () => {
       <div className="fr-container fr-my-6w">
         <h1>Information sur le dispositif MonPsy</h1>
         <Row spacing="mt-3w">
-          <SideMenu
-            buttonLabel="Dans cette rubrique"
-            className="fr-sidemenu--sticky fr-col-md-4 fr-col-sm-12 fr-mb-3w"
-          >
-            {items.map(
-              (item) =>
-                item.title && (
-                  <SideMenuLink href={"/faq#" + item.key}>
-                    {item.title}
-                  </SideMenuLink>
-                )
-            )}
-          </SideMenu>
-          <Col n="md-8 sm-12">
-            {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">
-                      {section.faq.map(({ question, answer }) => (
-                        <AccordionItem title={question} key={question}>
-                          <div
-                            // eslint-disable-next-line react/no-danger
-                            dangerouslySetInnerHTML={{
-                              __html: answer,
-                            }}
-                          />
-                        </AccordionItem>
-                      ))}
-                    </Accordion>
-                  </div>
+          <Col>
+            {tabIndex >= 0 && (
+              <Tabs defaultActiveTab={tabIndex}>
+                {items.map((item) => (
+                  <Tab label={item.title} key={item.key}>
+                    {item.title && <h2>{item.title}</h2>}
+                    {item.sections.map((section, i) => (
+                      <div key={i + item.title}>
+                        {section.title && <h3>{section.title}</h3>}
+                        <Accordion className="fr-mb-4w">
+                          {section.faq.map(({ question, answer }) => (
+                            <AccordionItem title={question} key={question}>
+                              <div
+                                // eslint-disable-next-line react/no-danger
+                                dangerouslySetInnerHTML={{
+                                  __html: answer,
+                                }}
+                              />
+                            </AccordionItem>
+                          ))}
+                        </Accordion>
+                      </div>
+                    ))}
+                  </Tab>
                 ))}
-              </div>
-            ))}
+              </Tabs>
+            )}
           </Col>
         </Row>
       </div>
     </>
   );
 };
+
 export default Page;
diff --git a/src/pages/medecins.tsx b/src/pages/medecins.tsx
@@ -302,7 +302,7 @@ const Page = () => {
               <p className="fr-text--lead">
                 J’ai des questions&nbsp;?{" "}
                 <a
-                  href="/faq#medecin"
+                  href="/faq?tab=medecin"
                   className="fr-link fr-fi-question-line fr-link--icon-left"
                 >
                   Je consulte la FAQ

diff --git a/src/pages/patients.tsx b/src/pages/patients.tsx
@@ -266,7 +266,7 @@ const Page = () => {
               <p className="fr-text--lead">
                 J’ai des questions&nbsp;?{" "}
                 <a
-                  href="/faq#patient"
+                  href="/faq?tab=patient"
                   className="fr-link fr-fi-question-line fr-link--icon-left"
                 >
                   Je consulte la FAQ
@@ -408,7 +408,7 @@ const Page = () => {
               <p className="fr-text--lead">
                 J’ai des questions&nbsp;?{" "}
                 <a
-                  href="/faq#patient"
+                  href="/faq?tab=patient"
                   className="fr-link fr-fi-question-line fr-link--icon-left"
                 >
                   Je consulte la FAQ

diff --git a/src/pages/psychologues.tsx b/src/pages/psychologues.tsx
@@ -476,7 +476,7 @@ const Page = () => {
               <p className="fr-text--lead">
                 J’ai des questions&nbsp;?{" "}
                 <a
-                  href="/faq#psychologue"
+                  href="/faq?tab=psychologue"
                   className="fr-link fr-fi-question-line fr-link--icon-left"
                 >
                   Je consulte la FAQ

diff --git a/src/services/faq/faq.ts b/src/services/faq/faq.ts
@@ -21,7 +21,7 @@ const items = [
   {
     key: "general",
     sections: [{ faq: general }],
-    title: "Présentation du dispositif MonPsy",
+    title: "Présentation",
   },
   {
     key: "patient",