shared state for analytic status #28

client/src/components/AnlyticsStatus.vue

@@ -6,22 +6,15 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { getStatusGenerator } from '@/services/analytics.service';
 
 
 export default defineComponent({
   name: 'AnalyticStatus',
   components: {
   },
-  data: function name() {
-    return {
-      status: "loading..."
-    }
-  },
-  mounted: async function() {
-    let g = getStatusGenerator();
-    for await (const data of g) {
-      this.status = data.toLowerCase();
+  computed: {
+    status() {
+      return this.$store.state.analyticStatus;
     }
   }
 });

client/src/store/index.ts

@@ -1,12 +1,26 @@
 import { auth } from "./auth.module";
 import { createStore } from 'vuex'
+import { getStatusGenerator } from "@/services/analytics.service";
+
+const SET_ANALYTICS_STATUS = 'setAnalyticsStatus';
 
 export default createStore({
   state: {
+    analyticStatus: 'loading...'
   },
   mutations: {
+    [SET_ANALYTICS_STATUS](state, status: string) {
+      state.analyticStatus = status;
+    }
   },
   actions: {
+    async runStatusGenerator({commit}) {
+      const g = getStatusGenerator();
+      for await (const data of g) {
+        // this.status = data.toLowerCase();
+        commit(SET_ANALYTICS_STATUS, data);
+      }
+    }
   },
   modules: {
     auth

client/src/views/Home.vue

@@ -10,7 +10,7 @@
       </div>
       <analytic-status />
 
-      <button @click="clearOrLabeling"> clear all labeling </button>
+      <button @click="clearAllLabeling"> clear all labeling </button>
     </div>
 
   </div>
@@ -29,9 +29,12 @@ export default defineComponent({
     AnalyticStatus
   },
   methods: {
-    clearOrLabeling() {
+    clearAllLabeling() {
       this.$refs.graph.rerender();
     }
+  },
+  mounted: function name() {
+    this.$store.dispatch('runStatusGenerator');
   }
 });
 </script>