fixed reactive state for listDistricts

bcgov · Jul 18, 2023 · 8c017c4 · 8c017c4
1 parent f09b2b0
commit 8c017c4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 37 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,49 +1,19 @@
 <script>
 import { RouterLink, RouterView } from 'vue-router'
-import { ref, onMounted } from 'vue'
-import InstituteService from './services/InstituteService'
+import { ref, onBeforeMount, onMounted } from 'vue'
 import { useAppStore } from './stores/app'
 
 export default {
   setup() {
     const data = ref([]) // Placeholder for the received data
     const appStore = useAppStore()
 
-    const getDistricts = () => {
-      InstituteService.getDistricts()
-        .then((response) => {
-          // Handle the response data
-          appStore.setDistricts(response.data)
-        })
-        .catch((error) => {
-          // Handle the error
-          console.error(error)
-        })
-    }
-    const getSchools = () => {
-      InstituteService.getSchools()
-        .then((response) => {
-          console.log('getting schools')
-          // Handle the response data
-          appStore.setSchools(response.data)
-        })
-        .catch((error) => {
-          // Handle the error
-          console.error(error)
-        })
-    }
-    getDistricts()
-
-    // Call the getDistricts function when the component is mounted
-    onMounted(() => {
-      //getDistricts()
-      //getSchools()
+    onBeforeMount(async () => {
+      await appStore.setDistricts()
     })
 
     return {
-      data,
-      getDistricts,
-      getSchools
+      data
     }
   },
   mounted() {

diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
@@ -13,16 +13,31 @@ interface School {
 
 }
 
+import InstituteService from '../services/InstituteService'
+
 export const useAppStore = defineStore('app', {
   state: () => ({
     districts: [] as District[],
     schools: [] as School[]
   }),
   actions: {
-    setDistricts(districts: District[]): void {
-      this.districts = districts;
+    setDistricts(): void {
+
+        InstituteService.getDistricts()
+          .then((response) => {
+            // Handle the response data
+            this.districts = response.data
+          })
+          .catch((error) => {
+            // Handle the error
+            console.error(error)
+          })
+
+
+
     },
     setSchools(schools: School[]): void {
+
       this.schools = schools;
     }
   },

diff --git a/frontend/src/views/ListDistricts.vue b/frontend/src/views/ListDistricts.vue
@@ -12,11 +12,12 @@
 </template>
 <script>
 import { useAppStore } from '@/stores/app'
+import { toRefs, watchEffect } from 'vue';
 
 export default {
   setup() {
     const appStore = useAppStore()
-    const districts = appStore.getDistricts
+    const { districts } = toRefs(appStore);
     return { districts }
   }
 }