From 5c2d020e6e12a0879878db39372c2857da3f6eba Mon Sep 17 00:00:00 2001
From: Caroline <4971715+carolineBda@users.noreply.github.com>
Date: Fri, 25 Feb 2022 09:01:46 +0100
Subject: [PATCH] feat(faq): add tab to FAQ page (#72)
---
cypress/integration/faq.spec.js | 15 +++++--
src/pages/faq.tsx | 80 +++++++++++++++++----------------
src/pages/medecins.tsx | 2 +-
src/pages/patients.tsx | 4 +-
src/pages/psychologues.tsx | 2 +-
src/services/faq/faq.ts | 2 +-
6 files changed, 59 insertions(+), 46 deletions(-)
diff --git a/cypress/integration/faq.spec.js b/cypress/integration/faq.spec.js
index df36e600..746942c0 100644
--- 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
index 754b3f2b..b44685b5 100644
--- 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 (
<>
@@ -20,46 +32,38 @@ const Page = () => {
Information sur le dispositif MonPsy
-
- {items.map(
- (item) =>
- item.title && (
-
- {item.title}
-
- )
- )}
-
-
- {items.map((item) => (
-
- {item.title &&
{item.title}
}
- {item.sections.map((section) => (
-
- {section.title &&
{section.title}
}
-
- {section.faq.map(({ question, answer }) => (
-
-
-
- ))}
-
-
+
+ {tabIndex >= 0 && (
+
+ {items.map((item) => (
+
+ {item.title && {item.title}
}
+ {item.sections.map((section, i) => (
+
+ {section.title &&
{section.title}
}
+
+ {section.faq.map(({ question, answer }) => (
+
+
+
+ ))}
+
+
);
};
+
export default Page;
diff --git a/src/pages/medecins.tsx b/src/pages/medecins.tsx
index 12d408b8..23958f8c 100644
--- a/src/pages/medecins.tsx
+++ b/src/pages/medecins.tsx
@@ -302,7 +302,7 @@ const Page = () => {
J’ai des questions ?{" "}
Je consulte la FAQ
diff --git a/src/pages/patients.tsx b/src/pages/patients.tsx
index 8dd31139..0f297f8d 100644
--- a/src/pages/patients.tsx
+++ b/src/pages/patients.tsx
@@ -266,7 +266,7 @@ const Page = () => {
J’ai des questions ?{" "}
Je consulte la FAQ
@@ -408,7 +408,7 @@ const Page = () => {
J’ai des questions ?{" "}
Je consulte la FAQ
diff --git a/src/pages/psychologues.tsx b/src/pages/psychologues.tsx
index 6ac5c2c0..7f853a94 100644
--- a/src/pages/psychologues.tsx
+++ b/src/pages/psychologues.tsx
@@ -476,7 +476,7 @@ const Page = () => {
J’ai des questions ?{" "}
Je consulte la FAQ
diff --git a/src/services/faq/faq.ts b/src/services/faq/faq.ts
index a5290b4c..cbec9729 100644
--- 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",