setup switch between locales

packages/main/utils/i18n.ts

@@ -9,10 +9,11 @@ export type I18nEvents = {
 }
 
 export class I18n extends (EventEmitter as new () => TypedEmitter<I18nEvents>) {
-  private _locale: Locales = 'en'
+  private _locale: Locales
 
   constructor(private readonly _rootStore: RootStore) {
     super()
+    this._locale = _rootStore.appStore.language as Locales
     observe(this._rootStore.appStore, 'language', () => {
       this._locale = this._rootStore.appStore.language as Locales
       this.emit('localeChanged', this._locale)

packages/main/windows/game-window.ts

@@ -105,7 +105,7 @@ export class GameWindow extends (EventEmitter as new () => TypedEmitter<GameWind
 
       this._win.loadURL(url)
       if (process.env.NODE_ENV === 'development') {
-        // this._win.webContents.openDevTools({ mode: 'detach' })
+        this._win.webContents.openDevTools({ mode: 'detach' })
       }
     }
     // Make all links open with the browser, not with the application

packages/renderer/src/App.tsx

@@ -2,9 +2,9 @@ import { ThemeProvider } from '@mui/material/styles'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { setupRootStore, RootStore, RootStoreProvider } from './store'
 import { Navigator } from './navigation'
-import { GameContextProvider } from './providers'
+import { GameContextProvider, LocalProvider } from './providers'
 import { GameContext } from '@lindo/shared'
-import { TypesafeI18n } from '@lindo/i18n'
+import { Locales, TypesafeI18n } from '@lindo/i18n'
 import { CssBaseline } from '@mui/material'
 import { darkTheme, lightTheme } from './themes'
 
@@ -45,14 +45,16 @@ export const App = () => {
   if (!rootStore || !gameContext) return null
 
   return (
-    <TypesafeI18n locale='en'>
+    <TypesafeI18n locale={rootStore.appStore.language as Locales}>
       <RootStoreProvider value={rootStore}>
-        <GameContextProvider value={gameContext}>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <Navigator />
-          </ThemeProvider>
-        </GameContextProvider>
+        <LocalProvider>
+          <GameContextProvider value={gameContext}>
+            <ThemeProvider theme={theme}>
+              <CssBaseline />
+              <Navigator />
+            </ThemeProvider>
+          </GameContextProvider>
+        </LocalProvider>
       </RootStoreProvider>
     </TypesafeI18n>
   )

packages/renderer/src/providers/index.ts

@@ -1 +1,2 @@
 export * from './game-context'
+export * from './local'

packages/renderer/src/providers/local.tsx

@@ -0,0 +1,27 @@
+import { useStores } from '@/store'
+import { Locales, useI18nContext } from '@lindo/i18n'
+import { reaction } from 'mobx'
+import React, { ReactNode, useEffect } from 'react'
+
+export interface LocalProviderProps {
+  children: ReactNode
+}
+
+export const LocalProvider = ({ children }: LocalProviderProps) => {
+  const { locale, setLocale } = useI18nContext()
+  const { appStore } = useStores()
+
+  useEffect(() => {
+    return reaction(
+      () => appStore.language,
+      (language) => {
+        if (language !== locale) {
+          setLocale(language as Locales)
+        }
+      },
+      { fireImmediately: true }
+    )
+  })
+
+  return <>{children}</>
+}