feat: create saved posts component

components/pages/posts/content/Post.vue

@@ -90,8 +90,12 @@
               <!-- Action bar -->
               <div class="flex items-center bg-darkGray-100 justify-evenly">
                 <!-- Saucenao -->
-                <template v-if="!error.show && !isVideo">
-                  <PostSaucenao :mediaUrl="mediaResolutionChooser.url" />
+                <template v-if="!error.show">
+                  <template v-if="!isVideo">
+                    <PostSaucenao :media-url="mediaResolutionChooser.url" />
+                  </template>
+
+                  <PostSave :post-domain="postDomain" :post-data="postData" />
                 </template>
               </div>
 

components/pages/posts/content/PostSave.vue

@@ -0,0 +1,88 @@
+<template>
+  <button
+    type="button"
+    class="flex items-center gap-2 my-2 link group"
+    @click="savePostHandler"
+  >
+    <span class="sr-only"> Save post </span>
+
+    <HeartIcon
+      class="w-5 h-5 icon"
+      :class="{
+        'fill-current text-red-500 group-hover:text-red-400': isPostSaved,
+      }"
+    />
+
+    Save
+  </button>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import { HeartIcon } from 'vue-feather-icons'
+
+export default {
+  props: {
+    postDomain: {
+      type: String,
+      required: true,
+    },
+
+    postData: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  components: { HeartIcon },
+
+  computed: {
+    ...mapGetters('user', ['getSavedPosts']),
+    ...mapGetters('premium', ['isUserPremium']),
+
+    isPostSaved() {
+      const savedPosts = this.getSavedPosts
+
+      const domain = this.postDomain
+      const postData = this.postData
+
+      if (!savedPosts.hasOwnProperty(domain)) {
+        return false
+      }
+
+      const isPostSaved = savedPosts[domain].some(
+        (post) => post.data.id === postData.id
+      )
+
+      return isPostSaved
+    },
+  },
+
+  methods: {
+    ...mapActions('user', [
+      'addPostToSavedPosts',
+      'removePostFromSavedPosts',
+      'isPostInSavedPosts',
+    ]),
+
+    async savePostHandler() {
+      if (!this.isUserPremium) {
+        await this.$router.push({ name: 'premium' })
+        return
+      }
+
+      if (this.isPostSaved) {
+        await this.removePostFromSavedPosts({
+          domain: this.postDomain,
+          post: this.postData,
+        })
+      } else {
+        await this.addPostToSavedPosts({
+          domain: this.postDomain,
+          post: this.postData,
+        })
+      }
+    },
+  },
+}
+</script>