Added store favourites

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>

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 {

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>