elk/composables/paginator.ts

61 lines
1.2 KiB
TypeScript
Raw Normal View History

import type { Paginator } from 'masto'
2022-11-16 19:11:08 +03:00
import type { PaginatorState } from '~/types'
export function usePaginator<T>(paginator: Paginator<any, T[]>) {
2022-11-17 10:35:42 +03:00
const state = ref<PaginatorState>('idle')
const items = ref<T[]>([])
2022-11-22 01:59:51 +03:00
const newItems = ref<T[]>([])
const endAnchor = ref<HTMLDivElement>()
const bound = reactive(useElementBounding(endAnchor))
const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
2022-11-17 10:35:42 +03:00
const error = ref<unknown | undefined>()
async function loadNext() {
2022-11-17 10:35:42 +03:00
if (state.value !== 'idle')
return
2022-11-17 10:35:42 +03:00
state.value = 'loading'
try {
const result = await paginator.next()
if (result.value?.length) {
2022-11-22 01:59:51 +03:00
newItems.value = result.value
items.value.push(...newItems.value)
2022-11-17 10:35:42 +03:00
state.value = 'idle'
}
else {
state.value = 'done'
}
}
catch (e) {
error.value = e
state.value = 'error'
}
2022-11-16 19:11:08 +03:00
await nextTick()
bound.update()
}
useIntervalFn(() => {
bound.update()
}, 1000)
watch(
() => isInScreen,
() => {
2022-11-17 10:35:42 +03:00
if (isInScreen && state.value === 'idle')
loadNext()
},
{ immediate: true },
)
2022-11-17 10:35:42 +03:00
return {
items,
2022-11-22 01:59:51 +03:00
newItems,
2022-11-17 10:35:42 +03:00
state,
error,
endAnchor,
}
}