update: - The language change button has been updated in terms of UX …

frontend/package.json

@@ -3,12 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "axios": "^0.22.0",
     "eslint": "^7.11.0",
     "i18next": "^21.9.0",
     "i18next-browser-languagedetector": "^6.1.5",
     "i18next-http-backend": "^1.4.1",
+    "install": "^0.13.0",
     "leaflet": "^1.7.1",
+    "npm": "^8.19.2",
     "rc-drawer": "^4.4.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

frontend/src/assets/data/Items.data.ts

@@ -3,6 +3,7 @@ import home from "../img/home.png"
 import conseils from "../img/conseils.png"
 import listes from "../img/liste.png"
 import language from "../img/language.png"
+import report from "../img/alert.png"
 
 export const ITEMS = [
     {
@@ -25,9 +26,4 @@ export const ITEMS = [
         name: LANGUAGE.home.signalerPanne,
         link: "/add-alert",
     },
-    {
-        icon: language,
-        name: LANGUAGE.home.language,
-        link: "",
-    },
 ];

frontend/src/assets/translation/en/en.json

@@ -4,31 +4,43 @@
     "this_is_an_example": "This is an example",
     "please_enter_name": "Please enter your name",
     "loading": "loading...",
-    "panel":"Electrical failure",
-    "reportOutage" :"Report a power outage",
-    "accept" : "accept",
-    "notification" : "This site uses cookies to make your visit to our site as pleasant as possible. We use your location to show you reports for your area.",
-    "info" : "Official Information on Network Operator Interference",
-    "title" : "Where is the current power outage? Network operators map",
-    "search" : "Enter the region",
-    "home" : "Home page",
-    "info1" : "Advice and information",
-    "view" : "List view",
-    "city" : "Enter your neighborhood",
-    "empty" : "No alerts for this region",
-    "location" : "show on map",
-    "notAvailable" : "This content is not available at the moment",
-    "warning" : "This problem usually stems from the owner only sharing it with a small group of people, changing who can see it, or deleting it.",
-    "homePage" : "Go to the home page",
-    "title1" : "Power outage, now what?",
-    "contents" : "A power outage is a sudden and rare event. However, in the event of a power outage, it is advisable to remain calm at first. In addition, you must pay attention to a few elements of your household and notify us of the power outage.",
-    "link" : "Quick links:",
-    "adviceContent" : "Is it a power outage that only affects individual devices? Have your neighbors also had a power outage? It is possible that only one fuse has blown and you can fix the problem yourself.",
-    "adviceContent1" : "As soon as the power is restored, in most cases there is relief first. But there are some things you need to keep in mind even after a power outage.",
-    "adviceContent2" : "In the event of a power outage, the most important thing is to restore power. For most people affected by a power outage, this can be achieved through switching measures in the power grid. The network operator often does not know the exact reason for the power failure until some time later.",
-    "adviceTitle2"  : "What to do in the event of a power outage",
-    "adviceTitle3"  : "Behavior after a power failure",
-    "adviceTitle4"  : "Reasons for a power outage"
-
-  }
-
+    "panel": "Electrical failure",
+    "reportOutage": "Report a power outage",
+    "accept": "accept",
+    "notification": "This site uses cookies to make your visit to our site as pleasant as possible. We use your location to show you reports for your area.",
+    "info": "Official Information on Network Operator Interference",
+    "title": "Where is the current power outage? Network operators map",
+    "search": "Enter the region",
+    "home": "Home page",
+    "info1": "Advice and information",
+    "view": "List view",
+    "city": "Enter your neighborhood",
+    "empty": "No alerts for this region",
+    "location": "show on map",
+    "notAvailable": "This content is not available at the moment",
+    "warning": "This problem usually stems from the owner only sharing it with a small group of people, changing who can see it, or deleting it.",
+    "homePage": "Go to the home page",
+    "title1": "Power outage, now what?",
+    "contents": "A power outage is a sudden and rare event. However, in the event of a power outage, it is advisable to remain calm at first. In addition, you must pay attention to a few elements of your household and notify us of the power outage.",
+    "link": "Quick links:",
+    "adviceContent": "Is it a power outage that only affects individual devices? Have your neighbors also had a power outage? It is possible that only one fuse has blown and you can fix the problem yourself.",
+    "adviceContent1": "As soon as the power is restored, in most cases there is relief first. But there are some things you need to keep in mind even after a power outage.",
+    "adviceContent2": "In the event of a power outage, the most important thing is to restore power. For most people affected by a power outage, this can be achieved through switching measures in the power grid. The network operator often does not know the exact reason for the power failure until some time later.",
+    "adviceTitle2": "What to do in the event of a power outage",
+    "adviceTitle3": "Behavior after a power failure",
+    "adviceTitle4": "Reasons for a power outage",
+    "drawer_menu_home": "Home page",
+    "drawer_menu_info": "Tips and information",
+    "drawer_menu_list_view": "List view",
+    "drawer_menu_failure": "Electrical failure",
+    "drawer_menu_report": "Report a power failure",
+    "drawer_menu_lang": "FR / EN",
+    "home_report_description": "Add an outage to the network manager map",
+    "home_report_title": "Where is the current power failure? Network Operators Map",
+    "report_field_type": "Type of outage",
+    "report_field_region": "Region",
+    "report_field_neighborhood": "Enter your neighborhood",
+    "report_field_description": "Describe your failure",
+    "report_btn_submit": "Submit alert",
+    "global_label_select_placeholder": "Select an option"
+}

frontend/src/assets/translation/fr/fr.json

@@ -3,31 +3,44 @@
     "hello_welcome_to_react": "Bonjour, Bienvenue chez React",
     "this_is_an_example": "Ceci est un exemple",
     "please_enter_name": "Veuillez saisir le nom",
-    "loading" : "Chargement.....",
-    "panel":"Panne électrique",
-    "reportOutage" :"Signaler une panne de courant",
-    "accept" : "J'accepte",
-    "notification" : "Ce site utilise des cookies pour rendre votre visite sur notre site aussi agréable que possible. Nous utilisons votre emplacement pour vous montrer les rapports de votre région.",
-    "info" : "Informations officielles sur Interférences des opérateurs de réseau",
-    "title" : "Où est la panne de courant actuelle? Carte des opérateurs de réseau",
-    "search" : "Entrez la region",
-    "home" : "Page d'accueil",
-    "info1" : "Conseils et informations",
-    "view" :  "Vue liste",
-    "city" : "Entrer votre quartier",
-    "empty" : "Aucune alerte pour cette region",
-    "location" : "afficher sur la carte",
-    "notAvailable" : "Ce contenu n’est pas disponible pour le moment",
-    "warning" : "Ce problème vient généralement du fait que le propriétaire ne l’a partagé qu’avec un petit groupe de personnes, a modifié qui pouvait le voir ou l’a supprimé.",
-    "homePage" : "Acceder a la page d'accueil",
-    "title1" : "Panne de courant, et maintenant ? ",
-    "contents" : "Une panne de courant est un événement soudain et rare. Cependant, en cas de panne de courant, il est conseillé de rester calme dans un premier temps. De plus, vous devez faire attention à quelques éléments de votre foyer et nous signaler la panne de courant. ",
-    "link" : "Liens rapides:",
-    "adviceContent" : "S'agit-il d'une panne de courant qui n'affecte que les appareils individuels ? Vos voisins ont également eu une coupure de courant ? Il est possible qu'un seul fusible ait grillé et que vous puissiez résoudre le problème vous-même.",
-    "adviceContent1" : "Dès que le courant est rétabli, dans la plupart des cas, il y a d'abord un soulagement. Mais il y a certaines choses que vous devez garder à l'esprit même après une panne de courant.",
-    "adviceContent2" : "En cas de panne de courant, le plus important est de rétablir l'alimentation. Pour la plupart des personnes touchées par une panne de courant, cela peut être réalisé au moyen de mesures de commutation dans le réseau électrique. L'opérateur du réseau ne connaît souvent la raison exacte de la panne de courant qu'un certain temps plus tard.",
-    "advicetitle2" : "Que faire en cas de panne de courant ",
-    "advicetitle3" : "Comportement après une panne de courant ",
-    "advicetitle4" : "Raisons d'une panne de courant "
-  }
-
+    "loading": "Chargement.....",
+    "panel": "Panne électrique",
+    "reportOutage": "Signaler une panne de courant",
+    "accept": "J'accepte",
+    "notification": "Ce site utilise des cookies pour rendre votre visite sur notre site aussi agréable que possible. Nous utilisons votre emplacement pour vous montrer les rapports de votre région.",
+    "info": "Informations officielles sur Interférences des opérateurs de réseau",
+    "title": "Où est la panne de courant actuelle? Carte des opérateurs de réseau",
+    "search": "Entrez la region",
+    "home": "Page d'accueil",
+    "info1": "Conseils et informations",
+    "view": "Vue liste",
+    "city": "Entrer votre quartier",
+    "empty": "Aucune alerte pour cette region",
+    "location": "afficher sur la carte",
+    "notAvailable": "Ce contenu n’est pas disponible pour le moment",
+    "warning": "Ce problème vient généralement du fait que le propriétaire ne l’a partagé qu’avec un petit groupe de personnes, a modifié qui pouvait le voir ou l’a supprimé.",
+    "homePage": "Acceder a la page d'accueil",
+    "title1": "Panne de courant, et maintenant ? ",
+    "contents": "Une panne de courant est un événement soudain et rare. Cependant, en cas de panne de courant, il est conseillé de rester calme dans un premier temps. De plus, vous devez faire attention à quelques éléments de votre foyer et nous signaler la panne de courant. ",
+    "link": "Liens rapides:",
+    "adviceContent": "S'agit-il d'une panne de courant qui n'affecte que les appareils individuels ? Vos voisins ont également eu une coupure de courant ? Il est possible qu'un seul fusible ait grillé et que vous puissiez résoudre le problème vous-même.",
+    "adviceContent1": "Dès que le courant est rétabli, dans la plupart des cas, il y a d'abord un soulagement. Mais il y a certaines choses que vous devez garder à l'esprit même après une panne de courant.",
+    "adviceContent2": "En cas de panne de courant, le plus important est de rétablir l'alimentation. Pour la plupart des personnes touchées par une panne de courant, cela peut être réalisé au moyen de mesures de commutation dans le réseau électrique. L'opérateur du réseau ne connaît souvent la raison exacte de la panne de courant qu'un certain temps plus tard.",
+    "advicetitle2": "Que faire en cas de panne de courant ",
+    "advicetitle3": "Comportement après une panne de courant ",
+    "advicetitle4": "Raisons d'une panne de courant ",
+    "drawer_menu_home": "Page d'acceuil",
+    "drawer_menu_info": "Conseils et informations",
+    "drawer_menu_list_view": "Vue liste",
+    "drawer_menu_failure": "Panne électrique",
+    "drawer_menu_report": "Signaler une panne de courant",
+    "drawer_menu_lang": "FR / EN",
+    "home_report_description": "Ajouter une panne sur la carte des gestionnaires de réseau",
+    "home_report_title": "Où est la panne de courant actuelle? Carte des opérateurs de réseau",
+    "report_field_type": "Type de panne",
+    "report_field_region": "Région",
+    "report_field_neighborhood": "Entrez votre quartier",
+    "report_field_description": "Decrivez votre panne",
+    "report_btn_submit": "Soummettre l'alerte",
+    "global_label_select_placeholder": "Selectionner une option"
+}

frontend/src/components/drawer/Drawer.component.tsx

@@ -1,13 +1,27 @@
-import React, { useState } from "react";
-import { ITEMS } from "../../assets/data/Items.data";
+import React, {useState} from "react";
+import {ITEMS} from "../../assets/data/Items.data";
 import Drawer from "react-modern-drawer";
 import menu from "../../assets/img/menu.png";
+import {useTranslation} from "react-i18next";
+import {Box} from "@mui/material";
+import {useHistory} from "react-router-dom";
 
 export const MyDrawer = (props: any) => {
+    const {t, i18n} = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const toggleDrawer = () => {
+        console.log("problem herer");
         setIsOpen((prevState) => !prevState);
     };
+
+    const router = useHistory();
+
+    const changeLanguage = () => {
+        i18n.changeLanguage(i18n.language == "en" ? "fr" : "en").then();
+    };
+
+
+
     return (
         <div
             className={`site__drawer p-2 flex items-center justify-${props.justify}`}
@@ -21,35 +35,62 @@ export const MyDrawer = (props: any) => {
             </button>
             <Drawer
                 size={350}
-                style={{ backgroundColor: "#FF4F00" }}
+                style={{backgroundColor: "#FF4F00"}}
                 open={isOpen}
                 onClose={toggleDrawer}
                 direction="left"
             >
                 <div className="p-4 md:p-10">
                     {ITEMS.map((i: any) => (
                         <div
+                            onClick={() => {
+                                toggleDrawer();
+                                router.push(i.link)
+                            }}
                             key={i?.name}
-                            style={{ borderColor: "#cecece" }}
+                            style={{borderColor: "#cecece", cursor: "pointer"}}
                             className="drawer__item border-b items-center flex pt-6 md:pt-10 pb-4"
                         >
                             <img
                                 alt="icon"
                                 src={i.icon}
                                 className="w-7 h-auto"
                             />
-                            <a
+                            <div
                                 className="pl-4"
                                 style={{
                                     color: "#fefefe",
                                     fontFamily: " 'Varela Round', sans-serif",
                                 }}
-                                href={i.link}
                             >
-                                {i.name}
-                            </a>
+                                {t(i.name)}
+                            </div>
                         </div>
                     ))}
+
+                    <div
+                        onClick={() => {
+                            changeLanguage()
+                        }}
+                        style={{borderColor: "#cecece", cursor: "pointer"}}
+                        className="drawer__item border-b items-center flex pt-6 md:pt-10 pb-4"
+                    >
+                        <img
+                            alt="icon"
+                            src={"/img/language.png"}
+                            className="w-7 h-auto"
+                        />
+                        <Box
+
+                            className="pl-4"
+                            style={{
+                                color: "#fefefe",
+                                fontFamily: " 'Varela Round', sans-serif",
+                            }}
+                        >
+                            {t("drawer_menu_lang")}
+                        </Box>
+                    </div>
                 </div>
             </Drawer>
         </div>

frontend/src/constants/language.ts

@@ -1,14 +1,13 @@
 export const LANGUAGE = {
     home: {
-        home: "Page d'accueil",
-        info: "Conseils et informations",
-        vue: "Vue liste",
-        title: "Où est la panne de courant actuelle? Carte des opérateurs de réseau",
-        panne: "Panne électrique",
-        signalerPanne: "Signaler une panne de courant",
-        language: "FR / EN",
-        signalerDescription:
-            "Ajouter une panne sur la carte des gestionnaires de réseau",
+        home: "drawer_menu_home",
+        info: "drawer_menu_info",
+        vue: "drawer_menu_list_view",
+        title: "home_report_title",
+        panne: "drawer_menu_failure",
+        signalerPanne: "drawer_menu_report",
+        language: "drawer_menu_lang",
+        signalerDescription: "home_report_description",
     },
     homeModal: {
         accept: "J'accepte",

frontend/src/languageSelect.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import {useTranslation} from "react-i18next";
+import {Box} from "@mui/material";
+
+const LanguageSelector = () => {
+
+    const {i18n} = useTranslation();
+    const changeLanguage = () => {
+        i18n.changeLanguage( i18n.language == "en" ? "fr" : "en").then();
+    };
+
+    return (
+        <Box
+            onClick={()=>{
+                changeLanguage()
+            }}
+            sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column",
+                width: 32,
+                height: 32,
+                borderRadius: '50%',
+                padding: 2,
+                backgroundColor: "#fff",
+                cursor: "pointer",
+                color: "#000"
+            }}
+        >
+            {i18n.language.toUpperCase()}
+        </Box>
+    );
+};
+export default LanguageSelector;