migrate i18n helper.js some code to typescript and migrate vue file to composition API and typescript

src/DesktopApp.vue

@@ -4,10 +4,10 @@
     </v-app>
     <v-snackbar class="cursor-pointer" color="notification-background" location="top"
                 :multi-line="true" :timeout="-1" :close-on-content-click="true" v-model="showNotification">
-        <v-tooltip activator="parent">{{ $t('Click to close') }}</v-tooltip>
+        <v-tooltip activator="parent">{{ tt('Click to close') }}</v-tooltip>
         <div class="d-inline-flex">
-            <img alt="logo" class="notification-logo" :src="ezBookkeepingLogoPath" />
-            <span class="ml-2">{{ $t('global.app.title') }}</span>
+            <img alt="logo" class="notification-logo" :src="APPLICATION_LOGO_PATH" />
+            <span class="ml-2">{{ tt('global.app.title') }}</span>
         </div>
         <div>
             {{ currentNotificationContent }}
@@ -15,11 +15,14 @@
     </v-snackbar>
 </template>
 
-<script>
+<script setup lang="ts">
+import { type Ref, ref, computed, watch, onMounted } from 'vue';
+
 import { useTheme } from 'vuetify';
 import { register } from 'register-service-worker';
 
-import { mapStores } from 'pinia';
+import { useI18n } from '@/locales/helpers.ts';
+
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
@@ -33,90 +36,83 @@ import { initMapProvider } from '@/lib/map/index.ts';
 import { isUserLogined, isUserUnlocked } from '@/lib/userstate.ts';
 import { getSystemTheme, setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
-export default {
-    data() {
-        return {
-            showNotification: false
-        }
-    },
-    computed: {
-        ...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore, useExchangeRatesStore),
-        ezBookkeepingLogoPath() {
-            return APPLICATION_LOGO_PATH;
-        },
-        currentNotificationContent() {
-            return this.rootStore.currentNotification;
-        }
-    },
-    watch: {
-        currentNotificationContent: function (newValue) {
-            this.showNotification = !!newValue;
-        }
-    },
-    created() {
-        const self = this;
-        const theme = useTheme();
+const { tt, getCurrentLanguageInfo, setLanguage, initLocale } = useI18n();
 
-        if (self.settingsStore.appSettings.theme === ThemeType.Light) {
-            theme.global.name.value = ThemeType.Light;
-        } else if (self.settingsStore.appSettings.theme === ThemeType.Dark) {
+const theme = useTheme();
+
+const rootStore = useRootStore();
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
+const tokensStore = useTokensStore();
+const exchangeRatesStore = useExchangeRatesStore();
+
+const showNotification: Ref<boolean> = ref(false);
+
+const currentNotificationContent = computed<string | null>(() => rootStore.currentNotification);
+
+onMounted(() => {
+    document.addEventListener('DOMContentLoaded', () => {
+        const languageInfo = getCurrentLanguageInfo();
+        initMapProvider(languageInfo?.alternativeLanguageTag);
+    });
+});
+
+watch(currentNotificationContent, (newValue) => {
+    showNotification.value = !!newValue;
+});
+
+if (settingsStore.appSettings.theme === ThemeType.Light) {
+    theme.global.name.value = ThemeType.Light;
+} else if (settingsStore.appSettings.theme === ThemeType.Dark) {
+    theme.global.name.value = ThemeType.Dark;
+} else {
+    theme.global.name.value = getSystemTheme();
+}
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
+    if (settingsStore.appSettings.theme === 'auto') {
+        if (e.matches) {
             theme.global.name.value = ThemeType.Dark;
         } else {
-            theme.global.name.value = getSystemTheme();
+            theme.global.name.value = ThemeType.Light;
         }
-
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
-            if (self.settingsStore.appSettings.theme === 'auto') {
-                if (e.matches) {
-                    theme.global.name.value = ThemeType.Dark;
-                } else {
-                    theme.global.name.value = ThemeType.Light;
-                }
-            }
-        });
-
-        let localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage, self.settingsStore.appSettings.timeZone);
-        self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-
-        setExpenseAndIncomeAmountColor(self.userStore.currentUserExpenseAmountColor, self.userStore.currentUserIncomeAmountColor);
-
-        if (isUserLogined()) {
-            if (!self.settingsStore.appSettings.applicationLock || isUserUnlocked()) {
-                // refresh token if user is logined
-                self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
-                    if (response.user) {
-                        localeDefaultSettings = self.$locale.setLanguage(response.user.language);
-                        self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-
-                        setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
-
-                        if (response.notificationContent) {
-                            self.rootStore.setNotificationContent(response.notificationContent);
-                        }
-                    }
-                });
-
-                // auto refresh exchange rates data
-                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
-                    self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
-                }
-            }
-        }
-
-        if (isProduction()) {
-            register('./sw.js', {
-                registrationOptions: {
-                    scope: './'
-                }
-            });
-        }
-    },
-    mounted() {
-        document.addEventListener('DOMContentLoaded', () => {
-            const languageInfo = this.$locale.getCurrentLanguageInfo();
-            initMapProvider(languageInfo ? languageInfo.alternativeLanguageTag : null);
-        });
     }
+});
+
+let localeDefaultSettings = initLocale(userStore.currentUserLanguage, settingsStore.appSettings.timeZone);
+settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+
+setExpenseAndIncomeAmountColor(userStore.currentUserExpenseAmountColor, userStore.currentUserIncomeAmountColor);
+
+if (isUserLogined()) {
+    if (!settingsStore.appSettings.applicationLock || isUserUnlocked()) {
+        // refresh token if user is logined
+        tokensStore.refreshTokenAndRevokeOldToken().then(response => {
+            if (response.user) {
+                localeDefaultSettings = setLanguage(response.user.language);
+                settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+
+                setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
+
+                if (response.notificationContent) {
+                    rootStore.setNotificationContent(response.notificationContent);
+                }
+            }
+        });
+
+        // auto refresh exchange rates data
+        if (settingsStore.appSettings.autoUpdateExchangeRatesData) {
+            exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
+        }
+    }
+}
+
+if (isProduction()) {
+    register('./sw.js', {
+        registrationOptions: {
+            scope: './'
+        }
+    });
 }
 </script>