elk/composables/paginator.ts

140 lines
3.6 KiB
TypeScript
Raw Normal View History

2024-01-09 08:56:15 +00:00
import type { mastodon } from 'masto'
2023-01-15 08:38:02 +00:00
import type { Ref } from 'vue'
2022-11-16 16:11:08 +00:00
import type { PaginatorState } from '~/types'
export function usePaginator<T, P, U = T>(
2024-01-09 08:56:15 +00:00
_paginator: mastodon.Paginator<T[], P>,
stream: Ref<mastodon.streaming.Subscription | undefined>,
preprocess: (items: (T | U)[]) => U[] = items => items as unknown as U[],
buffer = 10,
2022-12-27 17:47:05 +00:00
) {
2023-01-10 06:10:20 +00:00
// called `next` method will mutate the internal state of the variable,
// and we need its initial state after HMR
2023-01-09 17:43:28 +00:00
// so clone it
2023-01-10 06:10:20 +00:00
const paginator = _paginator.clone()
2023-01-09 17:43:28 +00:00
2023-01-15 08:38:02 +00:00
const state = ref<PaginatorState>(isHydrated.value ? 'idle' : 'loading')
2023-01-09 15:04:09 +00:00
const items = ref<U[]>([])
const nextItems = ref<U[]>([])
const prevItems = ref<T[]>([])
const endAnchor = ref<HTMLDivElement>()
const bound = useElementBounding(endAnchor)
const isInScreen = computed(() => bound.top.value < window.innerHeight * 2)
2022-11-17 07:35:42 +00:00
const error = ref<unknown | undefined>()
const deactivated = useDeactivated()
async function update() {
2023-01-09 15:04:09 +00:00
(items.value as U[]).unshift(...preprocess(prevItems.value as T[]))
prevItems.value = []
}
2024-02-24 14:51:51 +00:00
watch(stream, async (stream) => {
if (!stream)
2024-01-09 08:56:15 +00:00
return
2024-02-24 14:51:51 +00:00
for await (const entry of stream) {
2024-01-09 08:56:15 +00:00
if (entry.event === 'update') {
const status = entry.payload
if ('uri' in entry)
2023-01-15 08:38:02 +00:00
cacheStatus(status, undefined, true)
2023-01-15 08:38:02 +00:00
const index = prevItems.value.findIndex((i: any) => i.id === status.id)
if (index >= 0)
prevItems.value.splice(index, 1)
2022-12-28 16:21:58 +00:00
2023-01-15 08:38:02 +00:00
prevItems.value.unshift(status as any)
2024-01-09 08:56:15 +00:00
}
else if (entry.event === 'status.update') {
const status = entry.payload
2023-01-15 08:38:02 +00:00
cacheStatus(status, undefined, true)
2023-01-15 08:38:02 +00:00
const data = items.value as mastodon.v1.Status[]
const index = data.findIndex(s => s.id === status.id)
if (index >= 0)
data[index] = status
2024-01-09 08:56:15 +00:00
}
2024-01-09 08:56:15 +00:00
else if (entry.event === 'delete') {
const id = entry.payload
2023-01-15 08:38:02 +00:00
removeCachedStatus(id)
2023-01-15 08:38:02 +00:00
const data = items.value as mastodon.v1.Status[]
const index = data.findIndex(s => s.id === id)
if (index >= 0)
data.splice(index, 1)
2024-01-09 08:56:15 +00:00
}
}
2023-01-15 08:38:02 +00:00
}, { immediate: true })
async function loadNext() {
2022-11-17 07:35:42 +00:00
if (state.value !== 'idle')
return
2022-11-17 07:35:42 +00:00
state.value = 'loading'
try {
const result = await paginator.next()
if (!result.done && result.value.length) {
const preprocessedItems = preprocess([...nextItems.value, ...result.value] as (U | T)[])
const itemsToShowCount
= preprocessedItems.length <= buffer
? preprocessedItems.length
: preprocessedItems.length - buffer
;(nextItems.value as U[]) = preprocessedItems.slice(itemsToShowCount)
;(items.value as U[]).push(...preprocessedItems.slice(0, itemsToShowCount))
2022-11-17 07:35:42 +00:00
state.value = 'idle'
}
else {
items.value.push(...nextItems.value)
nextItems.value = []
2022-11-17 07:35:42 +00:00
state.value = 'done'
}
}
catch (e) {
console.error(e)
2022-11-17 07:35:42 +00:00
error.value = e
state.value = 'error'
}
2022-11-16 16:11:08 +00:00
await nextTick()
bound.update()
}
2024-02-24 16:46:14 +00:00
if (import.meta.client) {
useIntervalFn(() => {
bound.update()
}, 1000)
2023-01-15 08:38:02 +00:00
if (!isHydrated.value) {
onHydrated(() => {
2022-12-26 08:34:30 +00:00
state.value = 'idle'
loadNext()
})
}
watchEffect(
() => {
if (
isInScreen.value
&& state.value === 'idle'
// No new content is loaded when the keepAlive page enters the background
&& deactivated.value === false
)
loadNext()
},
)
}
2022-11-17 07:35:42 +00:00
return {
items,
prevItems,
update,
2022-11-17 07:35:42 +00:00
state,
error,
endAnchor,
}
}