versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Add ability to follow and unfollow users

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-04-29 10:22:44 -10:00
parent 8c68957df8
commit 68e5ede6c6
No known key found for this signature in database
3 changed files with 86 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
components/sidebars/navigation.vue
View file

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

39
components/social-elements/users/Account.vue
View file

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