From a8da634b0e69092778d44a506bba8fc1a95c91f5 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 22 Aug 2024 23:19:42 +0200
Subject: [PATCH] hotfix: TrainsView watcher causing routing problems

---
 src/router/index.ts      |  3 ++-
 src/views/DriverView.vue | 15 +++++++++++++--
 src/views/TrainsView.vue | 23 ++++++-----------------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 524bc0b..71acc24 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -25,7 +25,8 @@ const routes: Array<RouteRecordRaw> = [
     name: 'DriverView',
     component: () => import('../views/DriverView.vue'),
     props: (route) => ({
-      trainId: route.query.trainId
+      trainId: route.query.trainId,
+      modalId: route.query.modalId
     })
   },
   {
diff --git a/src/views/DriverView.vue b/src/views/DriverView.vue
index cfe4e04..0afcaa8 100644
--- a/src/views/DriverView.vue
+++ b/src/views/DriverView.vue
@@ -7,7 +7,10 @@
             <img src="/images/icon-back.svg" alt="train icon" />
             <span>{{ $t('trains.driver-return-link') }}</span>
           </router-link>
-          <router-link :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`" class="a-button btn--image">
+          <router-link
+            :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
+            class="a-button btn--image"
+          >
             <img src="/images/icon-train.svg" alt="train icon" />
             <span class="hidable">
               {{ $t('trains.driver-journal-link') }}
@@ -50,13 +53,21 @@ import { Status } from '../typings/common';
 
 const props = defineProps({
   trainId: {
+    type: String,
     required: true
+  },
+
+  modalId: {
+    type: String
   }
 });
 
 const mainStore = useMainStore();
 const apiStore = useApiStore();
-const chosenTrain = computed(() => mainStore.trainList.find((train) => train.id == props.trainId));
+
+const chosenTrain = computed(() =>
+  mainStore.trainList.find((train) => train.id == props.trainId || train.modalId == props.modalId)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index be19fdd..fa543f1 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -24,7 +24,6 @@ import { TrainFilter, trainFilters } from '../components/TrainsView/typings';
 import { filteredTrainList } from '../managers/trainFilterManager';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
 import { Train } from '../typings/common';
-import { useRoute, useRouter } from 'vue-router';
 
 export default defineComponent({
   components: {
@@ -56,8 +55,6 @@ export default defineComponent({
   }),
 
   setup() {
-    const router = useRouter();
-
     const store = useMainStore();
     const initTrainFilters = [...trainFilters.map((f) => ({ ...f }))];
 
@@ -91,20 +88,6 @@ export default defineComponent({
         sT.length > 0 || sD.length > 0 || sA.id != 'routeDistance' || areFiltersActive;
     });
 
-    // Backwards compatibility with external links leading to train modal
-    watch(
-      () => store.trainList,
-      (v) => {
-        if (v.length > 0 && router.currentRoute.value.query['trainId']) {
-          const queryTrainId = router.currentRoute.value.query['trainId'];
-          const train = store.trainList.find((t) => t.modalId == queryTrainId.toString());
-
-          if (!train) router.replace('/trains');
-          else router.replace(`/driver?trainId=${train.id}`);
-        }
-      }
-    );
-
     return {
       computedTrains,
       searchedTrain,
@@ -116,6 +99,12 @@ export default defineComponent({
   },
 
   activated() {
+    // Backwards compatibility with external links leading to train modal
+    if (this.trainId) {
+      this.$router.replace(`/driver?modalId=${this.trainId}`);
+      return;
+    }
+
     if (this.train) {
       this.searchedTrain = this.train;
       this.searchedDriver = this.driver || '';