feat(status): pin

This commit is contained in:
三咲智子 2022-11-24 18:35:03 +08:00
parent a72d770aa6
commit fe82df28e1
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E

View file

@ -1,21 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Status } from 'masto' import type { Status } from 'masto'
const { status } = defineProps<{ const { status: _status } = defineProps<{
status: Status status: Status
}>() }>()
let status = $ref<Status>({ ..._status })
const isAuthor = $computed(() => status.account.id === currentUser.value?.account?.id) watch(() => _status, (val) => {
status = { ...val }
}, { deep: true, immediate: true })
const clipboard = useClipboard() const clipboard = useClipboard()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const isAuthor = $computed(() => status.account.id === currentUser.value?.account?.id)
// Use different states to let the user press different actions right after the other // Use different states to let the user press different actions right after the other
const isLoading = $ref({ reblogged: false, favourited: false, bookmarked: false }) const isLoading = $ref({
async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmarked', newStatus: Promise<Status>) { reblogged: false,
favourited: false,
bookmarked: false,
pinned: false,
})
async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmarked' | 'pinned', newStatus: Promise<Status>) {
// Optimistic update // Optimistic update
Object.assign(status, { [action]: !status[action] }) status[action] = !status[action]
try { try {
isLoading[action] = true isLoading[action] = true
Object.assign(status, await newStatus) Object.assign(status, await newStatus)
@ -27,7 +37,12 @@ async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmark
const toggleReblog = () => toggleStatusAction( const toggleReblog = () => toggleStatusAction(
'reblogged', 'reblogged',
masto.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id), masto.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
if (status.reblogged)
// returns the original status
return res.reblog!
return res
}),
) )
const toggleFavourite = () => toggleStatusAction( const toggleFavourite = () => toggleStatusAction(
@ -54,6 +69,10 @@ const deleteStatus = async () => {
// TODO when timeline, remove this item // TODO when timeline, remove this item
} }
const togglePin = async () => toggleStatusAction(
'pinned',
masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id),
)
</script> </script>
<template> <template>
@ -123,8 +142,16 @@ const deleteStatus = async () => {
Open in original site Open in original site
</CommonDropdownItem> </CommonDropdownItem>
<!-- TODO -->
<template v-if="isAuthor"> <template v-if="isAuthor">
<!-- TODO -->
<CommonDropdownItem
v-if="isAuthor" icon="i-ri:pushpin-line"
@click="togglePin"
>
{{ status.pinned ? 'Unpin on profile' : 'Pin on profile' }}
</CommonDropdownItem>
<!-- TODO -->
<CommonDropdownItem v-if="isAuthor" icon="i-ri:edit-line"> <CommonDropdownItem v-if="isAuthor" icon="i-ri:edit-line">
Edit Edit
</CommonDropdownItem> </CommonDropdownItem>
@ -135,6 +162,12 @@ const deleteStatus = async () => {
> >
Delete Delete
</CommonDropdownItem> </CommonDropdownItem>
<CommonDropdownItem
v-if="isAuthor" icon="i-ri:eraser-line" text-red-600
>
Delete & re-draft
</CommonDropdownItem>
</template> </template>
</div> </div>
</template> </template>