From cd61b4dd0a6324f3f387ac97f7c88c28988e46dd Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Sat, 29 Aug 2020 11:18:59 +1000
Subject: [PATCH] fix the  issue

---
 www/nuxt.config.js   |  2 +-
 www/pages/index.vue  | 44 +++++++++++++++++++++++---------------------
 www/store/badges.js  | 18 ++++++++++++++++++
 www/store/loading.js |  2 --
 4 files changed, 42 insertions(+), 24 deletions(-)
 create mode 100644 www/store/badges.js

diff --git a/www/nuxt.config.js b/www/nuxt.config.js
index 37ff0e5..a567a1b 100644
--- a/www/nuxt.config.js
+++ b/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
diff --git a/www/pages/index.vue b/www/pages/index.vue
index 3544518..1658ad9 100644
--- a/www/pages/index.vue
+++ b/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>
diff --git a/www/store/badges.js b/www/store/badges.js
new file mode 100644
index 0000000..a049c7e
--- /dev/null
+++ b/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()
+  }
+};
diff --git a/www/store/loading.js b/www/store/loading.js
index b850895..a798b39 100644
--- a/www/store/loading.js
+++ b/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)
   }
 };