Boyadjie · Boyadjie · Feb 17, 2024 · Nov 20, 2023 · Dec 19, 2023 · Dec 19, 2023
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,8 @@
-import './globals.css';
-
 import {Kodchasan, Nunito} from 'next/font/google';
 
+import './globals.css';
+
+import {LevelChoiceProvider} from '../src/context/LevelChoiceContext';
 import Head from './Head';
 
 const kodchasan = Kodchasan({
@@ -20,7 +21,9 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html lang="fr" className={`${kodchasan.variable} ${nunito.variable}`}>
       <Head />
-      <body>{children}</body>
+      <body>
+        <LevelChoiceProvider>{children}</LevelChoiceProvider>
+      </body>
     </html>
   );
 }
diff --git a/app/levelSelection/page.tsx b/app/levelSelection/page.tsx
@@ -0,0 +1,10 @@
+import LevelChoice from '../../src/components/LevelChoice/levelChoice';
+
+export default function DisplayPopup() {
+  return (
+    <div>
+      <h1>Choisi ton niveaux de connaissance et tes objectif de voyage !</h1>
+      <LevelChoice />
+    </div>
+  );
+}
diff --git a/src/components/Form/Inputs/InputManager.tsx b/src/components/Form/Inputs/InputManager.tsx
@@ -4,7 +4,7 @@ import {Textarea} from './InputTextArea';
 
 type InputType = 'text' | 'email' | 'textarea';
 
-export interface InputsProps {
+export type InputsProps = {
   label: string;
   name: string;
   placeholder?: string;
@@ -13,9 +13,9 @@ export interface InputsProps {
   onChange: (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => void;
-}
+};
 
-interface InputManagerProps {
+type InputManagerProps = {
   type: InputType;
   label: string;
   name: string;
@@ -25,7 +25,7 @@ interface InputManagerProps {
   onChange: (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => void;
-}
+};
 
 export const Input: React.FC<InputManagerProps> = ({
   label,

diff --git a/src/components/Form/Inputs/InputRadio.tsx b/src/components/Form/Inputs/InputRadio.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+type InputRadioType = {
+  label: string;
+  name: string;
+  value: string;
+  handleChange: React.ChangeEventHandler<HTMLInputElement>;
+  defaultValue?: string;
+};
+
+export const InputRadio: React.FC<InputRadioType> = ({
+  label,
+  name,
+  value,
+  handleChange,
+  defaultValue,
+}) => {
+  return (
+    <label>
+      <input
+        type="radio"
+        name={name}
+        value={value}
+        onChange={handleChange}
+        checked={defaultValue === value}
+      />
+      {label}
+    </label>
+  );
+};
diff --git a/src/components/LevelChoice/LevelButton/LevelChoiceButton.module.css b/src/components/LevelChoice/LevelButton/LevelChoiceButton.module.css
@@ -0,0 +1,10 @@
+.button {
+  background-color: #4caf50; /* Green */
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+}
diff --git a/src/components/LevelChoice/LevelButton/LevelChoiceButton.tsx b/src/components/LevelChoice/LevelButton/LevelChoiceButton.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import styles from './LevelChoiceButton.module.css';
+
+type LevelChoiceButtonProps = {
+  onClick: () => void;
+};
+
+const LevelChoiceButton: React.FC<LevelChoiceButtonProps> = ({onClick}) => {
+  return (
+    <button className={styles.button} onClick={onClick}>
+      Choisissez votre niveau
+    </button>
+  );
+};
+
+export default LevelChoiceButton;
diff --git a/src/components/LevelChoice/LevelPopup/LevelPopup.module.css b/src/components/LevelChoice/LevelPopup/LevelPopup.module.css
@@ -0,0 +1,31 @@
+.popup {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  right: 0;
+  width: max-content;
+  padding: 20px;
+  background: white;
+  border: 2px solid rgba(128, 128, 128, 0.1);
+  border-radius: 15px;
+
+  .closeButton {
+    display: block;
+    margin-left: auto;
+  }
+
+  form {
+    div {
+      label {
+        display: inline-block;
+        padding: 10px 20px;
+      }
+    }
+
+    input[type='submit'] {
+      display: block;
+      width: 100%;
+      font-size: medium;
+    }
+  }
+}
diff --git a/src/components/LevelChoice/LevelPopup/LevelPopup.tsx b/src/components/LevelChoice/LevelPopup/LevelPopup.tsx
@@ -0,0 +1,65 @@
+import React, {useState} from 'react';
+
+import {Goal, Level, useLevelChoice} from '../../../context/LevelChoiceContext';
+import {InputRadio} from '../../Form/Inputs/InputRadio';
+import styles from './LevelPopup.module.css';
+
+const LEVELS: Level[] = ['Débutant', 'Intermédiaire', 'Avancé'];
+const GOALS: Goal[] = ['Tourisme', 'Long-séjour', 'Expatrié'];
+
+type LevelChoicePopupProps = {
+  handleClose: () => void;
+};
+
+const LevelChoicePopup: React.FC<LevelChoicePopupProps> = ({handleClose}) => {
+  const {setLevelChoice, setGoalChoice, levelChoice, goalChoice} =
+    useLevelChoice();
+  const [levelSelected, setLevelSelected] = useState<Level>(levelChoice);
+  const [goalSelected, setGoalSelected] = useState<Goal>(goalChoice);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setLevelChoice(levelSelected);
+    setGoalChoice(goalSelected);
+    handleClose();
+  };
+
+  return (
+    <div className={styles.popup}>
+      <button className={styles.closeButton} onClick={handleClose}>
+        Fermer
+      </button>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <h2>Niveau de connaissances</h2>
+          {LEVELS.map((value) => (
+            <InputRadio
+              key={value}
+              label={value}
+              name="level"
+              value={value}
+              defaultValue={levelSelected}
+              handleChange={() => setLevelSelected(value)}
+            />
+          ))}
+        </div>
+        <div>
+          <h2>Objectif de voyage</h2>
+          {GOALS.map((value) => (
+            <InputRadio
+              key={value}
+              label={value}
+              name="goal"
+              value={value}
+              defaultValue={goalSelected}
+              handleChange={() => setGoalSelected(value)}
+            />
+          ))}
+        </div>
+        <input type="submit" value="Valider" />
+      </form>
+    </div>
+  );
+};
+
+export default LevelChoicePopup;
diff --git a/src/components/LevelChoice/levelChoice.tsx b/src/components/LevelChoice/levelChoice.tsx
@@ -0,0 +1,29 @@
+'use client';
+import React, {useState} from 'react';
+
+import {useLevelChoice} from '../../context/LevelChoiceContext';
+import LevelChoiceButton from './LevelButton/LevelChoiceButton';
+import LevelChoicePopup from './LevelPopup/LevelPopup';
+
+const LevelChoice = () => {
+  const {levelChoice, goalChoice} = useLevelChoice();
+  const [isOn, setIsOn] = useState(false);
+  const handleClick = () => {
+    setIsOn(true);
+  };
+
+  const handleClose = () => {
+    setIsOn(false);
+  };
+
+  return (
+    <div>
+      <h3>Connaissances : {levelChoice}</h3>
+      <h3>Objectif: {goalChoice}</h3>
+      <LevelChoiceButton onClick={handleClick} />
+      {isOn && <LevelChoicePopup handleClose={handleClose} />}
+    </div>
+  );
+};
+
+export default LevelChoice;
diff --git a/src/context/LevelChoiceContext.tsx b/src/context/LevelChoiceContext.tsx
@@ -0,0 +1,33 @@
+'use client';
+import React, {createContext, useState, useContext} from 'react';
+
+export type Level = 'Débutant' | 'Intermédiaire' | 'Avancé';
+export type Goal = 'Tourisme' | 'Long-séjour' | 'Expatrié';
+
+export const LevelChoiceContext = createContext({
+  levelChoice: 'Débutant' as Level,
+  goalChoice: 'Tourisme' as Goal,
+  setLevelChoice: (levelChoice: Level) => {},
+  setGoalChoice: (goalChoice: Goal) => {},
+});
+
+export const useLevelChoice = () => useContext(LevelChoiceContext);
+
+type LevelChoiceProviderProps = {
+  children: React.ReactNode;
+};
+
+export const LevelChoiceProvider: React.FC<LevelChoiceProviderProps> = ({
+  children,
+}) => {
+  const [levelChoice, setLevelChoice] = useState<Level>('Débutant'); // Specify the type as Level
+  const [goalChoice, setGoalChoice] = useState<Goal>('Tourisme'); // Specify the type as Goal
+
+  return (
+    <LevelChoiceContext.Provider
+      value={{levelChoice, setLevelChoice, goalChoice, setGoalChoice}}
+    >
+      {children}
+    </LevelChoiceContext.Provider>
+  );
+};