From c696d05365f7df33b9f145e5f57676d95e87b8bf Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 5 Mar 2021 22:17:13 +0900
Subject: [PATCH] refs #2209 Add subscribe/unsubscribe button in account
 profile

---
 src/config/locales/en/translation.json        |  8 ++-
 .../Contents/SideBar/AccountProfile.vue       | 55 ++++++++++++++++++-
 .../Contents/SideBar/AccountProfile.ts        | 20 +++++++
 3 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index 426b89a6..259a2e0a 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -356,8 +356,10 @@
       "follows_you": "Follows you",
       "doesnt_follow_you": "Doesn't follow you",
       "detail": "Detail",
-      "follow": "Follow",
-      "unfollow": "Unfollow",
+      "follow": "Follow this user",
+      "unfollow": "Unfollow this user",
+      "subscribe": "Subscribe this user",
+      "unsubscribe": "Unsubscribe this user",
       "follow_requested": "Follow requested",
       "open_in_browser": "Open in Browser",
       "manage_list_memberships": "Manage List Memberships",
@@ -436,6 +438,8 @@
     "toot_fetch_error": "Failed to fetch the toot detail",
     "follow_error": "Failed to follow the user",
     "unfollow_error": "Failed to unfollow the user",
+    "subscribe_error": "Failed to subscribe the user",
+    "unsubscribe_error": "Failed to unsubscribe the user",
     "lists_fetch_error": "Failed to fetch lists",
     "list_create_error": "Failed to create a list",
     "members_fetch_error": "Failed to fetch members",
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
index ea0e3119..40d7fbad 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
@@ -10,12 +10,26 @@
   >
     <div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
       <div class="header">
-        <div class="follow-follower" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
+        <div class="relationship" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
           <div class="follower-status">
             <el-tag class="status" size="small" v-if="relationship.followed_by">{{ $t('side_bar.account_profile.follows_you') }}</el-tag>
             <el-tag class="status" size="medium" v-else>{{ $t('side_bar.account_profile.doesnt_follow_you') }}</el-tag>
           </div>
+          <div class="notify" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
+            <div
+              v-if="relationship.notifying"
+              class="unsubscribe"
+              @click="unsubscribe(account)"
+              :title="$t('side_bar.account_profile.unsubscribe')"
+            >
+              <icon name="bell" scale="1.3"></icon>
+            </div>
+            <div v-else class="subscribe" @click="subscribe(account)" :title="$t('side_bar.account_profile.subscribe')">
+              <icon name="regular/bell" scale="1.3"></icon>
+            </div>
+          </div>
         </div>
+
         <div class="user-info">
           <div class="more" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
             <popper trigger="click" :options="{ placement: 'bottom' }" ref="popper">
@@ -243,6 +257,32 @@ export default {
     },
     identityOpen(link) {
       return window.shell.openExternal(link)
+    },
+    subscribe(account) {
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
+      try {
+        this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/subscribe', account)
+      } catch (err) {
+        this.$message({
+          message: this.$t('message.subscribe_error'),
+          type: 'error'
+        })
+      } finally {
+        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
+      }
+    },
+    unsubscribe(account) {
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
+      try {
+        this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unsubscribe', account)
+      } catch (err) {
+        this.$message({
+          message: this.$t('message.unsubscribe_error'),
+          type: 'error'
+        })
+      } finally {
+        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
+      }
     }
   }
 }
@@ -263,8 +303,9 @@ export default {
     word-wrap: break-word;
     font-size: var(--base-font-size);
 
-    .follow-follower {
-      text-align: left;
+    .relationship {
+      display: flex;
+      justify-content: space-between;
 
       .follower-status {
         .status {
@@ -273,6 +314,14 @@ export default {
           font-size: 1rem;
         }
       }
+
+      .notify {
+        cursor: pointer;
+
+        .unsubscribe {
+          color: #409eff;
+        }
+      }
     }
 
     .user-info {
diff --git a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
index ed9c9037..fc0ded0c 100644
--- a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
@@ -208,6 +208,26 @@ const actions: ActionTree<AccountProfileState, RootState> = {
     )
     const res = await client.getIdentityProof(account.id)
     commit(MUTATION_TYPES.CHANGE_IDENTITY_PROOFS, res.data)
+  },
+  subscribe: async ({ rootState, commit }, account: Entity.Account) => {
+    const client = generator(
+      rootState.TimelineSpace.sns,
+      rootState.TimelineSpace.account.baseURL,
+      rootState.TimelineSpace.account.accessToken,
+      rootState.App.userAgent
+    )
+    const res = await client.subscribeAccount(account.id)
+    commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
+  },
+  unsubscribe: async ({ rootState, commit }, account: Entity.Account) => {
+    const client = generator(
+      rootState.TimelineSpace.sns,
+      rootState.TimelineSpace.account.baseURL,
+      rootState.TimelineSpace.account.accessToken,
+      rootState.App.userAgent
+    )
+    const res = await client.unsubscribeAccount(account.id)
+    commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
   }
 }