From d19bf07382ec9ca28bd22db2a372c98ff6e3f116 Mon Sep 17 00:00:00 2001
From: Andres <ruznietoa@gmail.com>
Date: Tue, 17 Oct 2023 20:24:02 +0200
Subject: [PATCH] feat: i18n persistence on logout

---
 .../components/SettingsComponent/SettingsComponent.jsx |  2 +-
 frontend/src/i18n.js                                   | 10 +++++++---
 frontend/src/index.jsx                                 |  6 ++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/SettingsComponent/SettingsComponent.jsx b/frontend/src/components/SettingsComponent/SettingsComponent.jsx
index 12aabe4..0fe4c13 100644
--- a/frontend/src/components/SettingsComponent/SettingsComponent.jsx
+++ b/frontend/src/components/SettingsComponent/SettingsComponent.jsx
@@ -32,7 +32,7 @@ function SettingsComponent() {
         <Grid item>
           <Select native value={i18n.language} onChange={handleChange()}>
             <option value={"en"}>English</option>
-            <option value={"es-ES"}>Spanish</option>
+            <option value={"es-ES"}>Español</option>
           </Select>
         </Grid>
       </AccordionDetails>
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
index 5770d51..f1967ac 100644
--- a/frontend/src/i18n.js
+++ b/frontend/src/i18n.js
@@ -11,15 +11,19 @@ i18n
   .use(Backend)
   .init({
     compatibilityJSON: "v4",
-    lng: userLanguage || "en",
+    //lng: "en",
     fallbackLng: "en",
-    debug: false,
+    detection: {
+      order: ["path", "cookie", "localStorage", "htmlTag"],
+      caches: ["localStorage", "cookie"], // cache user language on
+    },
+    debug: true,
     //keySeparator: false, // we use content as keys
     interpolation: {
       escapeValue: true,
     },
     react: {
-      useSuspense: false,
+      useSuspense: true,
     },
     supportedLngs: ["en", "es-ES"],
     backend: {
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index e66ad55..e79267e 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -1,6 +1,6 @@
 import "./index.css";
 
-import React from "react";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 
 import App from "./App";
@@ -9,7 +9,9 @@ import "./i18n";
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Suspense fallback={<div>Loading...</div>}>
+      <App />
+    </Suspense>
   </React.StrictMode>,
   document.getElementById("root")
 );