add follow/unfollow to followed tags list

This commit is contained in:
FloatingGhost 2023-01-01 21:05:25 +00:00
parent e9f16af82d
commit 62287fffae
7 changed files with 86 additions and 30 deletions

View file

@ -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>

View file

@ -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

View file

@ -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>

View file

@ -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"

View file

@ -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
})
}

View file

@ -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'))