Naprawiono error handling

src/App.vue

@@ -14,9 +14,9 @@
       <AppBar :stationCount="stationCount" :trainCount="trainCount" />
 
       <main class="app-main">
-        <Loading v-if="connectionState == 0" />
-        <Error v-else-if="connectionState == 1" :error="errorMessage" />
-        <router-view v-else />
+          <Loading v-if="connectionState == 0" />
+          <Error v-else-if="connectionState == 1" :error="errorMessage" />
+          <router-view v-else />
       </main>
 
       <footer class="app-footer flex">&copy; Spythere 2020</footer>
@@ -25,44 +25,42 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { Vue, Component, Prop } from "vue-property-decorator";
+import { Action, Getter } from "vuex-class";
+
 import { mapGetters, mapActions } from "vuex";
 
 import Error from "@/components/states/Error.vue";
 import Loading from "@/components/states/Loading.vue";
 import Clock from "@/components/ui/Clock.vue";
 import AppBar from "@/components/ui/AppBar.vue";
-// import ListFilter from "@/components/utils/ListFilter.vue";
 
-export default Vue.extend({
-  name: "App",
-  components: { Error, Loading, Clock, AppBar },
-  computed: mapGetters({
-    stations: "getStations",
-    trainCount: "getTrainCount",
-    stationCount: "getStationCount"
-  }),
+enum ConnState {
+    Loading = 0,
+    Error = 1,
+    Connected = 2
+}
 
-  methods: {
-    ...mapActions(["initStations"]),
-    getStationList() {
-      this.initStations()
-        .then(result => (this.connectionState = 2))
-        .catch(err => {
-          this.connectionState = 1;
-          this.errorMessage = err.message;
-        });
-    }
-  },
-  data: () => ({
-    errorMessage: "",
-    connectionState: 0
-  }),
+@Component({
+  components: { Error, Loading, Clock, AppBar }
+})
+export default class App extends Vue {
+  @Getter('getStations') stations
+  @Getter('getTrainCount') trainCount
+  @Getter("getStationCount") stationCount
 
+  @Action("initStations") initStations
+
+  errorMessage: string = "";
+  connectionState: ConnState = ConnState.Loading;
+  
   mounted() {
-    this.getStationList();
+    this.initStations();
+
+    this.$store.watch((state, getters) => getters.getConnectionState, (state: ConnState) => this.connectionState = state);
   }
-});
+
+}
 </script>
 
 <style lang="scss">

src/store/modules/store.ts

@@ -13,8 +13,7 @@ class Store extends VuexModule {
     private trainCount: number = 0;
     private stationCount: number = 0;
 
-    private connectionState: number = ConnState.Loading;
-    private errorMessage: string = "";
+    private connectionState: ConnState = ConnState.Loading;
 
     private apiURLS = {
         stationDataURL: "https://api.td2.info.pl:9640/?method=getStationsOnline",
@@ -90,6 +89,10 @@ class Store extends VuexModule {
         return this.filters;
     }
 
+    get getConnectionState() {
+        return this.connectionState;
+    }
+
     @Action
     public setFilter(payload: { filterName: string, value: number | boolean }) {
         this.context.commit('mutateFilter', payload);
@@ -103,11 +106,9 @@ class Store extends VuexModule {
     }
 
     @Action
-    public async initStations() {
+    public initStations() {
         this.context.commit('loadAllStations');
         this.context.dispatch('fetchStations');
-
-        setInterval(() => this.context.dispatch('fetchStations'), 3000);
     }
 
     @Action
@@ -142,7 +143,7 @@ class Store extends VuexModule {
             return await (await axios.get(this.apiURLS.dispatcherDataURL)).data.message;
         })();
 
-        return Promise.all([queryStations, queryTrains, queryDisptachers])
+        Promise.all([queryStations, queryTrains, queryDisptachers])
             .then(response => {
                 onlineStationsData = response[0];
                 onlineTrainsData = response[1];
@@ -218,8 +219,11 @@ class Store extends VuexModule {
                 });
 
                 this.context.commit('filterStations');
+                this.context.commit('setConnState', ConnState.Connected);
             })
-            .catch(err => console.log(err));
+            .catch(err => {
+                this.context.commit('setConnState', ConnState.Error);
+            });
     }
 
     @Mutation
@@ -316,11 +320,15 @@ class Store extends VuexModule {
         this.filters[payload.filterName] = payload.value;
     }
 
-
     @Mutation
     private resetFilterList() {
         this.filters = { ...this.filterInitStates };
     }
+
+    @Mutation
+    private setConnState(state: ConnState) {
+        this.connectionState = state;
+    }
 }
 
 export default Store;