Merge pull request #475 from DeXter-on-Radix/fix-language-selection

Fix language selection bug
DeXter-on-Radix · Jul 21, 2024 · a86ec8d · a86ec8d
2 parents f322353 + a53f6e1
commit a86ec8d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 36 deletions.
diff --git a/src/app/components/NavBar.tsx b/src/app/components/NavBar.tsx
@@ -232,8 +232,8 @@ function LanguageSelection() {
   let { language } = useAppSelector((state) => state.i18n);
 
   const handleLanguageChange = (lang: string) => {
+    Cookies.set("userLanguage", lang, { expires: 365 }); // Set a cookie for 1 year
     dispatch(i18nSlice.actions.changeLanguage(lang.toLowerCase()));
-    Cookies.set("userLanguage", lang, { expires: 365, partitioned: true }); // Set a cookie for 1 year
   };
 
   return (

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,6 +11,12 @@ import { useEffect, Suspense } from "react";
 import { initializeSubscriptions, unsubscribeAll } from "./subscriptions";
 import { store } from "./state/store";
 
+import { detectBrowserLanguage } from "./utils";
+import { i18nSlice } from "./state/i18nSlice";
+
+import Cookies from "js-cookie";
+import { useAppDispatch, useAppSelector } from "hooks";
+
 export default function RootLayout({
   children,
 }: {
@@ -24,8 +30,6 @@ export default function RootLayout({
     };
   }, []);
 
-  const path = usePathname();
-
   // TODO: after MVP remove "use client", fix all as many Components as possible
   // to be server components for better SSG and SEO
   // and use metadata https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-2-creating-a-root-layout
@@ -36,26 +40,51 @@ export default function RootLayout({
         <title>DeXter</title>
       </head>
       <Provider store={store}>
-        <body>
-          <DexterToaster toastPosition="top-center" />
-          <div
-            data-path={path}
-            className="h-screen prose md:prose-lg lg:prose-xl max-w-none flex flex-col"
-          >
-            <div className="flex flex-col justify-between min-h-[100vh] max-w-[100vw] overflow-x-hidden">
-              <Navbar />
-              {
-                // When using useSearchParams from next/navigation we need to
-                // wrap the outer component in a Suspense boundary, otherwise
-                // the build on cloudflare fails. More info here:
-                // https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
-              }
-              <Suspense>{children}</Suspense>
-              <Footer />
-            </div>
-          </div>
-        </body>
+        <AppBody>{children}</AppBody>
       </Provider>
     </html>
   );
 }
+
+// This subcomponent is needed to initialize browser language for the whole app
+function AppBody({ children }: { children: React.ReactNode }) {
+  const dispatch = useAppDispatch();
+  const path = usePathname();
+
+  // Detect browser langauge
+  const { textContent } = useAppSelector((state) => state.i18n);
+  const supportedLanguages = Object.keys(textContent);
+  useEffect(() => {
+    const userLanguageCookieValue = Cookies.get("userLanguage");
+    if (userLanguageCookieValue) {
+      dispatch(i18nSlice.actions.changeLanguage(userLanguageCookieValue));
+    } else {
+      const browserLang = detectBrowserLanguage();
+      if (supportedLanguages.includes(browserLang)) {
+        dispatch(i18nSlice.actions.changeLanguage(browserLang));
+      }
+    }
+  }, [dispatch]);
+
+  return (
+    <body>
+      <DexterToaster toastPosition="top-center" />
+      <div
+        data-path={path}
+        className="h-screen prose md:prose-lg lg:prose-xl max-w-none flex flex-col"
+      >
+        <div className="flex flex-col justify-between min-h-[100vh] max-w-[100vw] overflow-x-hidden">
+          <Navbar />
+          {
+            // When using useSearchParams from next/navigation we need to
+            // wrap the outer component in a Suspense boundary, otherwise
+            // the build on cloudflare fails. More info here:
+            // https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
+          }
+          <Suspense>{children}</Suspense>
+          <Footer />
+        </div>
+      </div>
+    </body>
+  );
+}
diff --git a/src/app/trade/page.tsx b/src/app/trade/page.tsx
@@ -13,10 +13,6 @@ import { fetchBalances, selectPair } from "state/pairSelectorSlice";
 import { useAppDispatch, useAppSelector } from "../hooks";
 import { fetchAccountHistory } from "../state/accountHistorySlice";
 
-import { detectBrowserLanguage } from "../utils";
-import { i18nSlice } from "../state/i18nSlice";
-
-import Cookies from "js-cookie";
 import { PromoBannerCarousel } from "../components/PromoBannerCarousel";
 
 export default function Trade() {
@@ -46,16 +42,6 @@ export default function Trade() {
     }
   }, [pairsList, dispatch, searchParams]);
 
-  // Detect browser langauge
-  useEffect(() => {
-    const userLanguageCookieValue = Cookies.get("userLanguage");
-    if (userLanguageCookieValue) {
-      dispatch(i18nSlice.actions.changeLanguage(userLanguageCookieValue));
-    } else {
-      dispatch(i18nSlice.actions.changeLanguage(detectBrowserLanguage()));
-    }
-  }, [dispatch]);
-
   useEffect(() => {
     const intervalId = setInterval(() => {
       dispatch(fetchBalances());