From 68e5ede6c6c51bb0135493674ad2f7cc2283d2a1 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Mon, 29 Apr 2024 10:22:44 -1000
Subject: [PATCH] feat: :sparkles: Add ability to follow and unfollow users

---
 components/sidebars/navigation.vue           |  1 +
 components/social-elements/users/Account.vue | 39 +++++++++++++++-
 composables/Relationship.ts                  | 47 ++++++++++++++++++++
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 composables/Relationship.ts

diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 901fa48..6d3f29b 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -135,5 +135,6 @@ const signOut = async () => {
 
     tokenData.value = null;
     me.value = null;
+    await navigateTo("/");
 };
 </script>
\ No newline at end of file
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index d986aaa..cb4699d 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -15,7 +15,23 @@
                             :alt="`${account?.acct}'s avatar'`" />
                     </Skeleton>
                 </div>
-                <ButtonsSecondary v-if="account">Edit Profile</ButtonsSecondary>
+
+                <ClientOnly>
+                    <ButtonsSecondary v-if="account && account?.id === me?.id">Edit Profile
+                    </ButtonsSecondary>
+                    <ButtonsSecondary :loading="isLoading" @click="follow()"
+                        v-if="account && account?.id !== me?.id && relationship && !relationship.following && !relationship.requested">
+                        <span>Follow</span>
+                    </ButtonsSecondary>
+                    <ButtonsSecondary :loading="isLoading" @click="unfollow()"
+                        v-if="account && account?.id !== me?.id && relationship && relationship.following">
+                        <span>Unfollow</span>
+                    </ButtonsSecondary>
+                    <ButtonsSecondary :loading="isLoading" :disabled="true"
+                        v-if="account && account?.id !== me?.id && relationship && !relationship.following && relationship.requested">
+                        <span>Requested</span>
+                    </ButtonsSecondary>
+                </ClientOnly>
             </div>
 
             <div class="mt-2 px-4">
@@ -95,6 +111,27 @@ const props = defineProps<{
 }>();
 
 const skeleton = computed(() => !props.account);
+const tokenData = useTokenData();
+const me = useMe();
+const client = useMegalodon(tokenData);
+const accountId = computed(() => props.account?.id ?? null);
+const { relationship, isLoading } = useRelationship(client, accountId);
+
+const follow = () => {
+    if (!tokenData || !props.account || !relationship.value) return;
+    relationship.value = {
+        ...relationship.value,
+        following: true,
+    };
+};
+
+const unfollow = () => {
+    if (!tokenData || !props.account || !relationship.value) return;
+    relationship.value = {
+        ...relationship.value,
+        following: false,
+    };
+};
 
 const formattedJoin = computed(() =>
     Intl.DateTimeFormat("en-US", {
diff --git a/composables/Relationship.ts b/composables/Relationship.ts
new file mode 100644
index 0000000..d76239d
--- /dev/null
+++ b/composables/Relationship.ts
@@ -0,0 +1,47 @@
+import type { Mastodon } from "megalodon";
+import type { Relationship } from "~/types/mastodon/relationship";
+
+export const useRelationship = (
+    client: MaybeRef<Mastodon | null>,
+    accountId: MaybeRef<string | null>,
+) => {
+    const relationship = ref(null as Relationship | null);
+    const isLoading = ref(false);
+
+    if (!useSignedIn().value) {
+        return { relationship, isLoading };
+    }
+
+    watchEffect(() => {
+        if (toValue(accountId))
+            toValue(client)
+                ?.getRelationship(toValue(accountId) ?? "")
+                .then((res) => {
+                    relationship.value = res.data;
+                });
+    });
+
+    watch(relationship, (newOutput, oldOutput) => {
+        if (newOutput !== oldOutput && newOutput && oldOutput) {
+            if (newOutput?.following !== oldOutput?.following) {
+                isLoading.value = true;
+                if (newOutput?.following) {
+                    toValue(client)
+                        ?.followAccount(toValue(accountId) ?? "")
+                        .finally(() => {
+                            isLoading.value = false;
+                        });
+                } else {
+                    toValue(client)
+                        ?.unfollowAccount(toValue(accountId) ?? "")
+                        .finally(() => {
+                            isLoading.value = false;
+                        });
+                }
+            }
+            // FIXME: Add more relationship changes
+        }
+    });
+
+    return { relationship, isLoading };
+};