From a9fa327c9bafd8ba9952d6080a84a71ecd215a12 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sun, 7 May 2023 08:06:23 -0400
Subject: [PATCH] Create Subscribe Button reusable component (#3468)

* Create Subscribe Button component

Co-Authored-By: Minh Hang Nguyen (Jenny) <55411709+minhhang107@users.noreply.github.com>

* use defineComponent, remove unused prop

Co-Authored-By: absidue <48293849+absidue@users.noreply.github.com>

* readd unsubscribe method

* add comment

* Fix typo

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* remove unused code

* move json serialization

---------

Co-authored-by: Minh Hang Nguyen (Jenny) <55411709+minhhang107@users.noreply.github.com>
Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
---
 .../ft-subscribe-button.js                    | 146 ++++++++++++++++++
 .../ft-subscribe-button.scss                  |   6 +
 .../ft-subscribe-button.vue                   |  12 ++
 .../watch-video-info/watch-video-info.js      | 106 +------------
 .../watch-video-info/watch-video-info.vue     |  11 +-
 src/renderer/views/Channel/Channel.css        |   7 -
 src/renderer/views/Channel/Channel.js         |  86 +----------
 src/renderer/views/Channel/Channel.vue        |  10 +-
 .../SubscribedChannels/SubscribedChannels.css |   2 +-
 .../SubscribedChannels/SubscribedChannels.js  |  62 +-------
 .../SubscribedChannels/SubscribedChannels.vue |  17 +-
 11 files changed, 188 insertions(+), 277 deletions(-)
 create mode 100644 src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
 create mode 100644 src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
 create mode 100644 src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue

diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
new file mode 100644
index 000000000..15a6147c9
--- /dev/null
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
@@ -0,0 +1,146 @@
+import { defineComponent } from 'vue'
+
+import { mapActions } from 'vuex'
+
+import FtButton from '../../components/ft-button/ft-button.vue'
+
+import { MAIN_PROFILE_ID } from '../../../constants'
+import { showToast } from '../../helpers/utils'
+
+export default defineComponent({
+  name: 'FtSubscribeButton',
+  components: {
+    'ft-button': FtButton
+  },
+  props: {
+    channelId: {
+      type: String,
+      required: true
+    },
+    channelName: {
+      type: String,
+      required: true
+    },
+    channelThumbnail: {
+      type: String,
+      required: true
+    },
+    subscriptionCountText: {
+      default: '',
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    profileList: function () {
+      return this.$store.getters.getProfileList
+    },
+
+    activeProfile: function () {
+      return this.$store.getters.getActiveProfile
+    },
+
+    subscriptionInfo: function () {
+      return this.activeProfile.subscriptions.find((channel) => {
+        return channel.id === this.channelId
+      }) ?? null
+    },
+
+    isSubscribed: function () {
+      return this.subscriptionInfo !== null
+    },
+
+    subscribedText: function () {
+      let subscribedValue = (this.isSubscribed ? this.$t('Channel.Unsubscribe') : this.$t('Channel.Subscribe')).toUpperCase()
+      if (this.subscriptionCountText !== '') {
+        subscribedValue += ' ' + this.subscriptionCountText
+      }
+      return subscribedValue
+    }
+
+  },
+  methods: {
+    handleSubscription: function () {
+      if (this.channelId === '') {
+        return
+      }
+
+      const currentProfile = JSON.parse(JSON.stringify(this.activeProfile))
+
+      if (this.isSubscribed) {
+        currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => {
+          return channel.id !== this.channelId
+        })
+
+        this.updateProfile(currentProfile)
+        showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
+
+        if (this.activeProfile._id === MAIN_PROFILE_ID) {
+          // Check if a subscription exists in a different profile.
+          // Remove from there as well.
+          let duplicateSubscriptions = 0
+
+          this.profileList.forEach((profile) => {
+            if (profile._id === MAIN_PROFILE_ID) {
+              return
+            }
+            duplicateSubscriptions += this.unsubscribe(profile, this.channelId)
+          })
+
+          if (duplicateSubscriptions > 0) {
+            const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
+            showToast(message)
+          }
+        }
+      } else {
+        const subscription = {
+          id: this.channelId,
+          name: this.channelName,
+          thumbnail: this.channelThumbnail
+        }
+        currentProfile.subscriptions.push(subscription)
+
+        this.updateProfile(currentProfile)
+        showToast(this.$t('Channel.Added channel to your subscriptions'))
+
+        if (this.activeProfile._id !== MAIN_PROFILE_ID) {
+          const primaryProfile = JSON.parse(JSON.stringify(this.profileList.find(prof => {
+            return prof._id === MAIN_PROFILE_ID
+          })))
+
+          const index = primaryProfile.subscriptions.findIndex((channel) => {
+            return channel.id === this.channelId
+          })
+
+          if (index === -1) {
+            primaryProfile.subscriptions.push(subscription)
+            this.updateProfile(primaryProfile)
+          }
+        }
+      }
+    },
+
+    unsubscribe: function(profile, channelId) {
+      const parsedProfile = JSON.parse(JSON.stringify(profile))
+      const index = parsedProfile.subscriptions.findIndex((channel) => {
+        return channel.id === channelId
+      })
+
+      if (index !== -1) {
+        // use filter instead of splice in case the subscription appears multiple times
+        // https://github.com/FreeTubeApp/FreeTube/pull/3468#discussion_r1179290877
+        parsedProfile.subscriptions = parsedProfile.subscriptions.filter((x) => {
+          return x.id !== channelId
+        })
+
+        this.updateProfile(parsedProfile)
+        return 1
+      }
+      return 0
+    },
+
+    ...mapActions([
+      'updateProfile'
+    ])
+  }
+})
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
new file mode 100644
index 000000000..7aff23304
--- /dev/null
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
@@ -0,0 +1,6 @@
+.subscribeButton {
+  align-self: center;
+  height: 50%;
+  margin-bottom: 10px;
+  min-width: 150px;
+}
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
new file mode 100644
index 000000000..bf6d90d97
--- /dev/null
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
@@ -0,0 +1,12 @@
+<template>
+  <ft-button
+    :label="subscribedText"
+    class="subscribeButton"
+    background-color="var(--primary-color)"
+    text-color="var(--text-with-main-color)"
+    @click="handleSubscription"
+  />
+</template>
+
+<script src="./ft-subscribe-button.js" />
+<style scoped src="./ft-subscribe-button.scss" lang="scss" />
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index dd3362bd4..58118ec47 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -1,19 +1,18 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
-import FtButton from '../ft-button/ft-button.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import FtShareButton from '../ft-share-button/ft-share-button.vue'
-import { MAIN_PROFILE_ID } from '../../../constants'
+import FtSubscribeButton from '../ft-subscribe-button/ft-subscribe-button.vue'
 import { formatNumber, openExternalLink, showToast } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'WatchVideoInfo',
   components: {
     'ft-card': FtCard,
-    'ft-button': FtButton,
     'ft-icon-button': FtIconButton,
-    'ft-share-button': FtShareButton
+    'ft-share-button': FtShareButton,
+    'ft-subscribe-button': FtSubscribeButton
   },
   props: {
     id: {
@@ -118,14 +117,6 @@ export default defineComponent({
       return this.$i18n.locale.replace('_', '-')
     },
 
-    profileList: function () {
-      return this.$store.getters.getProfileList
-    },
-
-    activeProfile: function () {
-      return this.$store.getters.getActiveProfile
-    },
-
     hideVideoLikesAndDislikes: function () {
       return this.$store.getters.getHideVideoLikesAndDislikes
     },
@@ -211,26 +202,6 @@ export default defineComponent({
       return formatNumber(this.viewCount) + ` ${this.$t('Video.Views').toLowerCase()}`
     },
 
-    isSubscribed: function () {
-      const subIndex = this.activeProfile.subscriptions.findIndex((channel) => {
-        return channel.id === this.channelId
-      })
-
-      if (subIndex === -1) {
-        return false
-      } else {
-        return true
-      }
-    },
-
-    subscribedText: function () {
-      if (this.isSubscribed) {
-        return `${this.$t('Channel.Unsubscribe').toUpperCase()} ${this.subscriptionCountText}`
-      } else {
-        return `${this.$t('Channel.Subscribe').toUpperCase()} ${this.subscriptionCountText}`
-      }
-    },
-
     dateString: function () {
       const date = new Date(this.published)
       const localeDateString = new Intl.DateTimeFormat([this.currentLocale, 'en'], { dateStyle: 'medium' }).format(date)
@@ -308,76 +279,6 @@ export default defineComponent({
       }
     },
 
-    handleSubscription: function () {
-      if (this.channelId === '') {
-        return
-      }
-
-      const currentProfile = JSON.parse(JSON.stringify(this.activeProfile))
-      const primaryProfile = JSON.parse(JSON.stringify(this.profileList[0]))
-
-      if (this.isSubscribed) {
-        currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => {
-          return channel.id !== this.channelId
-        })
-
-        this.updateProfile(currentProfile)
-        showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
-
-        if (this.activeProfile._id === MAIN_PROFILE_ID) {
-          // Check if a subscription exists in a different profile.
-          // Remove from there as well.
-          let duplicateSubscriptions = 0
-
-          this.profileList.forEach((profile) => {
-            if (profile._id === MAIN_PROFILE_ID) {
-              return
-            }
-            const parsedProfile = JSON.parse(JSON.stringify(profile))
-            const index = parsedProfile.subscriptions.findIndex((channel) => {
-              return channel.id === this.channelId
-            })
-
-            if (index !== -1) {
-              duplicateSubscriptions++
-
-              parsedProfile.subscriptions = parsedProfile.subscriptions.filter((x) => {
-                return x.id !== this.channelId
-              })
-
-              this.updateProfile(parsedProfile)
-            }
-          })
-
-          if (duplicateSubscriptions > 0) {
-            const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
-            showToast(message)
-          }
-        }
-      } else {
-        const subscription = {
-          id: this.channelId,
-          name: this.channelName,
-          thumbnail: this.channelThumbnail
-        }
-        currentProfile.subscriptions.push(subscription)
-
-        this.updateProfile(currentProfile)
-        showToast(this.$t('Channel.Added channel to your subscriptions'))
-
-        if (this.activeProfile._id !== MAIN_PROFILE_ID) {
-          const index = primaryProfile.subscriptions.findIndex((channel) => {
-            return channel.id === this.channelId
-          })
-
-          if (index === -1) {
-            primaryProfile.subscriptions.push(subscription)
-            this.updateProfile(primaryProfile)
-          }
-        }
-      }
-    },
-
     handleFormatChange: function (format) {
       switch (format) {
         case 'dash':
@@ -457,7 +358,6 @@ export default defineComponent({
 
     ...mapActions([
       'openInExternalPlayer',
-      'updateProfile',
       'addVideo',
       'removeVideo',
       'downloadMedia'
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 5e554af42..c28b18112 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -30,13 +30,12 @@
             >
               {{ channelName }}
             </router-link>
-            <ft-button
+            <ft-subscribe-button
               v-if="!hideUnsubscribeButton"
-              :label="subscribedText"
-              class="subscribeButton"
-              background-color="var(--primary-color)"
-              text-color="var(--text-with-main-color)"
-              @click="handleSubscription"
+              :channel-id="channelId"
+              :channel-name="channelName"
+              :channel-thumbnail="channelThumbnail"
+              :subscription-count-text="subscriptionCountText"
             />
           </div>
         </div>
diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 9a6a12d38..87d36ac47 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -69,13 +69,6 @@
   justify-content: space-between;
 }
 
-.subscribeButton {
-  height: 50px;
-  min-width: 150px;
-  align-self: center;
-  margin-bottom: 10px;
-}
-
 .shareIcon {
   align-self: center;
 }
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index c150f2261..f1e5afce0 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -1,7 +1,6 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
-import FtButton from '../../components/ft-button/ft-button.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
@@ -10,9 +9,9 @@ import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricted.vue'
 import FtShareButton from '../../components/ft-share-button/ft-share-button.vue'
+import FtSubscribeButton from '../../components/ft-subscribe-button/ft-subscribe-button.vue'
 
 import autolinker from 'autolinker'
-import { MAIN_PROFILE_ID } from '../../../constants'
 import { copyToClipboard, extractNumberFromString, formatNumber, isNullOrEmpty, showToast } from '../../helpers/utils'
 import packageDetails from '../../../../package.json'
 import {
@@ -36,7 +35,6 @@ export default defineComponent({
   name: 'Channel',
   components: {
     'ft-card': FtCard,
-    'ft-button': FtButton,
     'ft-input': FtInput,
     'ft-select': FtSelect,
     'ft-flex-box': FtFlexBox,
@@ -44,7 +42,8 @@ export default defineComponent({
     'ft-loader': FtLoader,
     'ft-element-list': FtElementList,
     'ft-age-restricted': FtAgeRestricted,
-    'ft-share-button': FtShareButton
+    'ft-share-button': FtShareButton,
+    'ft-subscribe-button': FtSubscribeButton
   },
   data: function () {
     return {
@@ -122,10 +121,6 @@ export default defineComponent({
       return this.$i18n.locale.replace('_', '-')
     },
 
-    profileList: function () {
-      return this.$store.getters.getProfileList
-    },
-
     activeProfile: function () {
       return this.$store.getters.getActiveProfile
     },
@@ -140,14 +135,6 @@ export default defineComponent({
       return this.subscriptionInfo !== null
     },
 
-    subscribedText: function () {
-      if (this.isSubscribed) {
-        return this.$t('Channel.Unsubscribe').toUpperCase()
-      } else {
-        return this.$t('Channel.Subscribe').toUpperCase()
-      }
-    },
-
     videoShortLiveSelectNames: function () {
       return [
         this.$t('Channel.Videos.Sort Types.Newest'),
@@ -1182,72 +1169,6 @@ export default defineComponent({
       })
     },
 
-    handleSubscription: function () {
-      const currentProfile = JSON.parse(JSON.stringify(this.activeProfile))
-      const primaryProfile = JSON.parse(JSON.stringify(this.profileList[0]))
-
-      if (this.isSubscribed) {
-        currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => {
-          return channel.id !== this.id
-        })
-
-        this.updateProfile(currentProfile)
-        showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
-
-        if (this.activeProfile._id === MAIN_PROFILE_ID) {
-          // Check if a subscription exists in a different profile.
-          // Remove from there as well.
-          let duplicateSubscriptions = 0
-
-          this.profileList.forEach((profile) => {
-            if (profile._id === MAIN_PROFILE_ID) {
-              return
-            }
-            const parsedProfile = JSON.parse(JSON.stringify(profile))
-            const index = parsedProfile.subscriptions.findIndex((channel) => {
-              return channel.id === this.id
-            })
-
-            if (index !== -1) {
-              duplicateSubscriptions++
-
-              parsedProfile.subscriptions = parsedProfile.subscriptions.filter((x) => {
-                return x.id !== this.id
-              })
-
-              this.updateProfile(parsedProfile)
-            }
-          })
-
-          if (duplicateSubscriptions > 0) {
-            const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
-            showToast(message)
-          }
-        }
-      } else {
-        const subscription = {
-          id: this.id,
-          name: this.channelName,
-          thumbnail: this.thumbnailUrl
-        }
-        currentProfile.subscriptions.push(subscription)
-
-        this.updateProfile(currentProfile)
-        showToast(this.$t('Channel.Added channel to your subscriptions'))
-
-        if (this.activeProfile._id !== MAIN_PROFILE_ID) {
-          const index = primaryProfile.subscriptions.findIndex((channel) => {
-            return channel.id === this.id
-          })
-
-          if (index === -1) {
-            primaryProfile.subscriptions.push(subscription)
-            this.updateProfile(primaryProfile)
-          }
-        }
-      }
-    },
-
     setErrorMessage: function (errorMessage, responseHasNameAndThumbnail = false) {
       this.isLoading = false
       this.errorMessage = errorMessage
@@ -1455,7 +1376,6 @@ export default defineComponent({
     },
 
     ...mapActions([
-      'updateProfile',
       'updateSubscriptionDetails'
     ])
   }
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index a20c9e130..906730172 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -67,13 +67,11 @@
               class="shareIcon"
             />
 
-            <ft-button
+            <ft-subscribe-button
               v-if="!hideUnsubscribeButton && (!errorMessage || isSubscribed)"
-              :label="subscribedText"
-              background-color="var(--primary-color)"
-              text-color="var(--text-with-main-color)"
-              class="subscribeButton"
-              @click="handleSubscription"
+              :channel-id="id"
+              :channel-name="channelName"
+              :channel-thumbnail="thumbnailUrl"
             />
           </div>
         </div>
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
index ae8eea032..78781b037 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -62,7 +62,7 @@
 }
 
 .unsubscribeContainer .btn {
-  padding: 5px 10px;
+  height: 80%;
 }
 
 @media only screen and (max-width: 680px) {
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.js b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
index 96b0a2ba8..0ca0ebe39 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.js
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
@@ -1,22 +1,19 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
-import FtButton from '../../components/ft-button/ft-button.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
-import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
-import { showToast } from '../../helpers/utils'
+import FtSubscribeButton from '../../components/ft-subscribe-button/ft-subscribe-button.vue'
 import { invidiousGetChannelInfo, youtubeImageUrlToInvidious, invidiousImageUrlToInvidious } from '../../helpers/api/invidious'
 import { getLocalChannel } from '../../helpers/api/local'
 
 export default defineComponent({
   name: 'SubscribedChannels',
   components: {
-    'ft-button': FtButton,
     'ft-card': FtCard,
     'ft-flex-box': FtFlexBox,
     'ft-input': FtInput,
-    'ft-prompt': FtPrompt
+    'ft-subscribe-button': FtSubscribeButton
   },
   data: function () {
     return {
@@ -29,12 +26,6 @@ export default defineComponent({
       },
       thumbnailSize: 176,
       ytBaseURL: 'https://yt3.ggpht.com',
-      showUnsubscribePrompt: false,
-      unsubscribePromptValues: [
-        'yes',
-        'no'
-      ],
-      channelToUnsubscribe: null,
       errorCount: 0
     }
   },
@@ -73,13 +64,6 @@ export default defineComponent({
 
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
-    },
-
-    unsubscribePromptNames: function () {
-      return [
-        this.$t('Yes'),
-        this.$t('No')
-      ]
     }
   },
   watch: {
@@ -121,45 +105,6 @@ export default defineComponent({
       })
     },
 
-    handleUnsubscribeButtonClick: function(channel) {
-      this.channelToUnsubscribe = channel
-      this.showUnsubscribePrompt = true
-    },
-
-    handleUnsubscribePromptClick: function(value) {
-      this.showUnsubscribePrompt = false
-      if (value !== 'yes') {
-        this.channelToUnsubscribe = null
-        return
-      }
-      this.unsubscribeChannel()
-    },
-
-    unsubscribeChannel: function () {
-      const currentProfile = JSON.parse(JSON.stringify(this.activeProfile))
-      let index = currentProfile.subscriptions.findIndex(channel => {
-        return channel.id === this.channelToUnsubscribe.id
-      })
-      currentProfile.subscriptions.splice(index, 1)
-
-      this.updateProfile(currentProfile)
-      showToast(this.$t('Channels.Unsubscribed', { channelName: this.channelToUnsubscribe.name }))
-
-      index = this.subscribedChannels.findIndex(channel => {
-        return channel.id === this.channelToUnsubscribe.id
-      })
-      this.subscribedChannels.splice(index, 1)
-
-      index = this.filteredChannels.findIndex(channel => {
-        return channel.id === this.channelToUnsubscribe.id
-      })
-      if (index !== -1) {
-        this.filteredChannels.splice(index, 1)
-      }
-
-      this.channelToUnsubscribe = null
-    },
-
     thumbnailURL: function(originalURL) {
       let newURL = originalURL
       // Sometimes relative protocol URLs are passed in
@@ -211,8 +156,7 @@ export default defineComponent({
     },
 
     ...mapActions([
-      'updateProfile',
-      'updateSubscriptionDetails',
+      'updateSubscriptionDetails'
     ])
   }
 })
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
index f82f6b3e5..94131d0b4 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
@@ -52,24 +52,17 @@
               v-if="!hideUnsubscribeButton"
               class="unsubscribeContainer"
             >
-              <ft-button
-                :label="$t('Channels.Unsubscribe')"
-                background-color="var(--search-bar-color)"
-                text-color="var(--secondary-text-color)"
-                @click="handleUnsubscribeButtonClick(channel)"
+              <ft-subscribe-button
+                class="btn"
+                :channel-id="channel.id"
+                :channel-name="channel.name"
+                :channel-thumbnail="channel.thumbnail"
               />
             </div>
           </div>
         </ft-flex-box>
       </template>
     </ft-card>
-    <ft-prompt
-      v-if="showUnsubscribePrompt"
-      :label="$t('Channels.Unsubscribe Prompt', { channelName: channelToUnsubscribe.name })"
-      :option-names="unsubscribePromptNames"
-      :option-values="unsubscribePromptValues"
-      @click="handleUnsubscribePromptClick"
-    />
   </div>
 </template>