refactor: home component setup

src/views/Home.vue

@@ -14,13 +14,13 @@
             :data-active="store.panelMode == action.mode"
             @click="selectOrderMode(action.mode)"
           >
-            {{ $t(`navbar.${action.value}`) }}
+            {{ t(`navbar.${action.value}`) }}
           </button>
         </div>
 
         <transition name="order-anim" mode="out-in">
           <keep-alive>
-            <Component :is="orderModeComponent" />
+            <Component :is="panelComponent" />
           </keep-alive>
         </transition>
       </div>
@@ -28,73 +28,48 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { computed } from 'vue';
+import { useStore } from '../store/store';
+import { useI18n } from 'vue-i18n';
+
 import Order from '../components/Order/Order.vue';
-import SideBar from '../components/SideBar.vue';
 import OrderMessage from '../components/OrderMessage.vue';
 import OrderList from '../components/OrderList.vue';
-import { useStore } from '../store/store';
 import OrderTrainPicker from '../components/OrderTrainPicker.vue';
-import { LanguagesIcon } from 'lucide-vue-next';
-import StorageManager from '../managers/storageManager';
 
-export default defineComponent({
+const { t } = useI18n();
-  components: { Order, SideBar, LanguagesIcon },
+const store = useStore();
 
-  data() {
+const navActions = [
-    return {
+  {
-      navActions: [
+    mode: 'OrderMessage',
-        {
+    value: 'order-message'
-          mode: 'OrderMessage',
-          value: 'order-message'
-        },
-        {
-          mode: 'OrderList',
-          value: 'order-list'
-        },
-        {
-          mode: 'OrderTrainPicker',
-          value: 'order-train-picker'
-        }
-      ]
-    };
   },
-
+  {
-  methods: {
+    mode: 'OrderList',
-    selectOrderMode(mode: string) {
+    value: 'order-list'
-      this.store.panelMode = mode;
-    },
-
-    switchLanguages() {
-      const lang = this.store.currentAppLocale == 'pl' ? 'en' : 'pl';
-
-      this.$i18n.locale = lang;
-      this.store.currentAppLocale = lang;
-
-      StorageManager.setStringValue('lang', lang);
-    }
   },
+  {
+    mode: 'OrderTrainPicker',
+    value: 'order-train-picker'
+  }
+];
 
-  setup() {
+function selectOrderMode(mode: string) {
-    return {
+  store.panelMode = mode;
-      store: useStore()
+}
-    };
-  },
 
-  computed: {
+const panelComponent = computed(() => {
-    orderModeComponent() {
+  switch (store.panelMode) {
-      switch (this.store.panelMode) {
+    case 'OrderMessage':
-        case 'OrderMessage':
+      return OrderMessage;
-          return OrderMessage;
+    case 'OrderList':
-        case 'OrderList':
+      return OrderList;
-          return OrderList;
+    case 'OrderTrainPicker':
-        case 'OrderTrainPicker':
+      return OrderTrainPicker;
-          return OrderTrainPicker;
+    default:
-        default:
+      return OrderMessage;
-          return OrderMessage;
-      }
-    }
   }
 });
 </script>