elk/composables/paginator.ts

122 lines
3.0 KiB
TypeScript
Raw Normal View History

import type { Paginator, WsEvents } from 'masto'
2022-11-16 17:11:08 +01:00
import type { PaginatorState } from '~/types'
2023-01-08 07:21:09 +01:00
export function usePaginator<T, P>(
paginator: Paginator<T[], P>,
stream?: Promise<WsEvents>,
2022-12-27 18:47:05 +01:00
eventType: 'notification' | 'update' = 'update',
preprocess: (items: T[]) => T[] = (items: T[]) => items,
buffer = 10,
2022-12-27 18:47:05 +01:00
) {
2022-12-26 09:34:30 +01:00
const state = ref<PaginatorState>(isMastoInitialised.value ? 'idle' : 'loading')
2022-11-17 08:35:42 +01:00
const items = ref<T[]>([])
const nextItems = ref<T[]>([])
const prevItems = ref<T[]>([])
const endAnchor = ref<HTMLDivElement>()
const bound = reactive(useElementBounding(endAnchor))
const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
2022-11-17 08:35:42 +01:00
const error = ref<unknown | undefined>()
const deactivated = useDeactivated()
async function update() {
2023-01-08 22:22:14 +01:00
items.value.unshift(...preprocess(prevItems.value as any) as any)
prevItems.value = []
}
stream?.then((s) => {
s.on(eventType, (status) => {
if ('uri' in status)
cacheStatus(status, undefined, true)
const index = prevItems.value.findIndex((i: any) => i.id === status.id)
if (index >= 0)
prevItems.value.splice(index, 1)
2022-12-28 17:21:58 +01:00
prevItems.value.unshift(status as any)
})
// TODO: update statuses
s.on('status.update', (status) => {
cacheStatus(status, undefined, true)
const index = items.value.findIndex((s: any) => s.id === status.id)
if (index >= 0)
items.value[index] = status as any
})
s.on('delete', (id) => {
removeCachedStatus(id)
const index = items.value.findIndex((s: any) => s.id === id)
if (index >= 0)
items.value.splice(index, 1)
})
})
async function loadNext() {
2022-11-17 08:35:42 +01:00
if (state.value !== 'idle')
return
2022-11-17 08:35:42 +01:00
state.value = 'loading'
try {
const result = await paginator.next()
if (result.value?.length) {
const preprocessedItems = preprocess([...nextItems.value, ...result.value]) as any
const itemsToShowCount = preprocessedItems.length - buffer
nextItems.value = preprocessedItems.slice(itemsToShowCount)
items.value.push(...preprocessedItems.slice(0, itemsToShowCount))
2022-11-17 08:35:42 +01:00
state.value = 'idle'
}
else {
items.value.push(...nextItems.value)
nextItems.value = []
2022-11-17 08:35:42 +01:00
state.value = 'done'
}
}
catch (e) {
error.value = e
state.value = 'error'
}
2022-11-16 17:11:08 +01:00
await nextTick()
bound.update()
}
if (process.client) {
useIntervalFn(() => {
bound.update()
}, 1000)
2022-12-26 09:34:30 +01:00
if (!isMastoInitialised.value) {
2023-01-03 10:53:31 +01:00
onMastoInit(() => {
2022-12-26 09:34:30 +01:00
state.value = 'idle'
loadNext()
})
}
watch(
() => [isInScreen, state],
() => {
if (
isInScreen
&& state.value === 'idle'
// No new content is loaded when the keepAlive page enters the background
&& deactivated.value === false
)
loadNext()
},
)
}
2022-11-17 08:35:42 +01:00
return {
items,
prevItems,
update,
2022-11-17 08:35:42 +01:00
state,
error,
endAnchor,
}
}