From b28c897f5d6b3ef2254fb23fe97709d4f2bdcb50 Mon Sep 17 00:00:00 2001
From: YuukanOO <julien+github@leicher.me>
Date: Thu, 21 Jan 2021 15:26:19 +0100
Subject: [PATCH] add notifications

---
 hn-vue/package-lock.json                     |  5 ++++
 hn-vue/package.json                          |  3 ++-
 hn-vue/src/Layout.vue                        |  9 +++++++
 hn-vue/src/components/NotificationsPanel.vue | 19 ++++++++++++++
 hn-vue/src/main.js                           |  5 ++++
 hn-vue/src/pages/Register.vue                |  5 +++-
 hn-vue/src/plugins/Notifications.js          | 12 +++++++++
 hn-vue/src/store.js                          | 27 ++++++++++++++++++++
 8 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 hn-vue/src/components/NotificationsPanel.vue
 create mode 100644 hn-vue/src/plugins/Notifications.js
 create mode 100644 hn-vue/src/store.js

diff --git a/hn-vue/package-lock.json b/hn-vue/package-lock.json
index e2fd2d1..aa3f588 100644
--- a/hn-vue/package-lock.json
+++ b/hn-vue/package-lock.json
@@ -11026,6 +11026,11 @@
       "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.6.tgz",
       "integrity": "sha512-suzIuet1jGcyZ4oUSW8J27R2tNrJ9cIfklAh63EbAkFjE380iv97BAiIeolRYoB9bF9usBXCu4BxftWN1Dkn3g=="
     },
+    "vuex": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",
+      "integrity": "sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ=="
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/hn-vue/package.json b/hn-vue/package.json
index b5aef67..821e75b 100644
--- a/hn-vue/package.json
+++ b/hn-vue/package.json
@@ -11,7 +11,8 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.4.9",
-    "vuelidate": "^0.7.6"
+    "vuelidate": "^0.7.6",
+    "vuex": "^3.6.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/hn-vue/src/Layout.vue b/hn-vue/src/Layout.vue
index 269f109..e09ce11 100644
--- a/hn-vue/src/Layout.vue
+++ b/hn-vue/src/Layout.vue
@@ -6,5 +6,14 @@
       <router-link :to="{ name: 'register' }">Créer un compte</router-link>
     </nav>
     <router-view></router-view>
+    <notifications-panel />
   </div>
 </template>
+
+<script>
+import NotificationsPanel from "./components/NotificationsPanel";
+
+export default {
+  components: { NotificationsPanel },
+};
+</script>
diff --git a/hn-vue/src/components/NotificationsPanel.vue b/hn-vue/src/components/NotificationsPanel.vue
new file mode 100644
index 0000000..9b934e8
--- /dev/null
+++ b/hn-vue/src/components/NotificationsPanel.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h2>Mes notifications</h2>
+    <p v-if="messages.length === 0">Aucune notification disponible ...</p>
+    <ul v-else>
+      <li v-for="message in messages" :key="message">{{ message }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  computed: {
+    ...mapState(["messages"]),
+  },
+};
+</script>
diff --git a/hn-vue/src/main.js b/hn-vue/src/main.js
index 777bcf3..53bdebd 100644
--- a/hn-vue/src/main.js
+++ b/hn-vue/src/main.js
@@ -2,13 +2,18 @@ import Vue from "vue";
 import Vuelidate from "vuelidate";
 import Layout from "./Layout.vue";
 import createRouter from "./router";
+import createStore from "./store";
+import Notifications from "./plugins/Notifications";
 
 Vue.config.productionTip = false;
 Vue.use(Vuelidate);
+Vue.use(Notifications);
 
 const router = createRouter();
+const store = createStore();
 
 new Vue({
   router,
+  store,
   render: (h) => h(Layout),
 }).$mount("#app");
diff --git a/hn-vue/src/pages/Register.vue b/hn-vue/src/pages/Register.vue
index 2de0924..b5bb702 100644
--- a/hn-vue/src/pages/Register.vue
+++ b/hn-vue/src/pages/Register.vue
@@ -42,7 +42,10 @@ export default {
           password: this.password,
           confirmPassword: this.confirmPassword,
         });
-        this.$router.push({ name: "links" });
+        this.$redirectWithMessage(
+          { name: "links" },
+          "Votre compte a bien été créé !"
+        );
       } catch (e) {
         this.err = e;
       }
diff --git a/hn-vue/src/plugins/Notifications.js b/hn-vue/src/plugins/Notifications.js
new file mode 100644
index 0000000..cfd5ec8
--- /dev/null
+++ b/hn-vue/src/plugins/Notifications.js
@@ -0,0 +1,12 @@
+export default {
+  install(Vue) {
+    Vue.prototype.$message = function(message) {
+      this.$store.dispatch("addMessage", message);
+    };
+
+    Vue.prototype.$redirectWithMessage = function(to, message) {
+      this.$message(message);
+      this.$router.push(to);
+    };
+  },
+};
diff --git a/hn-vue/src/store.js b/hn-vue/src/store.js
new file mode 100644
index 0000000..f839a2e
--- /dev/null
+++ b/hn-vue/src/store.js
@@ -0,0 +1,27 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default function createStore() {
+  return new Vuex.Store({
+    state: {
+      messages: [],
+    },
+    mutations: {
+      pushMessage(state, message) {
+        state.messages = [...state.messages, message];
+      },
+      removeMessage(state, message) {
+        state.messages = state.messages.filter((m) => m !== message);
+      },
+    },
+    actions: {
+      addMessage({ commit }, message) {
+        commit("pushMessage", message);
+
+        setTimeout(() => commit("removeMessage", message), 3000);
+      },
+    },
+  });
+}