Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: follow actions on profile #23

Merged
merged 1 commit into from
Nov 22, 2022
Merged

feat: follow actions on profile #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
feat: follow actions on profile
  • Loading branch information
@patak-dev
patak-dev committed Nov 22, 2022
commit b6210aeb2bbbd0d6330cda7aac978613e126c9fb
1 change: 0 additions & 1 deletion components/account/AccountCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ function follow() {
<div flex justify-between>
<AccountInfo :account="account" p3 />
<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-else-if="isFollowing === false" color-gray hover:color-purple hover:cursor-pointer i-ri:user-follow-fill @click="follow" />
</div>
Expand Down
26 changes: 22 additions & 4 deletions components/account/AccountHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,28 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { Account, MastoClient } from 'masto'

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