Hindi Internationalization (#1914)

* get basic hindi support to work

* get web app language switcher in

* Refactor i18n implementation and remove unused
code

* add missing strings

* add dropdowns and modals missing strings

* complete all hindi translations

* fix merge conflicts

* fix legeacy persisted state

* fix data in RecommendedFeeds

* fix lint

src/locale/i18n.ts

@@ -1,4 +1,8 @@
+import {useLanguagePrefs} from '#/state/preferences'
 import {i18n} from '@lingui/core'
+import {useEffect} from 'react'
+import {messages as messagesEn} from './locales/en/messages'
+import {messages as messagesHi} from './locales/hi/messages'
 
 export const locales = {
   en: 'English',
@@ -14,7 +18,22 @@ export const defaultLocale = 'en'
  * @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)
+  console.log('dynamicActivate', locale)
+  if (locale === 'en') {
+    i18n.loadAndActivate({locale, messages: messagesEn})
+    return
+  } else if (locale === 'hi') {
+    i18n.loadAndActivate({locale, messages: messagesHi})
+    return
+  } else {
+    i18n.loadAndActivate({locale, messages: messagesEn})
+    return
+  }
+}
+
+export async function useLocaleLanguage() {
+  const {appLanguage} = useLanguagePrefs()
+  useEffect(() => {
+    dynamicActivate(appLanguage)
+  }, [appLanguage])
 }

src/locale/i18nProvider.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import {I18nProvider as DefaultI18nProvider} from '@lingui/react'
+import {i18n} from '@lingui/core'
+import {useLocaleLanguage} from './i18n'
+
+export default function I18nProvider({children}: {children: React.ReactNode}) {
+  useLocaleLanguage()
+  return <DefaultI18nProvider i18n={i18n}>{children}</DefaultI18nProvider>
+}

src/locale/languages.ts

@@ -4,6 +4,16 @@ interface Language {
   name: string
 }
 
+interface AppLanguage {
+  code2: string
+  name: string
+}
+
+export const APP_LANGUAGES: AppLanguage[] = [
+  {code2: 'en', name: 'English'},
+  {code2: 'hi', name: 'हिंदी'},
+]
+
 export const LANGUAGES: Language[] = [
   {code3: 'aar', code2: 'aa', name: 'Afar'},
   {code3: 'abk', code2: 'ab', name: 'Abkhazian'},