Toast disappear functionnalities

package-lock.json

@@ -1377,6 +1377,12 @@
         }
       }
     },
+    "@types/uuid": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
+      "integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.26",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
@@ -9959,6 +9965,14 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "require-directory": {
@@ -10604,6 +10618,14 @@
         "faye-websocket": "^0.11.3",
         "uuid": "^3.4.0",
         "websocket-driver": "^0.7.4"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "sockjs-client": {
@@ -11838,10 +11860,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "v8-compile-cache": {
       "version": "2.2.0",
@@ -12666,6 +12687,14 @@
       "requires": {
         "ansi-colors": "^3.0.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "webpack-merge": {

package.json

@@ -10,11 +10,13 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "uuid": "^8.3.2",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",

src/assets/scss/_animations.scss

@@ -27,6 +27,15 @@
   }
 }
 
+@keyframes fadeOut {
+  from {
+    opacity: 100%;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes fromBottom {
   from {
     transform: translateY(20px);
@@ -45,6 +54,15 @@
   }
 }
 
+@keyframes slideFromLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
 @keyframes paneBgAround {
   0% {
     background-position: -10vw 0%;

src/components/celestials/CelestialCard.vue

@@ -98,6 +98,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { v4 as uuidv4 } from "uuid";
 
 import store from "@/store";
 
@@ -124,7 +125,7 @@ export default defineComponent({
       store.dispatch("toggleFav", celestial.id);
       if (store.getters.isFav(celestial.id)) {
         store.dispatch("toasts/pushToast", {
-          id: 200,
+          id: uuidv4(),
           title: "Favori ajouté",
           message: `${celestial.name} a été ajouté à la liste des favoris.`,
           category: "valid",
@@ -132,7 +133,7 @@ export default defineComponent({
         });
       } else {
         store.dispatch("toasts/pushToast", {
-          id: 200,
+          id: uuidv4(),
           title: "Favori retiré",
           message: `${celestial.name} a été retiré de la liste des favoris.`,
           category: "valid",

src/components/toast/ToastCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toast-card" :class="toast.category">
+  <div class="toast-card" :class="[toast.category, closing ? 'closing' : '']">
     <div class="toast-title">
       <slot name="title" />
     </div>
@@ -12,8 +12,15 @@
 <script>
 import { defineComponent } from "vue";
 
+import store from "@/store";
+
 export default defineComponent({
   name: "ToastCard",
+  data() {
+    return {
+      closing: false
+    };
+  },
   props: {
     toast: Object
   },
@@ -25,10 +32,17 @@ export default defineComponent({
         setTimeout(() => {
           timeToLive = timeToLive - 1;
           this.countdown(timeToLive);
-        }, 800);
+        }, 900);
       } else {
         // When timer ends
+        this.closing = true;
+        setTimeout(() => {
+          this.close();
+        }, 1200);
       }
+    },
+    close() {
+      store.dispatch("toasts/purgeToast", this.toast.id);
     }
   },
   mounted() {
@@ -76,5 +90,9 @@ export default defineComponent({
   &.danger {
     background-color: $danger;
   }
+  &.closing {
+    animation: fadeOut 1.2s cubic-bezier(0.175, 1, 0.32, 1),
+      slideFromLeft 1.2s cubic-bezier(0.175, 1, 0.32, 1);
+  }
 }
 </style>

src/components/toast/ToastsList.vue

@@ -25,11 +25,6 @@ export default defineComponent({
     queue() {
       return this.$store.state.toasts.queue;
     }
-  },
-  watch: {
-    queue(next, old) {
-      console.log(old, next);
-    }
   }
 });
 </script>

src/shims-vue.d.ts

@@ -4,3 +4,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module 'uuid';

src/store/toasts/index.ts

@@ -1,7 +1,7 @@
 export default {
   state: {
     queue: Array<{
-      id: number;
+      id: string;
       title: string;
       message: string;
       category: string;
@@ -11,11 +11,17 @@ export default {
   mutations: {
     pushToast: (state: any, toast: any) => {
       state.queue.push(toast);
+    },
+    purgeToast: (state: any, toastId: string) => {
+      state.queue = state.queue.filter((toast: any) => toast.id != toastId);
     }
   },
   actions: {
     pushToast: ({ commit }: any, toast: any) => {
       commit("pushToast", toast);
+    },
+    purgeToast: ({ commit }: any, toastId: string) => {
+      commit("purgeToast", toastId);
     }
   }
 };