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("/");
};
\ 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'`" />
- Edit Profile
+
+
+ Edit Profile
+
+
+ Follow
+
+
+ Unfollow
+
+
+ Requested
+
+
@@ -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,
+ accountId: MaybeRef,
+) => {
+ 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 };
+};