From 5dc79df091f19fc078d97b2fcee438322ca213d3 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 22 Nov 2022 10:48:43 +0100
Subject: [PATCH] feat: follow actions on profile (#23)

---
 components/account/AccountCard.vue   |  1 -
 components/account/AccountHeader.vue | 26 ++++++++++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/components/account/AccountCard.vue b/components/account/AccountCard.vue
index 5fa3c9c6..f3d2e54c 100644
--- a/components/account/AccountCard.vue
+++ b/components/account/AccountCard.vue
@@ -27,7 +27,6 @@ function follow() {
   <div flex justify-between>
     <AccountInfo :account="account" p3 />
     <div h-full p5>
-      <!-- TODO is following logic and actions -->
       <div v-if="isFollowing === true" color-purple hover:color-gray hover:cursor-pointer i-ri:user-unfollow-fill @click="unfollow" />
       <div v-else-if="isFollowing === false" color-gray hover:color-purple hover:cursor-pointer i-ri:user-follow-fill @click="follow" />
     </div>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index f149dbb9..9263c86e 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -1,10 +1,28 @@
 <script setup lang="ts">
-import type { Account } from 'masto'
+import type { Account, MastoClient } from 'masto'
 
 const { account } = defineProps<{
   account: Account
 }>()
 
+let isFollowing = $ref<boolean | undefined>()
+let isFollowedBy = $ref<boolean | undefined>()
+
+let masto: MastoClient
+
+onMounted(async () => {
+  masto ??= await useMasto()
+  const relationship = (await masto.accounts.fetchRelationships([account.id]))[0]
+  isFollowing = relationship.following
+  isFollowedBy = relationship.followedBy
+})
+
+async function toggleFollow() {
+  isFollowing = !isFollowing
+  masto ??= await useMasto()
+  await masto.accounts[isFollowing ? 'follow' : 'unfollow'](account.id)
+}
+
 const createdAt = $computed(() => {
   const date = new Date(account.createdAt)
   return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date)
@@ -32,9 +50,9 @@ const createdAt = $computed(() => {
           </NuxtLink>
         </div>
         <div flex gap-2>
-          <button flex gap-1 items-center w-full rounded op75 hover="op100 text-white b-purple" group>
-            <div rounded p2 group-hover="bg-rose/10">
-              Follow
+          <button flex gap-1 items-center w-full rounded op75 hover="op100 text-white b-purple" group @click="toggleFollow">
+            <div rounded w-30 p2 group-hover="bg-rose/10">
+              {{ isFollowing ? 'Unfollow' : isFollowedBy ? 'Follow back' : 'Follow' }}
             </div>
           </button>
           <!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>