From 07209a7d29721403087a56425c73cc2c60e26f60 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 30 Nov 2022 08:22:35 +0800
Subject: [PATCH] feat: i18n lazy load

---
 app.vue                                   |  7 +++----
 components/nav/SelectLanguage.vue         |  8 +-------
 components/user/UserSwitcher.vue          |  3 ++-
 composables/{page-header.ts => setups.ts} | 19 +++++++++++++++++--
 error.vue                                 |  2 +-
 nuxt.config.ts                            |  3 +--
 6 files changed, 25 insertions(+), 17 deletions(-)
 rename composables/{page-header.ts => setups.ts} (57%)

diff --git a/app.vue b/app.vue
index f378be87..5bcb88be 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,6 @@
 <script setup>
-usePageHeader()
+setupPageHeader()
+await setupI18n()
 
 // We want to trigger rerendering the page when account changes
 const key = computed(() => useMasto().instances.config.url || 'default')
@@ -10,7 +11,5 @@ const key = computed(() => useMasto().instances.config.url || 'default')
   <NuxtLayout :key="key">
     <NuxtPage />
   </NuxtLayout>
-  <TeleportTarget
-    id="teleport-end"
-  />
+  <TeleportTarget id="teleport-end" />
 </template>
diff --git a/components/nav/SelectLanguage.vue b/components/nav/SelectLanguage.vue
index cff4f6cd..6f014cae 100644
--- a/components/nav/SelectLanguage.vue
+++ b/components/nav/SelectLanguage.vue
@@ -1,15 +1,9 @@
 <script lang="ts" setup>
 import type { ComputedRef } from 'vue'
 import type { LocaleObject } from '#i18n'
-import { STORAGE_KEY_LANG } from '~/constants'
 
 const { locale, t, setLocale } = useI18n()
 const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
-useLocalStorage(STORAGE_KEY_LANG, locale)
-
-const handleLocale = async (locale: string) => {
-  await setLocale(locale)
-}
 </script>
 
 <template>
@@ -24,7 +18,7 @@ const handleLocale = async (locale: string) => {
           v-for="item in locales"
           :key="item.code"
           :checked="item.code === locale"
-          @click="handleLocale(item.code)"
+          @click="setLocale(item.code)"
         >
           {{ item.name }}
         </CommonDropdownItem>
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index 12365410..8a0ae455 100644
--- a/components/user/UserSwitcher.vue
+++ b/components/user/UserSwitcher.vue
@@ -14,7 +14,8 @@ const router = useRouter()
 const switchUser = (user: UserLogin) => {
   if (user.account.id === currentUser.value?.account.id)
     router.push(getAccountPath(user.account))
-  else loginTo(user)
+  else
+    loginTo(user)
 }
 </script>
 
diff --git a/composables/page-header.ts b/composables/setups.ts
similarity index 57%
rename from composables/page-header.ts
rename to composables/setups.ts
index bb21b15c..dab9581e 100644
--- a/composables/page-header.ts
+++ b/composables/setups.ts
@@ -1,10 +1,11 @@
-import { APP_NAME } from '~/constants'
+import { APP_NAME, STORAGE_KEY_LANG } from '~/constants'
 
 const isDev = process.dev
 const isPreview = window.location.hostname.includes('deploy-preview')
 
-export function usePageHeader() {
+export function setupPageHeader() {
   const i18n = useI18n()
+
   useHeadFixed({
     htmlAttrs: {
       lang: () => i18n.locale.value,
@@ -21,3 +22,17 @@ export function usePageHeader() {
   // eslint-disable-next-line no-unused-expressions
   isDark.value
 }
+
+export async function setupI18n() {
+  // TODO: guess user language
+
+  const { locale, setLocale } = useI18n()
+  const localeStorage = useLocalStorage(STORAGE_KEY_LANG, locale.value)
+
+  if (localeStorage.value !== locale.value)
+    await setLocale(localeStorage.value)
+
+  watchEffect(() => {
+    localeStorage.value = locale.value
+  })
+}
diff --git a/error.vue b/error.vue
index bc5bd593..8ba07296 100644
--- a/error.vue
+++ b/error.vue
@@ -6,7 +6,7 @@ const { error } = defineProps<{
   error: Partial<NuxtError>
 }>()
 
-usePageHeader()
+setupPageHeader()
 
 // add more custom status codes messages here
 const errorCodes: Record<number, string> = {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index edb3cc66..85c766ce 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -104,8 +104,7 @@ export default defineNuxtConfig({
     vueI18n: {
       fallbackLocale: 'en-US',
     },
-    // TODO:
-    // lazy: true,
+    lazy: true,
   },
 })