fix the issue

www/nuxt.config.js

@@ -75,7 +75,7 @@ export default {
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
-  axios: {},
+  // axios: {},
   /*
   ** Content module configuration
   ** See https://content.nuxtjs.org/configuration

www/pages/index.vue

@@ -10,7 +10,8 @@
       </b-row>
       <b-row class="row-space">
         <b-col lg="4" offset-lg="4" class="text-center">
-          <b-button pill
+          <b-button
+            pill
             class="generate-button"
             variant="outline-primary"
             @click="generateBadge"
@@ -52,8 +53,8 @@
       >
         <b-col lg="10" offset-lg="1">
           <p class="note">
-            Please copy the markdown script below to your Github
-            readme.md or any other markdown file you want to monitor.
+            Please copy the markdown script below to your Github readme.md or
+            any other markdown file you want to monitor.
           </p>
           <b-form-textarea
             id="textarea"
@@ -73,21 +74,22 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { mapMutations } from "vuex";
+import { mapMutations, mapActions } from "vuex";
 
 export default Vue.extend({
   data() {
     return {
       buttonText: "Get your Badge",
       text: "",
-      badge: {
-        id: ""
-      },
       canGenerate: true,
       activeBadgeColor: "green"
     };
   },
-  computed: {},
+  computed: {
+    badge() {
+      return this.$store.state.badges.currentBadge;
+    }
+  },
   methods: {
     isBadgeActive: function(color: String): boolean {
       return this.activeBadgeColor === color;
@@ -106,15 +108,15 @@ export default Vue.extend({
     myBadge: function(color: String): string {
       return `${this.$config.backendURL}/badges/${this.badge.id}/${color}.svg`;
     },
-    async createNewBadge() {
+    createNewBadge() {
       this.$store.commit("loading/updateLoading");
-      const result = await this.$http.post("/api/badges");
-      const badge = await result.json();
-      this.badge = badge;
-      this.updateBadgeText("green");
-      this.$store.commit("loading/updateLoading");
-      this.canGenerate = false;
-      this.buttonText="Badge generated"
+
+      this.$store.dispatch("badges/createBadge", () => {
+        this.updateBadgeText("green");
+        this.$store.commit("loading/updateLoading");
+        this.canGenerate = false;
+        this.buttonText = "Badge generated";
+      });
     }
   }
 });
@@ -133,7 +135,7 @@ export default Vue.extend({
   .intro {
     img {
       max-width: 40vh;
-      display:block;
+      display: block;
       margin-left: auto;
       margin-right: auto;
     }
@@ -153,9 +155,9 @@ export default Vue.extend({
   }
 
   p.title {
-      font-size: 14px;
-      font-weight: 600;
-      color: #333;
-    }
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+  }
 }
 </style>

www/store/badges.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  currentBadge: {}
+});
+
+export const mutations = {
+  updateBadge(state, badge) {
+    state.currentBadge = badge;
+  }
+};
+
+export const actions = {
+  async createBadge(context, callback) {
+    const result = await this.$http.post("/api/badges");
+    const json = await result.json();
+    context.commit("updateBadge", json);
+    callback()
+  }
+};

www/store/loading.js

@@ -4,8 +4,6 @@ export const state = () => ({
 
 export const mutations = {
   updateLoading(state) {
-    console.log("old value", state.loading)
     state.loading = !state.loading;
-    console.log("new value", state.loading)
   }
 };