From 011d1fb121ca9ae4f42321491a3bf30e53476f18 Mon Sep 17 00:00:00 2001
From: Chris Sexton <chrissexton@users.noreply.github.com>
Date: Mon, 28 Oct 2019 07:56:13 -0400
Subject: [PATCH] errors: add dismissable error banners

---
 Makefile                                 |  2 +-
 frontend/src/App.vue                     | 13 +++++-------
 frontend/src/components/ChoiceButton.vue |  5 ++++-
 frontend/src/components/Chooser.vue      | 11 +---------
 frontend/src/components/Error.vue        | 26 ++++++++++++++++++++++++
 frontend/src/store.js                    |  8 ++++----
 6 files changed, 41 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/Error.vue

diff --git a/Makefile b/Makefile
index 5c6f4ac..1772f11 100644
--- a/Makefile
+++ b/Makefile
@@ -7,7 +7,7 @@ frontend:
 frontend-watch:
 	cd frontend && yarn build --watch
 
-run: build
+run: *.go
 	./happy -develop
 
 .PHONY: run frontend frontend-watch
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index aa48c34..8c0a779 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,8 +3,8 @@
         <b-navbar type="dark" variant="info">
             <b-navbar-brand>Happy</b-navbar-brand>
         </b-navbar>
-        <div v-show="err">{{err}}</div>
         <user-info class="fixed-bottom userInfo"/>
+        <Error/>
         <h1 class="question">How are you?</h1>
         <Chooser class="chooser"/>
     </div>
@@ -13,18 +13,15 @@
 <script>
     import Chooser from './components/Chooser.vue'
     import UserInfo from "./components/UserInfo";
-    import {mapState} from 'vuex';
+    import Error from "./components/Error";
 
     export default {
         name: 'app',
         components: {
             Chooser,
-            UserInfo
-        },
-        computed: mapState({
-            userInfo: state => state.userInfo,
-            err: state => state.err
-        }),
+            UserInfo,
+            Error
+        }
     }
 </script>
 
diff --git a/frontend/src/components/ChoiceButton.vue b/frontend/src/components/ChoiceButton.vue
index b48fc88..c74f015 100644
--- a/frontend/src/components/ChoiceButton.vue
+++ b/frontend/src/components/ChoiceButton.vue
@@ -10,7 +10,10 @@
         },
         methods: {
             click: function(e) {
-                this.$emit('selected', e, this.mood)
+                this.$emit('selected', e, this.$store.dispatch("setMood", this.mood)
+                    .catch(resp => {
+                        this.$store.commit('addError', resp.message);
+                    }));
             }
         }
     }
diff --git a/frontend/src/components/Chooser.vue b/frontend/src/components/Chooser.vue
index 5adff76..745c4d9 100644
--- a/frontend/src/components/Chooser.vue
+++ b/frontend/src/components/Chooser.vue
@@ -4,7 +4,6 @@
                        v-bind:key="mood.key"
                        v-bind:index="index"
                        :mood="mood"
-                       v-on:selected="doIt"
         />
     </div>
 </template>
@@ -20,15 +19,7 @@
         },
         computed: mapState({
             moods: state => state.moods
-        }),
-        methods: {
-            doIt: function(e, mood) {
-                this.$store.dispatch("setMood", mood)
-                    .catch(resp => {
-                        this.$store.commit('setError', resp.message);
-                    })
-            }
-        }
+        })
     }
 </script>
 
diff --git a/frontend/src/components/Error.vue b/frontend/src/components/Error.vue
new file mode 100644
index 0000000..d41b414
--- /dev/null
+++ b/frontend/src/components/Error.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <b-alert
+                v-for="(e, i) in errs"
+                v-bind:key="i"
+                variant="danger"
+                dismissible
+                show="true"
+                v-show="errs.length > 0">{{e}}</b-alert>
+    </div>
+</template>
+
+<script>
+    import {mapState} from 'vuex';
+    export default {
+        name: "Error",
+        computed: mapState({
+            userInfo: state => state.userInfo,
+            errs: state => state.errs
+        }),
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/store.js b/frontend/src/store.js
index aedb119..2d361be 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -7,7 +7,7 @@ Vue.use(Vuex);
 
 const store = new Vuex.Store({
     state: {
-        err: null,
+        errs: [],
         userInfo: null,
         moods: [],
     },
@@ -36,10 +36,10 @@ const store = new Vuex.Store({
             state.moods = moods;
         },
         clearError(state) {
-            state.err = null
+            state.errs = []
         },
-        setError(state, err) {
-            state.err = err
+        addError(state, err) {
+            state.errs.push(err)
         }
     }
 });