chore: refactored locale management hook (#1737)

* chore: refactored locale management hook

* use useMemo instead of useState

src/constants/locales.ts

@@ -14,4 +14,19 @@ export const SUPPORTED_LOCALES = [
 ] as const
 export type SupportedLocale = typeof SUPPORTED_LOCALES[number]
 
-export const defaultLocale: SupportedLocale = 'en'
+export const DEFAULT_LOCALE: SupportedLocale = 'en'
+
+export const LOCALE_LABEL: { [locale in SupportedLocale]: string } = {
+  en: 'English',
+  de: 'Deutsch',
+  'es-AR': 'español (Argentina)',
+  'es-US': 'español (Estados Unidos)',
+  'it-IT': 'italiano',
+  iw: 'Hebrew',
+  ro: 'română',
+  ru: 'русский',
+  vi: 'Tiếng Việt',
+  'zh-CN': '中文 ( 中国 )',
+  'zh-TW': '中文 ( 台灣 )',
+  'pseudo-en': '',
+}

src/hooks/useActiveLocale.ts

+import { DEFAULT_LOCALE, SupportedLocale, SUPPORTED_LOCALES } from 'constants/locales'
+import { useMemo } from 'react'
+import { useUserLocale } from 'state/user/hooks'
+import useParsedQueryString from './useParsedQueryString'
+
+function parseLocale(maybeSupportedLocale: string): SupportedLocale | undefined {
+  return SUPPORTED_LOCALES.find((locale) => locale === maybeSupportedLocale)
+}
+
+function navigatorLocale(): SupportedLocale | undefined {
+  if (!navigator.language) return undefined
+
+  const [language, region] = navigator.language.split('-')
+
+  if (region) {
+    return parseLocale(`${language}-${region.toUpperCase()}`) ?? parseLocale(language)
+  }
+
+  return parseLocale(language)
+}
+
+export function useActiveLocale(): SupportedLocale {
+  const parsed = useParsedQueryString()
+  const userLocale = useUserLocale()
+
+  return useMemo(() => {
+    const urlLocale = () => (typeof parsed.lng === 'string' && parseLocale(parsed.lng)) || undefined
+
+    return userLocale ?? urlLocale() ?? navigatorLocale() ?? DEFAULT_LOCALE
+  }, [userLocale, parsed])
+}

src/i18n.tsx

@@ -2,25 +2,8 @@ import React, { useEffect } from 'react'
 import { i18n } from '@lingui/core'
 import { I18nProvider } from '@lingui/react'
 import { ReactNode } from 'react'
-import useParsedQueryString from 'hooks/useParsedQueryString'
-import { useLocale } from 'state/user/hooks'
-import { SupportedLocale, SUPPORTED_LOCALES, defaultLocale } from './constants/locales'
-
-function parseLocale(maybeSupportedLocale: string): SupportedLocale | undefined {
-  return SUPPORTED_LOCALES.find((locale) => locale === maybeSupportedLocale)
-}
-
-function navigatorLocale(): SupportedLocale | undefined {
-  if (!navigator.language) return undefined
-
-  const [language, region] = navigator.language.split('-')
-
-  if (region) {
-    return parseLocale(`${language}-${region.toUpperCase()}`) ?? parseLocale(language)
-  }
-
-  return parseLocale(language)
-}
+import { useActiveLocale } from 'hooks/useActiveLocale'
+import { SupportedLocale } from 'constants/locales'
 
 export async function dynamicActivate(locale: SupportedLocale) {
   try {
@@ -34,14 +17,11 @@ export async function dynamicActivate(locale: SupportedLocale) {
 }
 
 export function LanguageProvider({ children }: { children: ReactNode }) {
-  const parsed = useParsedQueryString()
-  const userLocale = useLocale()
+  const locale = useActiveLocale()
 
   useEffect(() => {
-    const urlLocale = () => (typeof parsed.lng === 'string' && parseLocale(parsed.lng)) || undefined
-
-    dynamicActivate(userLocale ?? urlLocale() ?? navigatorLocale() ?? defaultLocale)
-  }, [userLocale, parsed])
+    dynamicActivate(locale)
+  }, [locale])
 
   return <I18nProvider i18n={i18n}>{children}</I18nProvider>
 }

src/state/user/hooks.tsx

@@ -72,13 +72,13 @@ export function useDarkModeManager(): [boolean, () => void] {
   return [darkMode, toggleSetDarkMode]
 }
 
-export function useLocale(): SupportedLocale | null {
+export function useUserLocale(): SupportedLocale | null {
   return useSelector<AppState, AppState['user']['userLocale']>((state) => state.user.userLocale)
 }
 
-export function useLocaleManager(): [SupportedLocale | null, (newLocale: SupportedLocale) => void] {
+export function useUserLocaleManager(): [SupportedLocale | null, (newLocale: SupportedLocale) => void] {
   const dispatch = useDispatch<AppDispatch>()
-  const locale = useLocale()
+  const locale = useUserLocale()
 
   const setLocale = useCallback(
     (newLocale: SupportedLocale) => {