Merge pull request #23 from valihna/lienMenus

Affichage des menus en fonction de si l'enfant a été sage ou pas
valihna · Nov 24, 2023 · 2f774ae · 2f774ae
2 parents 242b6fd + cfe9460
commit 2f774ae
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 15 deletions.
diff --git a/frontend/components/Contact/FormulaireContact.jsx b/frontend/components/Contact/FormulaireContact.jsx
@@ -1,10 +1,15 @@
 /* eslint-disable react/no-unescaped-entities */
-import { useState } from "react";
+import { useState, useContext } from "react";
+import CalendrierContext from "../../src/context/calendrierContext";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import "./contactForm.css";
 
 function FormulaireContact() {
+
+  const {sageOuPas, setSageOuPas} = useContext(CalendrierContext);
+  console.log(sageOuPas);
+
   const [formValue, setFormValue] = useState({
     name: "",
     question: "",
@@ -19,11 +24,13 @@ function FormulaireContact() {
 
   const toastQuestion = () => {
     if (question === "oui") {
-      toast.success("Tu as été sage, tu seras gâté pour Noël !", {
+      setSageOuPas("oui");
+      toast.success("Tu as été sage, tu peux choisir un cadeau dans le calendrier !", {
         position: toast.POSITION.TOP_RIGHT,
       });
     } else {
-      toast.error("Tu n'as pas été sage, le Père Noël s'en souviendra !", {
+      setSageOuPas("non");
+      toast.error("Tu n'as pas été sage, tu dois me battre au morpion si tu veux un cadeau !", {
         position: toast.POSITION.TOP_RIGHT,
       });
     }

diff --git a/frontend/components/Nav/Nav.jsx b/frontend/components/Nav/Nav.jsx
@@ -1,19 +1,24 @@
 import { Link } from "react-router-dom";
+import { useContext } from "react";
+import CalendrierContext from "../../src/context/calendrierContext";
 import "./Nav.css";
 
+
 function Nav() {
+  const {sageOuPas} = useContext(CalendrierContext);
+
   return (
     <nav>
       <ul>
-        <Link to="/">
+        {sageOuPas === "oui" && <Link to="/calendrier" >
           <li>Calendrier</li>
-        </Link>
-        <Link to="/Contact">
+        </Link>}
+        <Link to="/">
           <li>Messagerie du Père Noël</li>
         </Link>
-        <Link to="/Morpion">
+        {sageOuPas === "non" && <Link to="/morpion">
           <li>Jeu</li>
-        </Link>
+        </Link>}
       </ul>
     </nav>
   );

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,11 +1,22 @@
 import { Outlet } from "react-router-dom";
+import { useState } from "react";
 import Nav from "../components/Nav/Nav.jsx";
 import Footer from "../components/Footer/Footer.jsx";
+import CalendrierContext from "../src/context/calendrierContext.jsx";
+
 function App() {
+  const [sageOuPas, setSageOuPas] = useState("");
+
   return (
     <div>
-      <Nav />
-      <Outlet />
+      <CalendrierContext.Provider
+      value={{
+        sageOuPas,
+        setSageOuPas,
+      }}>
+        <Nav />
+        <Outlet />
+      </CalendrierContext.Provider>
       <Footer />
     </div>
   );

diff --git a/frontend/src/context/calendrierContext.jsx b/frontend/src/context/calendrierContext.jsx
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const CalendrierContext = createContext();
+
+export default CalendrierContext;
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -9,22 +9,23 @@ import Calendrier from "../components/Calendrier/Calendrier.jsx";
 import Contact from "../pages/Contact.jsx";
 import Surprise from "../pages/Surprise.jsx";
 
+
 const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
     children: [
       {
-        path: "/Morpion",
-        element: <Morpion />,
+        path: "/",
+        element: <Contact />,
       },
       {
-        path: "/",
+        path: "/calendrier",
         element: <Calendrier />,
       },
       {
-        path: "/contact",
-        element: <Contact />,
+        path: "/morpion",
+        element: <Morpion />,
       },
       {
         path: "*",