From 665bb18cb54827ae1d24dcc4aced71b2f448dcf6 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 9 Mar 2021 17:43:39 +0100
Subject: [PATCH 01/12] Refactored Celestials vue to use the composition API
 (just a test)

---
 src/plugins/methods/index.ts        |  9 ++++++--
 src/views/celestials/Celestials.vue | 36 ++++++++++++-----------------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/plugins/methods/index.ts b/src/plugins/methods/index.ts
index cad386a..57f7d9e 100644
--- a/src/plugins/methods/index.ts
+++ b/src/plugins/methods/index.ts
@@ -21,6 +21,11 @@ export const addCelestialType = (celestial: any) => {
   return celestial;
 };
 
-export default {
-  addCelestialType
+export const addCelestialsType = (celestials: any) => {
+  return celestials.map((e: any) => addCelestialType(e));
 };
+
+export default {
+  addCelestialType,
+  addCelestialsType
+};
\ No newline at end of file
diff --git a/src/views/celestials/Celestials.vue b/src/views/celestials/Celestials.vue
index dd50182..10e20b9 100644
--- a/src/views/celestials/Celestials.vue
+++ b/src/views/celestials/Celestials.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, onMounted, ref } from "vue";
 
 // API
 import axios from "axios";
 // Global methods
-import { addCelestialType } from "@/plugins/methods";
+import { addCelestialsType } from "@/plugins/methods";
 
 import CelestialsList from "@/components/celestials/CelestialsList.vue";
 import NestLoader from "@/components/NestLoader.vue";
@@ -34,38 +34,32 @@ export default defineComponent({
   },
   data() {
     return {
-      celestials: Array<any>(),
       error: ""
     };
   },
 
-  mounted() {
-    this.fetchCelestials()
-      .then(res => {
-        this.celestials = this.addType(res);
-      })
-      .catch(() => {
-        this.error = "Impossible de récupérer les astres.";
-      });
-  },
+  setup() {
+    const celestials = ref(Array<any>());
 
-  methods: {
     /**
      * Fetches celestial bodies from API
      */
-    fetchCelestials(): Promise<any> {
+    const fetchCelestials = (): Promise<any> => {
       return axios
         .get("https://api.le-systeme-solaire.net/rest/bodies/")
         .then(res => {
           return res.data.bodies;
         });
-    },
-    /**
-     * Assign a type from the celestial object provided
-     */
-    addType(bodies: Array<any>): Array<any> {
-      return bodies.map((e: any) => addCelestialType(e));
-    }
+    };
+
+    const getCelestials = async () => {
+      celestials.value = await fetchCelestials();
+      celestials.value = addCelestialsType(celestials.value);
+    };
+
+    onMounted(getCelestials);
+
+    return { celestials };
   }
 });
 </script>

From 5b3f4d19ec02b46d4c49ce52aa3ec686b7e0e2ab Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 12 Mar 2021 16:34:29 +0100
Subject: [PATCH 02/12] Moved api functions to relevant folders

---
 src/api/le-systeme-solaire/index.ts | 30 +++++++++++++++++++++++++++++
 src/api/wikipedia/index.ts          |  0
 src/plugins/methods/index.ts        |  2 +-
 src/views/celestials/Celestial.vue  | 18 +++--------------
 src/views/celestials/Celestials.vue | 14 ++------------
 5 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 src/api/le-systeme-solaire/index.ts
 create mode 100644 src/api/wikipedia/index.ts

diff --git a/src/api/le-systeme-solaire/index.ts b/src/api/le-systeme-solaire/index.ts
new file mode 100644
index 0000000..c5e29ba
--- /dev/null
+++ b/src/api/le-systeme-solaire/index.ts
@@ -0,0 +1,30 @@
+import axios from "axios";
+
+/**
+ * Fetches the API for all celestial bodies
+ * @returns Array of celestials in the API
+ */
+export const fetchCelestials = (): Promise<any> => {
+  return axios
+    .get("https://api.le-systeme-solaire.net/rest/bodies/")
+    .then(res => {
+      return res.data.bodies;
+    });
+};
+
+/**
+ * Fetches the API for all celestial bodies
+ * @returns Array of celestials in the API
+ */
+export const fetchCelestial = (slug: string): Promise<any> => {
+  return axios
+    .get(`https://api.le-systeme-solaire.net/rest/bodies/${slug}`)
+    .then(res => {
+      return res.data;
+    });
+};
+
+export default {
+  fetchCelestials,
+  fetchCelestial
+};
diff --git a/src/api/wikipedia/index.ts b/src/api/wikipedia/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/plugins/methods/index.ts b/src/plugins/methods/index.ts
index 57f7d9e..acdde32 100644
--- a/src/plugins/methods/index.ts
+++ b/src/plugins/methods/index.ts
@@ -28,4 +28,4 @@ export const addCelestialsType = (celestials: any) => {
 export default {
   addCelestialType,
   addCelestialsType
-};
\ No newline at end of file
+};
diff --git a/src/views/celestials/Celestial.vue b/src/views/celestials/Celestial.vue
index 332d796..576553e 100644
--- a/src/views/celestials/Celestial.vue
+++ b/src/views/celestials/Celestial.vue
@@ -19,7 +19,8 @@
 import { defineComponent } from "vue";
 
 // API
-import axios from "axios";
+import { fetchCelestial } from "@/api/le-systeme-solaire";
+
 // Global methods
 import { addCelestialType } from "@/plugins/methods";
 import NestLoader from "@/components/NestLoader.vue";
@@ -47,7 +48,7 @@ export default defineComponent({
 
   mounted() {
     // Fetches from API...
-    this.fetchCelestial()
+    fetchCelestial(this.slug)
       .then(res => {
         // Adds type after fake loading (it's just to showcase the spinner tbh)
         setTimeout(() => {
@@ -58,19 +59,6 @@ export default defineComponent({
       .catch(() => {
         this.error = "Impossible de récupérer l'astre demandé.";
       });
-  },
-
-  methods: {
-    /**
-     * Fetches celestial body from API
-     */
-    fetchCelestial(): Promise<any> {
-      return axios
-        .get(`https://api.le-systeme-solaire.net/rest/bodies/${this.slug}`)
-        .then(res => {
-          return res.data;
-        });
-    }
   }
 });
 </script>
diff --git a/src/views/celestials/Celestials.vue b/src/views/celestials/Celestials.vue
index 10e20b9..57685a1 100644
--- a/src/views/celestials/Celestials.vue
+++ b/src/views/celestials/Celestials.vue
@@ -19,7 +19,8 @@
 import { defineComponent, onMounted, ref } from "vue";
 
 // API
-import axios from "axios";
+import { fetchCelestials } from "@/api/le-systeme-solaire";
+
 // Global methods
 import { addCelestialsType } from "@/plugins/methods";
 
@@ -41,17 +42,6 @@ export default defineComponent({
   setup() {
     const celestials = ref(Array<any>());
 
-    /**
-     * Fetches celestial bodies from API
-     */
-    const fetchCelestials = (): Promise<any> => {
-      return axios
-        .get("https://api.le-systeme-solaire.net/rest/bodies/")
-        .then(res => {
-          return res.data.bodies;
-        });
-    };
-
     const getCelestials = async () => {
       celestials.value = await fetchCelestials();
       celestials.value = addCelestialsType(celestials.value);

From 49252a2c14509e8d5ad9ff45733058a95eb509d3 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 19 Mar 2021 17:33:51 +0100
Subject: [PATCH 03/12] Added store functions to add a favourite

---
 src/store/index.ts                 | 38 +++++++++++++++++++++++++++---
 src/views/celestials/Celestial.vue | 29 ++++++++++++++++-------
 2 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/src/store/index.ts b/src/store/index.ts
index 187b4cb..765e2f0 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,8 +1,40 @@
 import { createStore } from "vuex";
 
 export default createStore({
-  state: {},
-  mutations: {},
-  actions: {},
+  state: () => ({
+    user: {
+      favourites: Array<{ id: string }>()
+    }
+  }),
+  getters: {
+    // Returns the number of favs for the user
+    favCount: (state): number => {
+      return state.user.favourites.length;
+    },
+    // Returns true if celestial is fav
+    isAlreadyFav: state => (celestialId: string) => {
+      return state.user.favourites.find(fav => fav.id === celestialId);
+    }
+  },
+  mutations: {
+    addFav: (state, celestialId: string) => {
+      state.user.favourites.push({ id: celestialId });
+    },
+    removeFav: (state, celestialId: string) => {
+      state.user.favourites = state.user.favourites.filter(fav => fav.id != celestialId);
+    }
+  },
+  actions: {
+    toggleFav: ({ commit, getters }, celestialId: string) => {
+      // If the celestial is not faved
+      if (!getters.isAlreadyFav(celestialId)) {
+        // ... favs it
+        commit("addFav", celestialId);
+      } else {
+        // ...else unfavs
+        commit("removeFav", celestialId);
+      }
+    }
+  },
   modules: {}
 });
diff --git a/src/views/celestials/Celestial.vue b/src/views/celestials/Celestial.vue
index 576553e..50cb7cc 100644
--- a/src/views/celestials/Celestial.vue
+++ b/src/views/celestials/Celestial.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="celestial bg-image">
-    <div v-if="loaded">
+    <div v-if="celestialLoaded">
       <header>
         <h1 class="heading-1">{{ celestial.name }}</h1>
       </header>
@@ -8,6 +8,7 @@
         <div v-if="error">Une erreur est survenue : {{ error }}</div>
         <div>{{ celestial }}</div>
       </div>
+      <button @click="toggleFav(celestial.id)">Favourite</button>
     </div>
     <div v-else>
       <nest-loader />
@@ -18,8 +19,11 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import store from "@/store";
+
 // API
 import { fetchCelestial } from "@/api/le-systeme-solaire";
+// import { fetchWikipediaExcerpt } from "@/api/wikipedia";
 
 // Global methods
 import { addCelestialType } from "@/plugins/methods";
@@ -33,8 +37,9 @@ export default defineComponent({
 
   data() {
     return {
-      celestial: false,
-      loaded: false,
+      celestial: {},
+      celestialLoaded: false,
+      excerpt: "",
       error: ""
     };
   },
@@ -50,15 +55,23 @@ export default defineComponent({
     // Fetches from API...
     fetchCelestial(this.slug)
       .then(res => {
-        // Adds type after fake loading (it's just to showcase the spinner tbh)
-        setTimeout(() => {
-          this.celestial = addCelestialType(res);
-          this.loaded = true;
-        }, 1000);
+        this.celestial = addCelestialType(res);
+        this.celestialLoaded = true;
+        return this.celestial;
       })
       .catch(() => {
         this.error = "Impossible de récupérer l'astre demandé.";
+      })
+      .then(() => {
+        // fetchWikipediaExcerpt(celestial);
       });
+  },
+
+  methods: {
+    toggleFav: (celestialId: string) => {
+      store.dispatch("toggleFav", celestialId);
+      console.log(store.state.user.favourites);
+    },
   }
 });
 </script>

From 3bfef2fa0a11cf223dc1cee7a30dc0f0aeec339b Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 19 Mar 2021 17:34:04 +0100
Subject: [PATCH 04/12] Changed the text on home

---
 src/views/Home.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index f6e4435..42970ba 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,11 +3,11 @@
     <div class="splash fade-in-children">
       <h2 class="heading-1">Full Skies</h2>
       <p class="heading-2">
-        L'application Full Skies explore les cieux à votre place !
+        Explorez les cieux et le système solaire avec Full Skies !
       </p>
       <p class="heading-2">
         Embarquez pour un voyage stellaire ; destination : le système solaire et
-        ses astres.
+        ses astres si proches.
       </p>
     </div>
   </section>

From b97de9e5083bd8685b32f9fa4b054cc304323baf Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 19 Mar 2021 17:34:22 +0100
Subject: [PATCH 05/12] Fixed the default value of CelestialsFilters.vue

---
 src/components/celestials/CelestialFilters.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/celestials/CelestialFilters.vue b/src/components/celestials/CelestialFilters.vue
index 0b2bc00..d3f3050 100644
--- a/src/components/celestials/CelestialFilters.vue
+++ b/src/components/celestials/CelestialFilters.vue
@@ -71,7 +71,7 @@ export default defineComponent({
   data() {
     return {
       filters: {
-        all: false,
+        all: true,
         planets: false,
         moons: false,
         stars: false,

From bb62d38e6bef678b30681ce3e9241a8ff0959e3c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 19 Mar 2021 17:35:24 +0100
Subject: [PATCH 06/12] Changed "celestes" to "astres"

---
 src/components/Navbar.vue | 4 ++--
 src/router/index.ts       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 7eeee35..aaada17 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -23,8 +23,8 @@ export default defineComponent({
           link: "/"
         },
         {
-          text: "Célestes",
-          link: "/celestes"
+          text: "Astres",
+          link: "/astres"
         },
         {
           text: "À propos",
diff --git a/src/router/index.ts b/src/router/index.ts
index 7087f20..d6f1be3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,12 +19,12 @@ const routes: Array<RouteRecordRaw> = [
     component: About
   },
   {
-    path: "/celestes",
+    path: "/astres",
     name: "CelesteAll",
     component: Celestials
   },
   {
-    path: "/celestes/:slug",
+    path: "/astres/:slug",
     name: "CelesteSingle",
     component: Celestial,
     props: true

From e4c6861c061b3fb97623aa30ff34116e4b5f9606 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 19 Mar 2021 23:03:54 +0100
Subject: [PATCH 07/12] Added store favourites

---
 src/components/celestials/CelestialCard.vue | 72 +++++++++++++++++++--
 src/store/index.ts                          |  9 ++-
 src/views/celestials/Celestial.vue          | 10 ---
 3 files changed, 72 insertions(+), 19 deletions(-)

diff --git a/src/components/celestials/CelestialCard.vue b/src/components/celestials/CelestialCard.vue
index 4d61454..84e7d12 100644
--- a/src/components/celestials/CelestialCard.vue
+++ b/src/components/celestials/CelestialCard.vue
@@ -42,6 +42,15 @@
         </p>
       </div>
 
+      <div class="card-info">
+        <router-link
+          :to="{ name: 'CelesteSingle', params: { slug: celestial.id } }"
+          class="no-style"
+        >
+          <span class="material-icons-round">info</span>
+        </router-link>
+      </div>
+
       <div class="card-content">
         <div v-if="celestial.aroundPlanet">
           <p>
@@ -75,12 +84,13 @@
       </div>
 
       <div class="card-actions">
-        <router-link
-          :to="{ name: 'CelesteSingle', params: { slug: celestial.id } }"
-          class="btn btn-primary"
+        <button
+          @click="toggleFav(celestial.id)"
+          class="favourite no-style"
+          :class="isFav ? 'active' : ''"
         >
-          Détails
-        </router-link>
+          <span class="icon material-icons-round">favorite</span>
+        </button>
       </div>
     </div>
   </div>
@@ -89,6 +99,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import store from "@/store";
+
 export default defineComponent({
   name: "celestial-card",
   data() {
@@ -96,8 +108,22 @@ export default defineComponent({
       type: "unknown"
     };
   },
+  computed: {
+    isFav() {
+      if (store.getters.isFav(this.celestial?.id)) {
+        return true;
+      }
+      return false;
+    }
+  },
   props: {
     celestial: Object
+  },
+  methods: {
+    toggleFav: (celestialId: string) => {
+      store.dispatch("toggleFav", celestialId);
+      console.log(store.state.user.favourites);
+    }
   }
 });
 </script>
@@ -121,8 +147,18 @@ export default defineComponent({
     .card-icon {
       display: block;
       position: absolute;
-      top: 0;
+      top: 20px;
+      bottom: 20px;
+      left: 0;
       right: 0;
+      user-select: none;
+      pointer-events: none;
+      opacity: 4%;
+      img {
+        height: 100%;
+        width: 100%;
+        z-index: -1;
+      }
     }
 
     > * {
@@ -135,6 +171,30 @@ export default defineComponent({
       flex: 1 1 auto;
       min-height: 30px;
     }
+
+    .card-info {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+    .card-actions {
+      color: #afafaf;
+      .favourite {
+        .icon {
+          color: #afafaf;
+        }
+        &.active {
+          .icon {
+            position: relative;
+            display: inline-block;
+            will-change: font-size;
+            animation: toggleFavHeart 0.6s cubic-bezier(0.17, 0.89, 0.32, 1.49);
+            animation-fill-mode: forwards;
+          }
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/store/index.ts b/src/store/index.ts
index 765e2f0..82f088d 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -3,6 +3,7 @@ import { createStore } from "vuex";
 export default createStore({
   state: () => ({
     user: {
+      avatarUrl: "",
       favourites: Array<{ id: string }>()
     }
   }),
@@ -12,7 +13,7 @@ export default createStore({
       return state.user.favourites.length;
     },
     // Returns true if celestial is fav
-    isAlreadyFav: state => (celestialId: string) => {
+    isFav: state => (celestialId: string) => {
       return state.user.favourites.find(fav => fav.id === celestialId);
     }
   },
@@ -21,13 +22,15 @@ export default createStore({
       state.user.favourites.push({ id: celestialId });
     },
     removeFav: (state, celestialId: string) => {
-      state.user.favourites = state.user.favourites.filter(fav => fav.id != celestialId);
+      state.user.favourites = state.user.favourites.filter(
+        fav => fav.id != celestialId
+      );
     }
   },
   actions: {
     toggleFav: ({ commit, getters }, celestialId: string) => {
       // If the celestial is not faved
-      if (!getters.isAlreadyFav(celestialId)) {
+      if (!getters.isFav(celestialId)) {
         // ... favs it
         commit("addFav", celestialId);
       } else {
diff --git a/src/views/celestials/Celestial.vue b/src/views/celestials/Celestial.vue
index 50cb7cc..02c8dda 100644
--- a/src/views/celestials/Celestial.vue
+++ b/src/views/celestials/Celestial.vue
@@ -8,7 +8,6 @@
         <div v-if="error">Une erreur est survenue : {{ error }}</div>
         <div>{{ celestial }}</div>
       </div>
-      <button @click="toggleFav(celestial.id)">Favourite</button>
     </div>
     <div v-else>
       <nest-loader />
@@ -19,8 +18,6 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import store from "@/store";
-
 // API
 import { fetchCelestial } from "@/api/le-systeme-solaire";
 // import { fetchWikipediaExcerpt } from "@/api/wikipedia";
@@ -65,13 +62,6 @@ export default defineComponent({
       .then(() => {
         // fetchWikipediaExcerpt(celestial);
       });
-  },
-
-  methods: {
-    toggleFav: (celestialId: string) => {
-      store.dispatch("toggleFav", celestialId);
-      console.log(store.state.user.favourites);
-    },
   }
 });
 </script>

From 6784667b92d2ce309ec75d892755407a18e71814 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 19 Mar 2021 23:04:14 +0100
Subject: [PATCH 08/12] Fixed a bg pane bug and added material icons fonts

---
 src/assets/scss/_animations.scss | 11 +++++++++++
 src/assets/scss/_fonts.scss      |  1 +
 src/assets/scss/_global.scss     | 15 ++++++++++++++-
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/assets/scss/_animations.scss b/src/assets/scss/_animations.scss
index 601de22..db14edc 100644
--- a/src/assets/scss/_animations.scss
+++ b/src/assets/scss/_animations.scss
@@ -1,3 +1,14 @@
+@keyframes toggleFavHeart {
+  0%, 20% {
+    color: #d01d35;
+    transform: scale(1.2);
+  }
+  100% {
+    color: #d01d35;
+    transform: scale(1);
+  }
+}
+
 @keyframes fadeInBg {
   from {
     opacity: 0;
diff --git a/src/assets/scss/_fonts.scss b/src/assets/scss/_fonts.scss
index 2e45106..0f8698c 100644
--- a/src/assets/scss/_fonts.scss
+++ b/src/assets/scss/_fonts.scss
@@ -1 +1,2 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:wght@400;600;700;800;900&display=swap');
\ No newline at end of file
diff --git a/src/assets/scss/_global.scss b/src/assets/scss/_global.scss
index c55b6cb..8da6a8e 100644
--- a/src/assets/scss/_global.scss
+++ b/src/assets/scss/_global.scss
@@ -66,6 +66,18 @@ a {
   }
 }
 
+button {
+  &.no-style {
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
 hr {
   border-color: rgba($white, .2);
 }
@@ -140,13 +152,14 @@ hr {
     width: 100%;
     background-size: cover;
     background-attachment: fixed;
+    background-repeat: no-repeat;
     z-index: -1;
     opacity: 33%;
     pointer-events: none;
   }
   &.bg-fade-in {
     &:after {
-      width: 120vw;
+      background-size: 120vw;
       opacity: 0;
       animation: fadeInBg 2s ease-out 0s 1 forwards,
       paneBgAround 35s ease-in-out 0s infinite forwards;

From bbc4744eed19225b43b88de956319f8523a36f45 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 20 Mar 2021 00:03:04 +0100
Subject: [PATCH 09/12] Added toast style and comp

---
 src/App.vue                         |  5 ++-
 src/assets/scss/_animations.scss    |  9 +++++
 src/assets/scss/_variables.scss     | 10 +++++
 src/components/toast/ToastCard.vue  | 61 ++++++++++++++++++++++++++++
 src/components/toast/ToastsList.vue | 63 +++++++++++++++++++++++++++++
 5 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 src/components/toast/ToastCard.vue
 create mode 100644 src/components/toast/ToastsList.vue

diff --git a/src/App.vue b/src/App.vue
index d10ed83..04fe9b4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,16 +4,19 @@
     <div class="fs-content">
       <router-view />
     </div>
+    <toasts-list />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import Navbar from "@/components/Navbar.vue";
+import ToastsList from "@/components/toast/ToastsList.vue";
 
 export default defineComponent({
   components: {
-    Navbar
+    Navbar,
+    ToastsList,
   }
 });
 </script>
diff --git a/src/assets/scss/_animations.scss b/src/assets/scss/_animations.scss
index db14edc..164ec77 100644
--- a/src/assets/scss/_animations.scss
+++ b/src/assets/scss/_animations.scss
@@ -36,6 +36,15 @@
   }
 }
 
+@keyframes slideFromRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
 @keyframes paneBgAround {
   0% {
     background-position: -10vw 0%;
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 12c47f9..bec6060 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -8,6 +8,16 @@ $space-blue-600:  #234e69;
 $space-blue-500:  #457b9d;
 $space-blue-300:  #a8dadc;
 
+$blue:        #306BAC;
+$green:       #1c8267;
+$orange:      #ff9844;
+$red:         #9f2042;
+
+$info: $blue;
+$valid: $green;
+$warning: $orange;
+$danger: $red;
+
 $primary: $space-blue-700;
 $primary-light: $space-blue-600;
 
diff --git a/src/components/toast/ToastCard.vue b/src/components/toast/ToastCard.vue
new file mode 100644
index 0000000..2f8fb8e
--- /dev/null
+++ b/src/components/toast/ToastCard.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="toast-card" :class="variant">
+    <div class="toast-title">
+      <slot name="title" />
+    </div>
+    <div class="toast-message">
+      <slot name="message" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ToastCard",
+  props: {
+    variant: String
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.toast-card {
+  position: relative;
+  padding: 20px 30px 26px;
+  border-radius: 5px;
+  animation: fadeIn 1s cubic-bezier(0.175, 1, 0.32, 1),
+    slideFromRight 1s cubic-bezier(0.175, 1, 0.32, 1);
+    overflow: hidden;
+  .toast-title {
+    margin-bottom: 5px;
+    font-size: 16px;
+    font-weight: $fw-bold;
+  }
+  &:after {
+    position: absolute;
+    display: block;
+    content: "";
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 6px;
+    background: rgba($fs-black, 33%);
+  }
+  &.info {
+    background-color: $info;
+  }
+  &.valid {
+    background-color: $valid;
+  }
+  &.warning {
+    color: $fs-black;
+    background-color: $warning;
+  }
+  &.danger {
+    background-color: $danger;
+  }
+}
+</style>
diff --git a/src/components/toast/ToastsList.vue b/src/components/toast/ToastsList.vue
new file mode 100644
index 0000000..22c4c3d
--- /dev/null
+++ b/src/components/toast/ToastsList.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="toast-wrapper">
+    <div class="toast-item">
+      <toast-card variant="info">
+        <template #title>Toast informant</template>
+        <template #message>
+          Ce message est utilisé pour informer.
+        </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>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import ToastCard from "./ToastCard.vue";
+
+export default defineComponent({
+  name: "ToastsList",
+  components: {
+    ToastCard
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.toast-wrapper {
+  position: fixed;
+  top: 90px;
+  height: 100%;
+  right: 0;
+  pointer-events: none;
+  .toast-item {
+    pointer-events: all;
+    margin-right: 20px;
+    margin-bottom: 20px;
+  }
+}
+</style>

From ea83e946d87f029b5c0415f30380e0ac36f2d26d Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 20 Mar 2021 00:03:23 +0100
Subject: [PATCH 10/12] Added basic wikipedia thing idk if i'll have time lmao

---
 src/api/wikipedia/index.ts | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/api/wikipedia/index.ts b/src/api/wikipedia/index.ts
index e69de29..05c5d77 100644
--- a/src/api/wikipedia/index.ts
+++ b/src/api/wikipedia/index.ts
@@ -0,0 +1,36 @@
+import axios from "axios";
+
+/**
+ * Get the excerpt of the wikipedia (fr) article for the specific celestial object
+ * @param celestial A celestial object
+ */
+export const fetchWikipediaExcerpt = async (celestial: any): Promise<any> => {
+  let query = 'https://fr.wikipedia.org/w/api.php?action=opensearch';
+
+  switch (celestial.id) {
+    case "soleil":
+    case "lune":
+      query += `&search=${celestial.id}`;
+      break;
+    
+    case "planète à lunes":
+      query += `&search=${celestial.id}%20planète`;
+      break;
+  
+    default:
+      query += `&search=${celestial.id}%20${celestial.type}`;
+      break;
+  }
+
+  query += "&limit=1&namespace=0&format=json";
+
+  console.log(query);
+
+
+  const req = await axios.get(query);
+  return;
+};
+
+export default {
+  fetchWikipediaExcerpt
+}
\ No newline at end of file

From bf9d3537b30eaab858029314a7badb85603886a9 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 21 Mar 2021 00:28:33 +0100
Subject: [PATCH 11/12] Added toast timer functions

---
 src/App.vue                                 |  2 +-
 src/components/celestials/CelestialCard.vue | 24 ++++++++++--
 src/components/toast/ToastCard.vue          | 25 ++++++++++--
 src/components/toast/ToastsList.vue         | 43 +++++++--------------
 src/store/index.ts                          | 11 +++++-
 src/store/toasts/index.ts                   | 21 ++++++++++
 6 files changed, 89 insertions(+), 37 deletions(-)
 create mode 100644 src/store/toasts/index.ts

diff --git a/src/App.vue b/src/App.vue
index 04fe9b4..c289db1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,7 +16,7 @@ import ToastsList from "@/components/toast/ToastsList.vue";
 export default defineComponent({
   components: {
     Navbar,
-    ToastsList,
+    ToastsList
   }
 });
 </script>
diff --git a/src/components/celestials/CelestialCard.vue b/src/components/celestials/CelestialCard.vue
index 84e7d12..9297a2a 100644
--- a/src/components/celestials/CelestialCard.vue
+++ b/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) => {
-      store.dispatch("toggleFav", celestialId);
-      console.log(store.state.user.favourites);
+    toggleFav: (celestial: any) => {
+      store.dispatch("toggleFav", celestial.id);
+      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
+        });
+      }
     }
   }
 });
diff --git a/src/components/toast/ToastCard.vue b/src/components/toast/ToastCard.vue
index 2f8fb8e..c69fdfb 100644
--- a/src/components/toast/ToastCard.vue
+++ b/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,11 +41,12 @@ 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),
     slideFromRight 1s cubic-bezier(0.175, 1, 0.32, 1);
-    overflow: hidden;
+  overflow: hidden;
   .toast-title {
     margin-bottom: 5px;
     font-size: 16px;
diff --git a/src/components/toast/ToastsList.vue b/src/components/toast/ToastsList.vue
index 22c4c3d..7fc62c1 100644
--- a/src/components/toast/ToastsList.vue
+++ b/src/components/toast/ToastsList.vue
@@ -1,34 +1,10 @@
 <template>
   <div class="toast-wrapper">
-    <div class="toast-item">
-      <toast-card variant="info">
-        <template #title>Toast informant</template>
+    <div class="toast-item" v-for="toast in queue" :key="toast.id">
+      <toast-card :variant="toast.category" :toast="toast">
+        <template #title>{{ toast.title }}</template>
         <template #message>
-          Ce message est utilisé pour informer.
-        </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.
+          {{ toast.message }}
         </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>
diff --git a/src/store/index.ts b/src/store/index.ts
index 82f088d..76ae223 100644
--- a/src/store/index.ts
+++ b/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
+    }
+  }
 });
diff --git a/src/store/toasts/index.ts b/src/store/toasts/index.ts
new file mode 100644
index 0000000..65eddf4
--- /dev/null
+++ b/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);
+    }
+  }
+};

From e686ca9a750bb8ccf152a3edbf6e95fc976dffff Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 21 Mar 2021 11:21:32 +0100
Subject: [PATCH 12/12] Toast disappear functionnalities

---
 package-lock.json                           | 37 ++++++++++++++++++---
 package.json                                |  2 ++
 src/assets/scss/_animations.scss            | 18 ++++++++++
 src/components/celestials/CelestialCard.vue |  5 +--
 src/components/toast/ToastCard.vue          | 22 ++++++++++--
 src/components/toast/ToastsList.vue         |  5 ---
 src/shims-vue.d.ts                          |  2 ++
 src/store/toasts/index.ts                   |  8 ++++-
 8 files changed, 85 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d8410b7..9a5e866 100644
--- a/package-lock.json
+++ b/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": {
diff --git a/package.json b/package.json
index 279f571..055df93 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/scss/_animations.scss b/src/assets/scss/_animations.scss
index 164ec77..26372b3 100644
--- a/src/assets/scss/_animations.scss
+++ b/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%;
diff --git a/src/components/celestials/CelestialCard.vue b/src/components/celestials/CelestialCard.vue
index 9297a2a..4a950a5 100644
--- a/src/components/celestials/CelestialCard.vue
+++ b/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",
diff --git a/src/components/toast/ToastCard.vue b/src/components/toast/ToastCard.vue
index c69fdfb..a9b3d68 100644
--- a/src/components/toast/ToastCard.vue
+++ b/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>
diff --git a/src/components/toast/ToastsList.vue b/src/components/toast/ToastsList.vue
index 7fc62c1..bdbb3e7 100644
--- a/src/components/toast/ToastsList.vue
+++ b/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>
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 3804a43..f001839 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -4,3 +4,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module 'uuid';
\ No newline at end of file
diff --git a/src/store/toasts/index.ts b/src/store/toasts/index.ts
index 65eddf4..e3e229b 100644
--- a/src/store/toasts/index.ts
+++ b/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);
     }
   }
 };