From 1476438d7360d8da62134ddbc529e55ef7fbc16a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= Date: Mon, 5 Dec 2022 00:41:37 +0800 Subject: [PATCH] fix: following badge closes #321 --- components/account/AccountFollowButton.vue | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue index cc2d29d2..4e2458aa 100644 --- a/components/account/AccountFollowButton.vue +++ b/components/account/AccountFollowButton.vue @@ -9,17 +9,17 @@ const { account, command, ...props } = defineProps<{ const isSelf = $computed(() => currentUser.value?.account.id === account.id) const enable = $computed(() => !isSelf && currentUser.value) -const relationship = $$(props.relationship) ?? useRelationship(account) +const relationship = $computed(() => props.relationship || useRelationship(account).value) async function toggleFollow() { - const rel = relationship.value - rel!.following = !rel!.following + relationship!.following = !relationship!.following try { - relationship.value = await useMasto().accounts[rel!.following ? 'follow' : 'unfollow'](account.id) + const newRel = await useMasto().accounts[relationship!.following ? 'follow' : 'unfollow'](account.id) + Object.assign(relationship!, newRel) } catch { // TODO error handling - rel!.following = !rel!.following + relationship!.following = !relationship!.following } } @@ -29,21 +29,19 @@ useCommand({ scope: 'Actions', order: -2, visible: () => command && enable, - name: () => `${relationship.value?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`, + name: () => `${relationship?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`, icon: 'i-ri:star-line', onActivate: () => toggleFollow(), }) const buttonStyle = $computed(() => { - const rel = relationship.value - // Skeleton while loading, avoid primary color flash - if (!rel) + if (!relationship) return 'text-inverted' // If following, use a label style with a strong border for Mutuals - if (rel.following) - return `text-base ${rel.followedBy ? 'border-strong' : 'border-base'}` + if (relationship.following) + return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}` // If not following, use a button style return 'text-inverted bg-primary border-primary'