Add data refresher component

components/DataRefresher.vue

@@ -6,6 +6,7 @@
   export default {
     data: () => ({
       timers: {},
+      listeners: {},
     }),
 
     beforeDestroy() {
@@ -18,6 +19,19 @@
         () => this.$store.dispatch("external/live/fetchYoutubeLiveVideoId"),
         14000 + 2000 * Math.random(),
       );
+
+      this.addTimer(
+        "jobFairLiveCheck",
+        () => this.$store.dispatch("meta/health/fetchLiveStatus"),
+        4000 + 2000 * Math.random(),
+      );
+
+      const setOnline = (toStatus) => () => {
+        this.$store.commit("meta/health/SET_ONLINE", Boolean(toStatus));
+      };
+
+      this.addListener("online", setOnline(true));
+      this.addListener("offline", setOnline(false));
     },
 
     methods: {
@@ -33,11 +47,28 @@
         );
       },
 
+      addListener(event, fn) {
+        const oldListener = this.listeners[event];
+        if (oldListener) {
+          window.removeEventListener(event, oldListener);
+        }
+
+        this.$set(this.listeners, "event", fn);
+
+        window.addEventListener(event, fn);
+      },
+
       removeTimers() {
         for (const { timer } of Object.values(this.timers)) {
           clearInterval(timer);
         }
       },
+
+      removeListeners() {
+        for (const [ type, listener ] of Object.entries(this.listeners)) {
+          window.removeEventListener(type, listener);
+        }
+      },
     },
   };
 </script>

components/HealthStatus.vue

@@ -24,19 +24,14 @@
 
 <script>
   import {
-    mapActions,
     mapGetters,
   } from "vuex";
 
   export default {
-    data: () => ({
-      timer: null,
-      isOnline: true,
-    }),
-
     computed: {
       ...mapGetters("meta/health", [
         "isLive",
+        "isOnline",
       ]),
 
       show() {
@@ -55,32 +50,6 @@
         return "Nešto je pošlo po zlu. Molimo budite strpljivi dok otklanjamo poteškoće";
       },
     },
-
-    mounted() {
-      this.timer = setInterval(
-        () =>
-          this.fetchLiveStatus()
-        ,
-        4000 + 2000 * Math.random(),
-      );
-
-      const setOnline = (toStatus) => () => {
-        this.isOnline = Boolean(toStatus);
-      };
-
-      window.addEventListener("online", setOnline(true));
-      window.addEventListener("offline", setOnline(false));
-    },
-
-    beforeDestroy() {
-      clearInterval(this.timer);
-    },
-
-    methods: {
-      ...mapActions("meta/health", [
-        "fetchLiveStatus",
-      ]),
-    },
   };
 </script>
 

layouts/admin.vue

@@ -106,13 +106,16 @@
         <nuxt :class="$style.pageContainer" />
       </v-container>
     </v-main>
+
+    <data-refresher />
   </v-app>
 </template>
 
 <script>
   import {
     mapGetters,
   } from "vuex";
+  import DataRefresher from "../components/DataRefresher";
   import NavUserModule from "~/components/NavUserModule";
   import {
     generateMetadata,
@@ -122,6 +125,7 @@
   export default {
     name: "LayoutAdmin",
     components: {
+      DataRefresher,
       NavUserModule,
       MenuIcon,
     },

layouts/company.vue

@@ -114,10 +114,13 @@
         <nuxt :class="$style.pageContainer" />
       </v-container>
     </v-main>
+
+    <data-refresher />
   </v-app>
 </template>
 
 <script>
+  import DataRefresher from "../components/DataRefresher";
   import NavUserModule from "~/components/NavUserModule";
   import TranslatedText from "~/components/TranslatedText";
   import {
@@ -129,6 +132,7 @@
     name: "LayoutCompany",
 
     components: {
+      DataRefresher,
       TranslatedText,
       NavUserModule,
       MenuIcon,

layouts/default.vue

@@ -13,13 +13,15 @@
     <app-footer />
 
     <health-status />
+    <data-refresher />
   </v-app>
 </template>
 
 <script>
   import AppNavBar from "@/components/NavBar";
   import AppNavDrawer from "@/components/NavDrawer";
   import AppFooter from "@/components/Footer";
+  import DataRefresher from "../components/DataRefresher";
   import HealthStatus from "../components/HealthStatus";
   import {
     generateMetadata,
@@ -29,6 +31,7 @@
     name: "LayoutDefault",
 
     components: {
+      DataRefresher,
       HealthStatus,
       AppNavBar,
       AppNavDrawer,

store/meta/health.js

@@ -2,18 +2,27 @@ import Vue from "vue";
 
 export const state = () => ({
   live: true,
+  online: true,
 });
 
 export const getters = {
   isLive(state) {
     return state.live;
   },
+
+  isOnline(state) {
+    return state.online;
+  },
 };
 
 export const mutations = {
   SET_LIVE(state, live) {
     Vue.set(state, "live", live);
   },
+
+  SET_ONLINE(state, online) {
+    Vue.set(state, "online", online);
+  },
 };
 
 export const actions = {