From e095e22f2c8e5db13da098fd724ada903c081bde Mon Sep 17 00:00:00 2001 From: FloatingGhost Date: Sun, 1 Jan 2023 21:05:25 +0000 Subject: [PATCH] add follow/unfollow to followed tags list --- .../followed_tag_card/FollowedTagCard.vue | 64 +++++++++++++++++-- src/components/user_profile/user_profile.js | 4 ++ src/components/user_profile/user_profile.vue | 7 +- src/hocs/with_load_more/with_load_more.jsx | 2 +- src/i18n/en.json | 4 ++ src/modules/tags.js | 21 ++++-- src/modules/users.js | 14 +--- 7 files changed, 86 insertions(+), 30 deletions(-) diff --git a/src/components/followed_tag_card/FollowedTagCard.vue b/src/components/followed_tag_card/FollowedTagCard.vue index 3ce5d8e9..d9394ddc 100644 --- a/src/components/followed_tag_card/FollowedTagCard.vue +++ b/src/components/followed_tag_card/FollowedTagCard.vue @@ -1,10 +1,28 @@ @@ -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 + } + } } diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 702148c1..1cadddda 100644 --- a/src/components/user_profile/user_profile.js +++ b/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 diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index e657b8a4..5465778a 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -106,8 +106,9 @@ :label="$t('user_card.followees')" >
+
diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx index 7960663b..c55eccf5 100644 --- a/src/hocs/with_load_more/with_load_more.jsx +++ b/src/hocs/with_load_more/with_load_more.jsx @@ -89,7 +89,7 @@ const withLoadMore = ({ const children = this.$slots return (
- + {children}
diff --git a/src/i18n/en.json b/src/i18n/en.json index ee7c53a6..8c3d5af9 100644 --- a/src/i18n/en.json +++ b/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" diff --git a/src/modules/tags.js b/src/modules/tags.js index cff54b7d..312f7d93 100644 --- a/src/modules/tags.js +++ b/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 }) } diff --git a/src/modules/users.js b/src/modules/users.js index 456aa746..c63b93de 100644 --- a/src/modules/users.js +++ b/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'))