add notifications

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",

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",

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>

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>

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");

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

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

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