1
0

feat: implement paginator context

This commit is contained in:
Ayo 2023-01-10 20:08:36 +01:00
parent 1cd6448bc5
commit a2a76651a5
3 changed files with 10 additions and 7 deletions

View File

@ -2,7 +2,7 @@
// @ts-expect-error missing types // @ts-expect-error missing types
import { DynamicScroller } from 'vue-virtual-scroller' import { DynamicScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import type { Paginator, WsEvents } from 'masto' import type { Paginator, WsEvents, mastodon } from 'masto'
const { const {
paginator, paginator,
@ -11,13 +11,15 @@ const {
virtualScroller = false, virtualScroller = false,
eventType = 'update', eventType = 'update',
preprocess, preprocess,
context = 'public',
} = defineProps<{ } = defineProps<{
paginator: Paginator<T[], O> paginator: Paginator<T[], O>
keyProp?: keyof T keyProp?: keyof T
virtualScroller?: boolean virtualScroller?: boolean
stream?: Promise<WsEvents> stream?: Promise<WsEvents>
eventType?: 'notification' | 'update' eventType?: 'notification' | 'update'
preprocess?: (items: (U | T)[]) => U[] preprocess?: (items: (U | T)[], context?: mastodon.v2.FilterContext) => U[]
context?: mastodon.v2.FilterContext
}>() }>()
defineSlots<{ defineSlots<{
@ -42,7 +44,7 @@ defineSlots<{
const { t } = useI18n() const { t } = useI18n()
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess) const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess, context)
</script> </script>
<template> <template>

View File

@ -22,7 +22,7 @@ const showOriginSite = $computed(() =>
</script> </script>
<template> <template>
<CommonPaginator v-bind="{ paginator, stream, preprocess, buffer }" :virtual-scroller="virtualScroller"> <CommonPaginator v-bind="{ paginator, stream, preprocess, buffer }" :virtual-scroller="virtualScroller" :context="context">
<template #updater="{ number, update }"> <template #updater="{ number, update }">
<button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update"> <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }} {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}

View File

@ -5,7 +5,8 @@ export function usePaginator<T, P, U = T>(
_paginator: Paginator<T[], P>, _paginator: Paginator<T[], P>,
stream?: Promise<WsEvents>, stream?: Promise<WsEvents>,
eventType: 'notification' | 'update' = 'update', eventType: 'notification' | 'update' = 'update',
preprocess: (items: (T | U)[]) => U[] = items => items as unknown as U[], preprocess: (items: (T | U)[], context?: mastodon.v2.FilterContext) => U[] = items => items as unknown as U[],
context?: mastodon.v2.FilterContext,
buffer = 10, buffer = 10,
) { ) {
// called `next` method will mutate the internal state of the variable, // called `next` method will mutate the internal state of the variable,
@ -25,7 +26,7 @@ export function usePaginator<T, P, U = T>(
const deactivated = useDeactivated() const deactivated = useDeactivated()
async function update() { async function update() {
(items.value as U[]).unshift(...preprocess(prevItems.value as T[])) (items.value as U[]).unshift(...preprocess(prevItems.value as T[], context))
prevItems.value = [] prevItems.value = []
} }
@ -70,7 +71,7 @@ export function usePaginator<T, P, U = T>(
const result = await paginator.next() const result = await paginator.next()
if (!result.done && result.value.length) { if (!result.done && result.value.length) {
const preprocessedItems = preprocess([...nextItems.value, ...result.value] as (U | T)[]) const preprocessedItems = preprocess([...nextItems.value, ...result.value] as (U | T)[], context)
const itemsToShowCount const itemsToShowCount
= preprocessedItems.length <= buffer = preprocessedItems.length <= buffer
? preprocessedItems.length ? preprocessedItems.length