errors: add dismissable error banners

Makefile

@@ -7,7 +7,7 @@ frontend:
 frontend-watch:
 	cd frontend && yarn build --watch
 
-run: build
+run: *.go
 	./happy -develop
 
 .PHONY: run frontend frontend-watch

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
+            UserInfo,
-        },
+            Error
-        computed: mapState({
+        }
-            userInfo: state => state.userInfo,
-            err: state => state.err
-        }),
     }
 </script>
 

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);
+                    }));
             }
         }
     }

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,16 +19,8 @@
         },
         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>
 
 <style scoped>

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>

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) {
+        addError(state, err) {
-            state.err = err
+            state.errs.push(err)
         }
     }
 });