refactor: app component

src/App.vue

@@ -18,58 +18,45 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import UpdateCard from './components/Global/UpdateCard.vue';
-
-import { defineComponent } from 'vue';
 import packageInfo from '../package.json';
-import { useStore } from './store/store';
-import orderStorageMixin from './mixins/orderStorageMixin';
-import StorageManager from './managers/storageManager';
 import axios from 'axios';
+import { useStore } from './store/store';
+
+import UpdateCard from './components/Global/UpdateCard.vue';
 import UpdatePrompt from './components/Global/UpdatePrompt.vue';
-import AppFooter from './components/App/AppFooter.vue';
 import AppNavbar from './components/App/AppNavbar.vue';
+import StorageManager from './managers/storageManager';
+import { onMounted } from 'vue';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
-export default defineComponent({
+const store = useStore();
-  components: { UpdateCard, UpdatePrompt, AppFooter, AppNavbar },
+const appVersion = packageInfo.version;
 
-  mixins: [orderStorageMixin],
+onMounted(() => {
+  loadLang();
+  loadSettings();
+  checkAppVersion();
+  handleQueries();
+});
 
-  data() {
+function loadSettings() {
-    return { appVersion: packageInfo.version, store: useStore() };
+  document.title = `GeneraTOR ${appVersion}`;
-  },
+  store.orderDarkMode = StorageManager.getBooleanValue('dark-mode');
+}
 
-  created() {
+function handleQueries() {
-    this.init();
-  },
-
-  methods: {
-    init() {
-      this.loadLang();
-      this.loadSettings();
-      this.checkAppVersion();
-      this.handleQueries();
-    },
-
-    loadSettings() {
-      document.title = `GeneraTOR ${this.appVersion}`;
-      this.store.orderDarkMode = StorageManager.getBooleanValue('dark-mode');
-    },
-
-    handleQueries() {
   const query = new URLSearchParams(window.location.search);
 
   const id = query.get('sceneryId');
 
   if (id != null) {
-        this.store.panelMode = 'OrderTrainPicker';
+    store.panelMode = 'OrderTrainPicker';
   }
-    },
+}
 
-    async checkAppVersion() {
+async function checkAppVersion() {
   const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);
 
   try {
@@ -79,25 +66,25 @@ export default defineComponent({
 
     if (!releaseData) return;
 
-        this.store.appUpdateData.version = this.appVersion;
+    store.appUpdateData.version = appVersion;
-        this.store.appUpdateData.changelog = releaseData.body;
+    store.appUpdateData.changelog = releaseData.body;
-        this.store.appUpdateData.releaseURL = releaseData.html_url;
+    store.appUpdateData.releaseURL = releaseData.html_url;
 
-        this.store.updateCardOpen =
+    store.updateCardOpen =
-          (storageVersion != '' && storageVersion != this.appVersion) ||
+      (storageVersion != '' && storageVersion != appVersion) ||
       import.meta.env.VITE_UPDATE_TEST === 'test';
   } catch (error) {
     console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
   }
 
-      StorageManager.setStringValue(STORAGE_VERSION_KEY, this.appVersion);
+  StorageManager.setStringValue(STORAGE_VERSION_KEY, appVersion);
-    },
+}
 
-    loadLang() {
+function loadLang() {
   const storageLang = StorageManager.getStringValue('lang');
 
   if (storageLang) {
-        this.store.changeLang(storageLang);
+    store.changeLang(storageLang);
     return;
   }
 
@@ -106,11 +93,9 @@ export default defineComponent({
   const naviLanguage = window.navigator.language.toString();
 
   if (!naviLanguage.startsWith('pl')) {
-        this.store.changeLang('en');
+    store.changeLang('en');
   }
-    }
+}
-  }
-});
 </script>
 
 <style lang="scss">