* 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

@@ -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)
     })
 }

src/store/contracts.module.js

@@ -18,10 +18,15 @@ export default {
       const contracts = await getContracts()
       commit('initContracts', contracts)
     },
-    async fetchContractById({ commit }, id) {
+    async fetchContractById({ commit, state }, id) {
-      const currentContract = await getContractById(id)
+      const contract = await getContractById(id)
-      commit('setCurrentContract', currentContract)
+      commit('setCurrentContract', contract)
+      return state.currentContract
     }
   },
-  getters: {}
+  getters: {
+    currentContract: state => {
+      return state.currentContract
+    }
+  }
 }

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){
+    if (id === null) {
-      this.$router.push('/error?message='+ 'Bad id' + '&code=404') //todo: check if works
+      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>