lesson15 changes

Author: atomjar

src/App.vue

@@ -1,16 +1,19 @@
 <template>
   <div id="app">
     <NavBar/>
+    <NotificationContainer/>
     <router-view :key="$route.fullPath" />
   </div>
 </template>
 
 <script>
 import NavBar from '@/components/NavBar.vue'
+import NotificationContainer from '@/components/NotificationContainer.vue'
 
 export default {
   components: {
-    NavBar
+    NavBar,
+    NotificationContainer
   }
 }
 </script>

src/components/NotificationBar.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="notification-bar" :class="notificationTypeClass">
+    <p>{{ notification.message }}</p>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  props: {
+    notification: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      timeout: null
+    }
+  },
+  mounted() {
+    this.timeout = setTimeout(() => this.remove(this.notification), 5000)
+  },
+  beforeDestroy() {
+    clearTimeout(this.timeout)
+  },
+  computed: {
+    notificationTypeClass() {
+      return `-text-${this.notification.type}`
+    }
+  },
+  methods: mapActions('notification', ['remove'])
+}
+</script>
+
+<style scoped>
+.notification-bar {
+  margin: 1em 0 1em;
+}
+</style>

src/components/NotificationContainer.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="notification-container">
+    <NotificationBar
+      v-for="notification in notifications"
+      :key="notification.id"
+      :notification="notification"
+    />
+  </div>
+</template>
+
+<script>
+import NotificationBar from '@/components/NotificationBar.vue'
+import { mapState } from 'vuex'
+
+export default {
+  components: {
+    NotificationBar
+  },
+  computed: mapState('notification', ['notifications'])
+}
+</script>
+
+<style scoped>
+.notification-container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding-right: 40px;
+}
+</style>