osscameroon · godsakani · Aug 11, 2022 · Aug 11, 2022 · Aug 11, 2022 · Aug 11, 2022
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,11 +16,15 @@
     "@typescript-eslint/parser": "^5.8.0",
     "axios": "^0.22.0",
     "eslint": "^7.11.0",
+    "i18next": "^21.9.0",
+    "i18next-browser-languagedetector": "^6.1.5",
+    "i18next-http-backend": "^1.4.1",
     "leaflet": "^1.7.1",
     "rc-drawer": "^4.4.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hooks-use-modal": "^2.1.0",
+    "react-i18next": "^11.18.3",
     "react-leaflet": "^3.2.2",
     "react-modern-drawer": "^0.1.1",
     "react-router-dom": "^5.3.0",

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -18,7 +18,6 @@
 <body style="background: #262626;">
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
-  <!-- <link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' rel='stylesheet'> -->
   <link rel="stylesheet" href="leaflet.css">
 </body>
 

diff --git a/frontend/src/assets/data/Items.data.ts b/frontend/src/assets/data/Items.data.ts
@@ -20,9 +20,4 @@ export const ITEMS = [
     name: LANGUAGE.home.vue,
     link: "/lists"
   },
-  {
-    icon: language,
-    name: LANGUAGE.home.language,
-    link: ""
-  },
 ]
diff --git a/frontend/src/assets/data/Links.data.ts b/frontend/src/assets/data/Links.data.ts
@@ -1,20 +1,22 @@
+import i18n from "../../i18n";
+
 export const LINKS = [
   {
-    title: "Que faire en cas de panne de courant ",
+    title: i18n.t("adviceTitle2"),
     content: [
-      "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.",
+      i18n.t("adviceContent"),
     ]
   },
   {
-    title: "Comportement après une panne de courant ",
+    title:i18n.t( "adviceTitle3"),
     content: [
-      "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.",
+      i18n.t("adviceContent1"),
     ]
   },
   {
-    title: "Raisons d'une panne de courant ",
+    title: i18n.t("adviceTitle4"),
     content: [
-      "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.",
+      i18n.t("adviceContent2"),
     ]
   }
 ]
diff --git a/frontend/src/assets/translation/en/en.json b/frontend/src/assets/translation/en/en.json
@@ -0,0 +1,34 @@
+{
+    "select_language": "Select Language",
+    "hello_welcome_to_react": "Hello, Welcome to React",
+    "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"
+
+  }
+
diff --git a/frontend/src/assets/translation/fr/fr.json b/frontend/src/assets/translation/fr/fr.json
@@ -0,0 +1,33 @@
+{
+    "select_language": "Choisir la langue",
+    "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 "
+  }
+
diff --git a/frontend/src/components/cityDetail/CityDetail.component.tsx b/frontend/src/components/cityDetail/CityDetail.component.tsx
@@ -9,8 +9,10 @@ import home from "../../assets/img/home.png"
 import { LANGUAGE } from "../../constants/language";
 import { Link } from "react-router-dom";
 import StreetMap from "../../pages/streetMap/StreetMap.page";
+import { useTranslation } from "react-i18next";
 
 export const CityDetail = (props: any) => {
+    const { t } = useTranslation();
         return (
         <div className="site__detail border mt-4 p-4 w-full">
             <div className="site__detail-item flex items-center">
@@ -64,8 +66,8 @@ export const CityDetail = (props: any) => {
                         }&long=${props.long}`}>
               <button className="px-4 text-white">
                 <p className="flex px-2 py-1" >
-                    <img src={home} alt={LANGUAGE.button.location} className="w-5 h-auto flex items-center justify-center"/>
-                    {LANGUAGE.button.location} 
+                    <img src={home} alt={t("location")} className="w-5 h-auto flex items-center justify-center"/>
+                    {t("location")} 
                 </p>
                 </button>
                 </Link>

diff --git a/frontend/src/components/notFound/NotFound.component.tsx b/frontend/src/components/notFound/NotFound.component.tsx
@@ -1,23 +1,24 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import error from "../../assets/img/error.png";
-import { LANGUAGE } from "../../constants/language";
 import { MyText } from "../myText/MyText.component";
+import { useTranslation } from "react-i18next";
 
 export const NotFound = () => {
+    const { t } = useTranslation();
     return (
         <div className="site__notFound flex justify-center items-center h-screen flex-col">
             <img src={error} alt="error" className="h-1/4 w-auto" />
             <div className="w-full md:w-1/3 py-6">
                 <MyText
                     variant="title"
-                    myText={LANGUAGE.alert.notavailable}
+                    myText={t("notAvailable")}
                     myTextColor="text-ind"
                     myTextAlign="text-center"
                 />
                 <MyText
                     variant="normal"
-                    myText={LANGUAGE.alert.warning}
+                    myText={t("warning")}
                     myTextColor="text-ind"
                     myTextAlign="text-center"
                 />
@@ -28,7 +29,7 @@ export const NotFound = () => {
                         className="text-gray-300"
                         style={{ fontFamily: " 'Varela Round', sans-serif" }}
                     >
-                        {LANGUAGE.notfound.homePage}
+                        {t("homePage")}
                     </p>
                 </Link>
             </div>

diff --git a/frontend/src/components/search/Search.component.tsx b/frontend/src/components/search/Search.component.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import search from "../../assets/img/search.png";
-import { LANGUAGE } from "../../constants/language";
 
 export const Search = (props: any) => {
     return (

diff --git a/frontend/src/constants/language.ts b/frontend/src/constants/language.ts
@@ -1,12 +1,14 @@
+import i18n from "../i18n";
+
 export const LANGUAGE = {
+
     home: {
-        home: "Page d'accueil",
+        home: i18n.t("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',
     },
     homeModal: {
         accept: "J'accepte"

diff --git a/frontend/src/constants/navigations/App.navigation.tsx b/frontend/src/constants/navigations/App.navigation.tsx
@@ -4,6 +4,8 @@ import Conseils from "../../pages/advices/Advices";
 import Detail from "../../pages/detail/Detail.page";
 import Home from "../../pages/home/Home.pages";
 import List from "../../pages/list/List.pages";
+import LanguageSelector from "../../languageSelect";
+import "../../i18n"
 
 export const AppNavigation = () => {
     return (
@@ -13,6 +15,7 @@ export const AppNavigation = () => {
                 <Route exact path="/conseils" component={Conseils} />
                 <Route exact path="/lists" component={List} />
                 <Route exact path="/details/:region" component={Detail} />
+                <Route exact path="/language" component={LanguageSelector} />
             </Switch>
         </BrowserRouter>
     );

diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
@@ -0,0 +1,38 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// Importing translation files
+
+import translationEN from "./assets/translation/en/en.json";
+import translationFR from "./assets/translation/fr/fr.json";
+
+//Creating object with the variables of imported translation files
+const resources = {
+    en: {
+        translation: translationEN,
+    },
+    fr: {
+        translation: translationFR,
+    },
+};
+
+//i18N Initialization
+
+i18n.use(initReactI18next).init({
+    resources,
+    lng: "en", //default language
+    keySeparator: false,
+    interpolation: {
+        escapeValue: false,
+    },
+});
+i18n.init({
+    // ... other config
+
+    react: {
+      // Turn off the use of React Suspense
+      useSuspense: false
+    }
+  });
+
+export default i18n;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -4,21 +4,22 @@ import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 import { AppNavigation } from "./constants/navigations/App.navigation";
 import { RecoilRoot } from "recoil";
-import { LANGUAGE } from "./constants/language";
+import './i18n';
+import i18n from "./i18n";
 
 ReactDOM.render(
     <React.StrictMode>
-        <Suspense
+        <React.Suspense
             fallback={
                 <p className="text-gray-300 flex justify-center items-center pt-40 md:pt-52">
-                    {LANGUAGE.loading}
+                   {i18n.t('loading')}
                 </p>
             }
         >
             <RecoilRoot>
                 <AppNavigation />
             </RecoilRoot>
-        </Suspense>
+        </React.Suspense>
     </React.StrictMode>,
     document.getElementById("root")
 );

diff --git a/frontend/src/languageSelect.js b/frontend/src/languageSelect.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const LanguageSelector = () => {
+
+  const { i18n } = useTranslation();
+
+  const changeLanguage = (event) => {
+    i18n.changeLanguage(event.target.value);
+  };
+  return (
+    <div onChange={changeLanguage}>
+      <input type="radio" value="en" name="language" defaultChecked /> English
+      <input type="radio" value="fr" name="language" /> French
+    </div>
+  );
+};
+export default LanguageSelector;
diff --git a/frontend/src/pages/advices/Advices.tsx b/frontend/src/pages/advices/Advices.tsx
@@ -3,9 +3,10 @@ import { LINKS } from "../../assets/data/Links.data";
 import { Accordion } from "../../components/accordion/Accordion.component";
 import { MyDrawer } from "../../components/drawer/Drawer.component";
 import { MyText } from "../../components/myText/MyText.component";
-import { LANGUAGE } from "../../constants/language";
+import { useTranslation } from "react-i18next";
 
 const Advices = () => {
+    const {t} = useTranslation();
     return (
         <div className="site__conseils bg-cover w-auto h-screen">
             <div className="px-4 md:px-20 pt-5 md:pt-0">
@@ -14,19 +15,19 @@ const Advices = () => {
                     <main className="site__main pt-8 px-4 md:px-40">
                         <MyText
                             variant="title"
-                            myText={LANGUAGE.info.title}
+                            myText={t('title1')}
                             myTextColor="text-white"
                         />
                         <div className="w-full md:w-3/4 py-4">
                             <MyText
                                 variant="normal"
-                                myText={LANGUAGE.info.content}
+                                myText={t('contents')}
                                 myTextColor="text-white"
                             />
                         </div>
                         <MyText
                             variant="normal"
-                            myText={LANGUAGE.info.link}
+                            myText={t('link')}
                             myTextColor="text-ind"
                         />
                         {LINKS.map((i: any) => (