From aff1564b643b4cf62beefac788dae4fdb0ab6fff Mon Sep 17 00:00:00 2001
From: Denys Seredenko <denis-seredenko@ukr.net>
Date: Fri, 6 Jan 2023 23:23:28 +0100
Subject: [PATCH] * Hot-fix of bug with rendering a variable from vuex store
 before it's load(when variable is null) feature: no-task

---
 src/service/ContractsService.js |  1 +
 src/store/contracts.module.js   | 13 +++++++++----
 src/views/ContractView.vue      | 17 ++++++++++-------
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/service/ContractsService.js b/src/service/ContractsService.js
index 770cfd8..6e1d0b5 100644
--- a/src/service/ContractsService.js
+++ b/src/service/ContractsService.js
@@ -28,6 +28,7 @@ export async function getContractById(identifier) {
       return resp.data
     })
     .catch(error => {
+      console.error(error)
       router.push('/error?message=' + error.message + '&code=' + error.code)
     })
 }
diff --git a/src/store/contracts.module.js b/src/store/contracts.module.js
index 4676d7d..07f31c4 100644
--- a/src/store/contracts.module.js
+++ b/src/store/contracts.module.js
@@ -18,10 +18,15 @@ export default {
       const contracts = await getContracts()
       commit('initContracts', contracts)
     },
-    async fetchContractById({ commit }, id) {
-      const currentContract = await getContractById(id)
-      commit('setCurrentContract', currentContract)
+    async fetchContractById({ commit, state }, id) {
+      const contract = await getContractById(id)
+      commit('setCurrentContract', contract)
+      return state.currentContract
     }
   },
-  getters: {}
+  getters: {
+    currentContract: state => {
+      return state.currentContract
+    }
+  }
 }
diff --git a/src/views/ContractView.vue b/src/views/ContractView.vue
index 0e96eff..083d117 100644
--- a/src/views/ContractView.vue
+++ b/src/views/ContractView.vue
@@ -1,7 +1,7 @@
 <template>
   <Navbar />
   <div class="flex justify-center py-5">
-    <p class="text-3xl"> {{ currentContract.name }} </p>
+    <p class="text-3xl" v-if="currentContract"> {{ currentContract.name }} </p>
   </div>
   <div class="flex justify-center text-center pt-5">
     <ul class="flex border-b border-gray-200 text-center max-sm:overflow-x-scroll max-sm:overflow-y-hidden sm:w-2/3 ">
@@ -42,7 +42,7 @@
     </ul>
   </div>
   <div class="flex justify-center text-left">
-    <div class="sm:w-2/3">
+    <div class="sm:w-2/3" v-if="currentContract">
       <ContractTab v-bind:contract="currentContract" v-if="currentTab === 'contract'"/>
       <ClientTab v-bind:contract="currentContract" v-if="currentTab === 'client'"/>
       <CommentsTab v-bind:contract="currentContract" v-if="currentTab === 'comments'"/>
@@ -51,7 +51,7 @@
 </template>
 <script>
 import Navbar from "../components/Navbar.vue";
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import ClientTab from "../components/tabs/ClientTab.vue";
 import ContractTab from "../components/tabs/ContractTab.vue";
 import CommentsTab from "../components/tabs/CommentsTab.vue";
@@ -70,10 +70,10 @@ export default {
   },
   mounted() {
     const id = this.$route.query.id
-    if (id === null){
-      this.$router.push('/error?message='+ 'Bad id' + '&code=404') //todo: check if works
+    if (id === null) {
+      this.$router.push('/error?message=' + 'Bad id' + '&code=404') //todo: check if works
     }
-    this.fetchContractById(id);
+    this.fetchContractById(id)
   },
   methods: {
     ...mapActions(['fetchContractById']),
@@ -84,7 +84,10 @@ export default {
   computed: {
     currentContract() {
       return this.$store.state.contracts.currentContract
-    }
+    },
+    ...mapGetters([
+      'currentContract',
+    ]),
   }
 }
 </script>
\ No newline at end of file