From 4b59a21cacc36d3c05e68d22379538c0f32550c9 Mon Sep 17 00:00:00 2001
From: Ansh <anshnanda10@gmail.com>
Date: Fri, 24 Nov 2023 12:35:25 -0800
Subject: [PATCH] Allow dynamic locale imports for web (#1971)

* allow dynamic locale imports for web

* remove unnecessary file
---
 src/locale/i18n.ts     |  1 -
 src/locale/i18n.web.ts | 29 +++++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/locale/i18n.web.ts

diff --git a/src/locale/i18n.ts b/src/locale/i18n.ts
index c64a914f..73fa785e 100644
--- a/src/locale/i18n.ts
+++ b/src/locale/i18n.ts
@@ -18,7 +18,6 @@ export const defaultLocale = 'en'
  * @param locale any locale string
  */
 export async function dynamicActivate(locale: string) {
-  console.log('dynamicActivate', locale)
   if (locale === 'en') {
     i18n.loadAndActivate({locale, messages: messagesEn})
     return
diff --git a/src/locale/i18n.web.ts b/src/locale/i18n.web.ts
new file mode 100644
index 00000000..0ea69d1a
--- /dev/null
+++ b/src/locale/i18n.web.ts
@@ -0,0 +1,29 @@
+import {useLanguagePrefs} from '#/state/preferences'
+import {i18n} from '@lingui/core'
+import {useEffect} from 'react'
+
+export const locales = {
+  en: 'English',
+  cs: 'Česky',
+  fr: 'Français',
+  hi: 'हिंदी',
+  es: 'Español',
+}
+export const defaultLocale = 'en'
+
+/**
+ * We do a dynamic import of just the catalog that we need
+ * @param locale any locale string
+ */
+export async function dynamicActivate(locale: string) {
+  const {messages} = await import(`./locales/${locale}/messages`)
+  i18n.load(locale, messages)
+  i18n.activate(locale)
+}
+
+export async function useLocaleLanguage() {
+  const {appLanguage} = useLanguagePrefs()
+  useEffect(() => {
+    dynamicActivate(appLanguage)
+  }, [appLanguage])
+}