zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: follow actions on profile (#23)

zio/stable
patak 2022-11-22 10:48:43 +01:00 committed by GitHub
parent 9aa7243d43
commit 5dc79df091
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/account/AccountCard.vue
View File

@ -27,7 +27,6 @@ function follow() {
<div flex justify-between> <div flex justify-between>
<AccountInfo :account="account" p3 /> <AccountInfo :account="account" p3 />
<div h-full p5> <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-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 v-else-if="isFollowing === false" color-gray hover:color-purple hover:cursor-pointer i-ri:user-follow-fill @click="follow" />
</div> </div>

26
components/account/AccountHeader.vue
View File

@ -1,10 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Account } from 'masto' import type { Account, MastoClient } from 'masto'
const { account } = defineProps<{ const { account } = defineProps<{
account: Account 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 createdAt = $computed(() => {
const date = new Date(account.createdAt) const date = new Date(account.createdAt)
return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date) return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date)
@ -32,9 +50,9 @@ const createdAt = $computed(() => {
</NuxtLink> </NuxtLink>
</div> </div>
<div flex gap-2> <div flex gap-2>
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-white b-purple" group> <button flex gap-1 items-center w-full rounded op75 hover="op100 text-white b-purple" group @click="toggleFollow">
<div rounded p2 group-hover="bg-rose/10"> <div rounded w-30 p2 group-hover="bg-rose/10">
Follow {{ isFollowing ? 'Unfollow' : isFollowedBy ? 'Follow back' : 'Follow' }}
</div> </div>
</button> </button>
<!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group> <!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>