add follow/unfollow to followed tags list

src/components/followed_tag_card/FollowedTagCard.vue

@@ -1,10 +1,28 @@
 <template>
   <div class="followed-tag-card">
-    <h3>
+    <span>
       <router-link :to="{ name: 'tag-timeline', params: {tag: tag.name}}">
-        #{{ tag.name }}
+        <span class="tag-link">#{{ tag.name }}</span>
       </router-link>
-    </h3>
+      <span class="unfollow-tag">
+        <button
+          v-if="isFollowing"
+          class="button-default unfollow-tag-button"
+          :title="$t('user_card.unfollow_tag')"
+          @click="unfollowTag(tag.name)"
+        >
+          {{ $t('user_card.unfollow_tag') }}
+        </button>
+        <button
+          v-else
+          class="button-default follow-tag-button"
+          :title="$t('user_card.follow_tag')"
+          @click="followTag(tag.name)"
+        >
+          {{ $t('user_card.follow_tag') }}
+        </button>
+      </span>
+    </span>
   </div>
 </template>
 
@@ -15,13 +33,45 @@ export default {
     tag: {
       type: Object,
       required: true
-    }
     },
+  },
+  // this is a hack to update the state of the button
+  // for some reason, List does not update on changes to the tag object
+  data: () => ({
+    isFollowing: true
+  }),
+  mounted () {
+    this.isFollowing = this.tag.following
+  },
+  methods: {
+    unfollowTag (tag) {
+      this.$store.dispatch('unfollowTag', tag)
+      this.isFollowing = false
+    },
+    followTag (tag) {
+      this.$store.dispatch('followTag', tag)
+      this.isFollowing = true
+    }
+  }
 }
 </script>
 
 <style scoped>
   .followed-tag-card {
     margin-left: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  .unfollow-tag {
+    position: absolute;
+    right: 1rem;
+  }
+
+  .tag-link {
+    font-size: large;
+  }
+
+  .unfollow-tag-button, .follow-tag-button {
+    font-size: medium;
   }
 </style>

src/components/user_profile/user_profile.js

@@ -52,6 +52,7 @@ const UserProfile = {
       error: false,
       userId: null,
       tab: 'statuses',
+      followsTab: 'users',
       footerRef: null,
       note: null,
       noteLoading: false
@@ -176,6 +177,9 @@ const UserProfile = {
       this.tab = tab
       this.$router.replace({ hash: `#${tab}` })
     },
+    onFollowsTabSwitch (tab) {
+      this.followsTab = tab
+    },
     linkClicked ({ target }) {
       if (target.tagName === 'SPAN') {
         target = target.parentNode

src/components/user_profile/user_profile.vue

@@ -106,8 +106,9 @@
           :label="$t('user_card.followees')"
         >
           <tab-switcher
-            :active-tab="users"
+            :active-tab="followsTab"
             :render-only-focused="true"
+            :on-switch="onFollowsTabSwitch"
           >
             <div
               key="users"
@@ -126,12 +127,14 @@
             >
               <FollowedTagList
                 :user-id="userId"
-                :following="false"
                 :get-key="(item) => item.name"
               >
                 <template #item="{item}">
                   <FollowedTagCard :tag="item" />
                 </template>
+                <template #empty>
+                  {{ $t('user_card.not_following_any_hashtags')}}
+                </template>
               </FollowedTagList>
             </div>
           </tab-switcher>

src/i18n/en.json

@@ -1057,6 +1057,7 @@
         "show_new": "Show new",
         "socket_broke": "Realtime connection lost: CloseEvent code {0}",
         "socket_reconnected": "Realtime connection established",
+        "follow_tag": "Follow hashtag",
         "unfollow_tag": "Unfollow hashtag",
         "up_to_date": "Up-to-date"
     },
@@ -1179,6 +1180,9 @@
         "unfollow_confirm_accept_button": "Yes, unfollow",
         "unfollow_confirm_cancel_button": "No, don't unfollow",
         "unfollow_confirm_title": "Unfollow user",
+        "not_following_any_hashtags": "You are not following any hashtags",
+        "follow_tag": "Follow hashtag",
+        "unfollow_tag": "Unfollow hashtag",
         "unmute": "Unmute",
         "unmute_progress": "Unmuting…",
         "unsubscribe": "Unsubscribe"

src/modules/tags.js

@@ -2,11 +2,18 @@ import { merge } from 'lodash'
 
 const tags = {
   state: {
-    // Contains key = id, value = number of trackers for this poll
+    // Contains key = name, value = tag json
     tags: {}
   },
+  getters: {
+    findTag: state => query => {
+      const result = state.tags[query]
+      return result
+    },
+  },
   mutations: {
     setTag (state, { name, data }) {
+      console.log("Setting", name, {...data})
       state.tags[name] = data
     }
   },
@@ -17,17 +24,17 @@ const tags = {
         return tag
       })
     },
-    followTag (store, tagName) {
-      return store.rootState.api.backendInteractor.followHashtag({ tag: tagName })
+    followTag ({ rootState, commit }, tagName) {
+      return rootState.api.backendInteractor.followHashtag({ tag: tagName })
         .then((resp) => {
-          store.commit('setTag', { name: tagName, data: resp })
+          commit('setTag', { name: tagName, data: resp })
           return resp
         })
     },
-    unfollowTag ({ rootState, commit }, tag) {
-      return rootState.api.backendInteractor.unfollowHashtag({ tag })
+    unfollowTag ({ rootState, commit }, tagName) {
+      return rootState.api.backendInteractor.unfollowHashtag({ tag: tagName })
         .then((resp) => {
-          commit('setTag', { name: tag, data: resp })
+          commit('setTag', { name: tagName, data: resp })
           return resp
         })
     }

src/modules/users.js

@@ -193,11 +193,6 @@ export const mutations = {
       mergeOrAdd(state.users, state.usersObject, user)
     })
   },
-  addNewTags (state, tags) {
-    each(tags, (tag) => {
-      mergeOrAdd(state.tags, state.tagsObject, tag, 'name')
-    })
-  },
   updateUserRelationship (state, relationships) {
     relationships.forEach((relationship) => {
       state.relationships[relationship.id] = relationship
@@ -291,10 +286,6 @@ export const getters = {
     const rel = id && state.relationships[id]
     return rel || { id, loading: true }
   },
-  findTag: state => query => {
-    const result = state.tagsObject[query]
-    return result
-  },
 }
 
 export const defaultState = {
@@ -433,7 +424,7 @@ const users = {
 
       return rootState.api.backendInteractor.getFollowedHashtags({ pagination })
         .then(({ data: tags, pagination }) => {
-          commit('addNewTags', tags)
+          each(tags, tag => commit('setTag', { name: tag.name, data: tag }))
           commit('saveFollowedTagIds', { id, followedTagIds: tags.map(tag => tag.name) })
           commit('saveFollowedTagPagination', { id, pagination })
           return tags
@@ -477,9 +468,6 @@ const users = {
     addNewUsers ({ commit }, users) {
       commit('addNewUsers', users)
     },
-    addNewTags ({ commit }, tags) {
-      commit('addNewTags', tags)
-    },
     addNewStatuses (store, { statuses }) {
       const users = map(statuses, 'user')
       const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))