Added toast timer functions

src/App.vue

@@ -16,7 +16,7 @@ import ToastsList from "@/components/toast/ToastsList.vue";
 export default defineComponent({
   components: {
     Navbar,
-    ToastsList,
+    ToastsList
   }
 });
 </script>

src/components/celestials/CelestialCard.vue

@@ -85,7 +85,7 @@
 
       <div class="card-actions">
         <button
-          @click="toggleFav(celestial.id)"
+          @click="toggleFav(celestial)"
           class="favourite no-style"
           :class="isFav ? 'active' : ''"
         >
@@ -120,9 +120,25 @@ export default defineComponent({
     celestial: Object
   },
   methods: {
-    toggleFav: (celestialId: string) => {
+    toggleFav: (celestial: any) => {
-      store.dispatch("toggleFav", celestialId);
+      store.dispatch("toggleFav", celestial.id);
-      console.log(store.state.user.favourites);
+      if (store.getters.isFav(celestial.id)) {
+        store.dispatch("toasts/pushToast", {
+          id: 200,
+          title: "Favori ajouté",
+          message: `${celestial.name} a été ajouté à la liste des favoris.`,
+          category: "valid",
+          timer: 3
+        });
+      } else {
+        store.dispatch("toasts/pushToast", {
+          id: 200,
+          title: "Favori retiré",
+          message: `${celestial.name} a été retiré de la liste des favoris.`,
+          category: "valid",
+          timer: 3
+        });
+      }
     }
   }
 });

src/components/toast/ToastCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toast-card" :class="variant">
+  <div class="toast-card" :class="toast.category">
     <div class="toast-title">
       <slot name="title" />
     </div>
@@ -15,7 +15,25 @@ import { defineComponent } from "vue";
 export default defineComponent({
   name: "ToastCard",
   props: {
-    variant: String
+    toast: Object
+  },
+  methods: {
+    // Counts down until 0 is reached
+    countdown(timeToLive) {
+      if (timeToLive > 0) {
+        console.log(timeToLive);
+        setTimeout(() => {
+          timeToLive = timeToLive - 1;
+          this.countdown(timeToLive);
+        }, 800);
+      } else {
+        // When timer ends
+      }
+    }
+  },
+  mounted() {
+    // Starts countdown to initial timer value
+    this.countdown(this.toast.timer);
   }
 });
 </script>
@@ -23,6 +41,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .toast-card {
   position: relative;
+  width: 300px;
   padding: 20px 30px 26px;
   border-radius: 5px;
   animation: fadeIn 1s cubic-bezier(0.175, 1, 0.32, 1),

src/components/toast/ToastsList.vue

@@ -1,34 +1,10 @@
 <template>
   <div class="toast-wrapper">
-    <div class="toast-item">
+    <div class="toast-item" v-for="toast in queue" :key="toast.id">
-      <toast-card variant="info">
+      <toast-card :variant="toast.category" :toast="toast">
-        <template #title>Toast informant</template>
+        <template #title>{{ toast.title }}</template>
         <template #message>
-          Ce message est utilisé pour informer.
+          {{ toast.message }}
-        </template>
-      </toast-card>
-    </div>
-    <div class="toast-item">
-      <toast-card variant="valid">
-        <template #title>Toast validant</template>
-        <template #message>
-          Ce message est utilisé pour valider.
-        </template>
-      </toast-card>
-    </div>
-    <div class="toast-item">
-      <toast-card variant="warning">
-        <template #title>Toast avertissant</template>
-        <template #message>
-          Ce message est utilisé pour avertir.
-        </template>
-      </toast-card>
-    </div>
-    <div class="toast-item">
-      <toast-card variant="danger">
-        <template #title>Toast d'alerte</template>
-        <template #message>
-          Ce message est utilisé pour alerter.
         </template>
       </toast-card>
     </div>
@@ -37,12 +13,23 @@
 
 <script>
 import { defineComponent } from "vue";
+
 import ToastCard from "./ToastCard.vue";
 
 export default defineComponent({
   name: "ToastsList",
   components: {
     ToastCard
+  },
+  computed: {
+    queue() {
+      return this.$store.state.toasts.queue;
+    }
+  },
+  watch: {
+    queue(next, old) {
+      console.log(old, next);
+    }
   }
 });
 </script>

src/store/index.ts

@@ -1,5 +1,7 @@
 import { createStore } from "vuex";
 
+import toastStore from "./toasts";
+
 export default createStore({
   state: () => ({
     user: {
@@ -39,5 +41,12 @@ export default createStore({
       }
     }
   },
-  modules: {}
+  modules: {
+    toasts: {
+      namespaced: true,
+      state: toastStore.state,
+      mutations: toastStore.mutations,
+      actions: toastStore.actions
+    }
+  }
 });

src/store/toasts/index.ts

@@ -0,0 +1,21 @@
+export default {
+  state: {
+    queue: Array<{
+      id: number;
+      title: string;
+      message: string;
+      category: string;
+      timer: number;
+    }>()
+  },
+  mutations: {
+    pushToast: (state: any, toast: any) => {
+      state.queue.push(toast);
+    }
+  },
+  actions: {
+    pushToast: ({ commit }: any, toast: any) => {
+      commit("pushToast", toast);
+    }
+  }
+};