teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: reblog and optimistic updates (#10)

Browse source
This commit is contained in:
patak 2022-11-16 22:07:24 +01:00 committed by GitHub
parent 1e273b36e3
commit 85eb81ba80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
components/status/StatusActions.vue
View file

@ -1,48 +1,58 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Status } from 'masto' import type { Status } from 'masto'
import AccountInfo from '../account/AccountInfo.vue'
const { status } = defineProps<{ const { status } = defineProps<{
status: Status status: Status
}>() }>()
const masto = await useMasto() const masto = await useMasto()
const isLoading = ref(false)
async function toggleFavourite() { // Use different states to let the user press different actions right after the other
const isLoading = $ref({ reblogged: false, favourited: false, bookmarked: false })
async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmarked', newStatus: Promise<Status>) {
// Optimistic update
Object.assign(status, { [action]: !status[action] })
try { try {
isLoading.value = true isLoading[action] = true
if (status.favourited) Object.assign(status, await newStatus)
Object.assign(status, await masto.statuses.unfavourite(status.id))
else
Object.assign(status, await masto.statuses.favourite(status.id))
} }
finally { finally {
isLoading.value = false isLoading[action] = false
} }
} }
async function toggleBookmark() { const toggleReblog = () => toggleStatusAction(
try { 'reblogged',
isLoading.value = true masto.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id),
const action = status.bookmarked ? 'unbookmark' : 'bookmark' )
Object.assign(status, await masto.statuses[action](status.id))
} const toggleFavourite = () => toggleStatusAction(
finally { 'favourited',
isLoading.value = false masto.statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
} )
}
const toggleBookmark = () => toggleStatusAction(
'bookmarked',
masto.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
)
</script> </script>
<template> <template>
<div flex gap-8 :class="isLoading ? 'pointer-events-none' : ''"> <div flex gap-8>
<RouterLink flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group :to="`/@${status.account.acct}/${status.id}`"> <RouterLink flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group :to="`/@${status.account.acct}/${status.id}`">
<div rounded-full p2 group-hover="bg-blue/10"> <div rounded-full p2 group-hover="bg-blue/10">
<div i-ri:chat-3-line /> <div i-ri:chat-3-line />
</div> </div>
<span v-if="status.repliesCount">{{ status.repliesCount }}</span> <span v-if="status.repliesCount">{{ status.repliesCount }}</span>
</RouterLink> </RouterLink>
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-green" group> <button
flex gap-1 items-center w-full rounded op75 hover="op100 text-green" group
:class="(status.reblogged ? 'text-green op100' : 'op75') + (isLoading.reblogged ? ' pointer-events-none' : '')"
@click="toggleReblog()"
>
<div rounded-full p2 group-hover="bg-green/10"> <div rounded-full p2 group-hover="bg-green/10">
<div i-ri:repeat-fill /> <div :class="status.reblogged ? 'i-ri:repeat-fill' : 'i-ri:repeat-line'" />
</div> </div>
<span v-if="status.reblogsCount">{{ status.reblogsCount }}</span> <span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
</button> </button>
@ -52,7 +62,7 @@ async function toggleBookmark() {
@click="toggleFavourite()" @click="toggleFavourite()"
> >
<div rounded-full p2 group-hover="bg-rose/10"> <div rounded-full p2 group-hover="bg-rose/10">
<div :class="status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'" /> <div :class="(status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line') + (isLoading.favourited ? ' pointer-events-none' : '')" />
</div> </div>
<span v-if="status.favouritesCount">{{ status.favouritesCount }}</span> <span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
</button> </button>
@ -62,7 +72,7 @@ async function toggleBookmark() {
@click="toggleBookmark()" @click="toggleBookmark()"
> >
<div rounded-full p2 group-hover="bg-rose/10"> <div rounded-full p2 group-hover="bg-rose/10">
<div :class="status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line'" /> <div :class="(status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line') + (isLoading.bookmarked ? ' pointer-events-none' : '')" />
</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>