From 3079867e2abb7a391434e99bef766f414c1b05b7 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 28 Dec 2022 04:50:29 +0100
Subject: [PATCH] refactor: setup

---
 app.vue                                  |  3 --
 components/settings/SettingsFontSize.vue |  2 +-
 components/settings/SettingsLanguage.vue |  2 +-
 composables/setups.ts                    | 36 +-----------------------
 error.vue                                |  2 --
 plugins/setup-emojis.ts                  |  9 ++++++
 plugins/setup-i18n.ts                    | 26 +++++++++++++++++
 7 files changed, 38 insertions(+), 42 deletions(-)
 create mode 100644 plugins/setup-emojis.ts
 create mode 100644 plugins/setup-i18n.ts

diff --git a/app.vue b/app.vue
index 94630edc..1022586e 100644
--- a/app.vue
+++ b/app.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 setupPageHeader()
-setupEmojis()
 provideGlobalCommands()
 
-await setupI18n()
-
 // We want to trigger rerendering the page when account changes
 const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:${currentUser.value?.account.id || ''}`)
 </script>
diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue
index 89971b20..a6dfd711 100644
--- a/components/settings/SettingsFontSize.vue
+++ b/components/settings/SettingsFontSize.vue
@@ -7,7 +7,7 @@ const fontSize = useFontSizeRef()
 
 <template>
   <select v-model="fontSize">
-    <option v-for="size in sizes" :key="size" :value="size">
+    <option v-for="size in sizes" :key="size" :value="size" :selected="fontSize === size">
       {{ size }}
     </option>
   </select>
diff --git a/components/settings/SettingsLanguage.vue b/components/settings/SettingsLanguage.vue
index 4ea180f2..ab535e11 100644
--- a/components/settings/SettingsLanguage.vue
+++ b/components/settings/SettingsLanguage.vue
@@ -8,7 +8,7 @@ const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
 
 <template>
   <select :value="locale" @input="e => setLocale((e.target as any).value)">
-    <option v-for="item in locales" :key="item.code" :value="item.code">
+    <option v-for="item in locales" :key="item.code" :value="item.code" :selected="locale === item.code">
       {{ item.name }}
     </option>
   </select>
diff --git a/composables/setups.ts b/composables/setups.ts
index 2a814d6a..1adbd554 100644
--- a/composables/setups.ts
+++ b/composables/setups.ts
@@ -1,7 +1,7 @@
 import { pwaInfo } from 'virtual:pwa-info'
 import type { Link } from '@unhead/schema'
 import type { Directions } from 'vue-i18n-routing'
-import { APP_NAME, COOKIE_MAX_AGE, STORAGE_KEY_LANG } from '~/constants'
+import { APP_NAME } from '~/constants'
 import type { LocaleObject } from '#i18n'
 
 export function setupPageHeader() {
@@ -46,37 +46,3 @@ export function setupPageHeader() {
     link,
   })
 }
-
-export async function setupI18n() {
-  const { locale, setLocale, locales } = useI18n()
-  const cookieLocale = useCookie(STORAGE_KEY_LANG, { maxAge: COOKIE_MAX_AGE })
-  const isFirstVisit = cookieLocale.value == null
-
-  if (process.client && isFirstVisit) {
-    const userLang = (navigator.language || 'en-US').toLowerCase()
-    // cause vue-i18n not explicit export LocaleObject type
-    const supportLocales = unref(locales) as { code: string }[]
-    const lang = supportLocales.find(locale => userLang.startsWith(locale.code.toLowerCase()))?.code
-      || supportLocales.find(locale => userLang.startsWith(locale.code.split('-')[0]))?.code
-    cookieLocale.value = lang || 'en-US'
-  }
-
-  if (cookieLocale.value && cookieLocale.value !== locale.value)
-    await setLocale(cookieLocale.value)
-
-  if (process.client) {
-    watchEffect(() => {
-      cookieLocale.value = locale.value
-    })
-  }
-}
-
-export async function setupEmojis() {
-  if (process.client) {
-    const promise = import('@emoji-mart/data').then(r => r.default)
-    const { init } = await import('emoji-mart')
-    init({
-      data: () => promise,
-    })
-  }
-}
diff --git a/error.vue b/error.vue
index 0a6ca0c0..a7e3d23c 100644
--- a/error.vue
+++ b/error.vue
@@ -6,8 +6,6 @@ const { error } = defineProps<{
   error: Partial<NuxtError>
 }>()
 
-setupPageHeader()
-
 // add more custom status codes messages here
 const errorCodes: Record<number, string> = {
   404: 'Page not found',
diff --git a/plugins/setup-emojis.ts b/plugins/setup-emojis.ts
new file mode 100644
index 00000000..6ef98ce7
--- /dev/null
+++ b/plugins/setup-emojis.ts
@@ -0,0 +1,9 @@
+export default defineNuxtPlugin(() => {
+  if (process.server)
+    return
+
+  const promise = import('@emoji-mart/data').then(r => r.default)
+  import('emoji-mart').then(r => r.init({
+    data: () => promise,
+  }))
+})
diff --git a/plugins/setup-i18n.ts b/plugins/setup-i18n.ts
new file mode 100644
index 00000000..75d44634
--- /dev/null
+++ b/plugins/setup-i18n.ts
@@ -0,0 +1,26 @@
+import { COOKIE_MAX_AGE, STORAGE_KEY_LANG } from '~/constants'
+
+export default defineNuxtPlugin(async (nuxt) => {
+  const i18n = nuxt.vueApp.config.globalProperties.$i18n
+  const { setLocale, locales } = nuxt.vueApp.config.globalProperties.$i18n
+  const cookieLocale = useCookie(STORAGE_KEY_LANG, { maxAge: COOKIE_MAX_AGE })
+  const isFirstVisit = cookieLocale.value == null
+
+  if (process.client && isFirstVisit) {
+    const userLang = (navigator.language || 'en-US').toLowerCase()
+    // cause vue-i18n not explicit export LocaleObject type
+    const supportLocales = unref(locales) as { code: string }[]
+    const lang = supportLocales.find(locale => userLang.startsWith(locale.code.toLowerCase()))?.code
+      || supportLocales.find(locale => userLang.startsWith(locale.code.split('-')[0]))?.code
+    cookieLocale.value = lang || 'en-US'
+  }
+
+  if (cookieLocale.value && cookieLocale.value !== i18n.locale)
+    await setLocale(cookieLocale.value)
+
+  if (process.client) {
+    watchEffect(() => {
+      cookieLocale.value = i18n.locale
+    })
+  }
+})