can change language

components/layout/LanguageSelector.tsx

@@ -7,6 +7,8 @@ import {
   MenuOptionGroup,
 } from "@chakra-ui/react";
 import { t } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
+import { activateLocale } from "lib/i18n";
 import { useMyTheme } from "lib/useMyTheme";
 import React from "react";
 import { FiGlobe } from "react-icons/fi";
@@ -28,6 +30,7 @@ export const languages = [
 ] as const;
 
 export const LanguageSelector = () => {
+  const { i18n } = useLingui();
   const { secondaryBgColor, textColor } = useMyTheme();
 
   return (
@@ -44,16 +47,14 @@ export const LanguageSelector = () => {
       <MenuList bg={secondaryBgColor} color={textColor}>
         <MenuOptionGroup
           title={t`Choose language`}
-          //value={i18n.language}
-          value="en"
+          value={i18n.locale}
+          onChange={(newLocale) => {
+            window.localStorage.setItem("locale", newLocale as string);
+            activateLocale(newLocale as string);
+          }}
         >
           {languages.map((lang) => (
-            <MenuItemOption
-              key={lang.code}
-              value={lang.code}
-              //onClick={() => i18n.changeLanguage(lang.code)}
-              onClick={() => console.log(lang.code)}
-            >
+            <MenuItemOption key={lang.code} value={lang.code}>
               {lang.name}
             </MenuItemOption>
           ))}

lib/i18n.ts

@@ -6,8 +6,11 @@ i18n.loadLocaleData("en", { plurals: en });
 /**
  * Load messages for requested locale and activate it.
  */
-export async function activate(locale: string) {
-  const { messages } = await import(`locale/${locale}/messages.js`);
-  i18n.load(locale, messages);
+export async function activateLocale(locale: string) {
+  const [{ messages }, { messages: gameMessages }] = await Promise.all([
+    import(`locale/${locale}/messages.js`),
+    import(`locale/${locale}/game.js`),
+  ]);
+  i18n.load(locale, { ...messages, ...gameMessages });
   i18n.activate(locale);
 }

pages/_app.tsx

@@ -3,7 +3,7 @@ import { mode } from "@chakra-ui/theme-tools";
 import { i18n } from "@lingui/core";
 import { I18nProvider } from "@lingui/react";
 import Layout from "components/layout";
-import { activate } from "lib/i18n";
+import { activateLocale } from "lib/i18n";
 import { Provider as NextAuthProvider } from "next-auth/client";
 import GoogleFonts from "next-google-fonts";
 import type { AppProps } from "next/app";
@@ -88,10 +88,16 @@ const extendedTheme = extendTheme({
   },
 });
 
+const setDisplayedLanguage = () => {
+  const browserLanguage = navigator.languages
+    ? navigator.languages[0]
+    : navigator.language || "en";
+  const locale = window.localStorage.getItem("locale") ?? browserLanguage;
+  activateLocale(locale);
+};
+
 const MyApp = (props: AppProps) => {
-  useEffect(() => {
-    activate("en");
-  }, []);
+  useEffect(setDisplayedLanguage, []);
 
   return (
     <>