refine stats ui

www/layouts/default.vue

@@ -44,6 +44,21 @@
         <a href="mailto:me@toozhao.com" class="contact">Contact me</a>
       </b-col>
     </b-row>
+    <template #overlay>
+        <div class="text-center" v-if="hasError">
+          <b-icon icon="stopwatch" font-scale="3" animation="cylon"></b-icon>
+          <p id="error-detail">{{error}}</p>
+          <b-button
+            ref="cancel"
+            variant="outline-light"
+            size="sm"
+            aria-describedby="cancel-label"
+            href="/"
+          >
+            Back to homepage
+          </b-button>
+        </div>
+      </template>
   </b-overlay>
 </template>
 
@@ -77,6 +92,12 @@ export default Vue.extend({
     isLoading() {
       return this.$store.state.loading.loading;
     },
+    hasError() {
+      return this.$store.state.error.error !== "";
+    },
+    error(){
+      return this.$store.state.error.error;
+    },
     isProduction() {
       return this.$config.env === "production";
     },
@@ -141,4 +162,7 @@ html {
   box-sizing: border-box;
   margin: 0;
 }
+#error-detail {
+  color: #fff;
+}
 </style>

www/pages/index.vue

@@ -179,6 +179,9 @@ export default Vue.extend({
       activeBadgeColor: "green"
     };
   },
+  mounted() {
+    this.$store.commit("error/setError", "")
+  },
   computed: {
     badge() {
       return this.$store.state.badges.currentBadge;

www/pages/stats/_id.vue

@@ -84,12 +84,18 @@ export default {
               borderWidth: 2,
               borderColor: 'rgb(49, 197, 83)',
               fill: false,
-              lineTension: 1
+              lineTension: 0.1
             }
           ]
         };
         this.$store.commit("loading/updateLoading");
         this.loaded = true;
+      },
+      errorCallback: (error) => {
+        console.log(error.response.data.msg)
+        this.$store.commit("error/setError", error.response.data.msg)
+        // this.$store.commit("loading/updateLoading");
+        this.loaded = false;
       }
     });
   },

www/store/error.js

@@ -0,0 +1,9 @@
+export const state = () => ({
+  error: ""
+});
+
+export const mutations = {
+  setError(state, error) {
+    state.error = error;
+  }
+};

www/store/stats.js

@@ -9,10 +9,15 @@ export const mutations = {
 };
 
 export const actions = {
-  async getBadgeStats(context, {badgeId, callback}) {
-    const result = await this.$axios.$get(`/api/stats/${badgeId}`);
-    context.commit("setStats", result);
-    callback(result);
+  async getBadgeStats(context, {badgeId, callback, errorCallback}) {
+    try{
+      const result = await this.$axios.$get(`/api/stats/${badgeId}`);
+      context.commit("setStats", result);
+      callback(result);
+    }catch (error) {
+      errorCallback(error)
+    }
+
   }
 
 };