feat: ✨ Add ability to follow and unfollow users

components/sidebars/navigation.vue

@@ -135,5 +135,6 @@ const signOut = async () => {
 
     tokenData.value = null;
     me.value = null;
+    await navigateTo("/");
 };
 </script>

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", {

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 };
+};