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?= <sxzz@sxzz.moe>
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'