fix(frontend): tweak use-pagination behaviour

This commit is contained in:
syuilo 2025-05-14 09:17:40 +09:00 committed by GitHub
parent 59fc18f2cd
commit e72ce6085a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 42 additions and 19 deletions

View File

@ -35,10 +35,15 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
baseId?: MisskeyEntity['id'];
direction?: 'newer' | 'older';
// 一部のAPIはさらに遡れる場合でもパフォーマンス上の理由でlimit以下の結果を返す場合があり、その場合はsafe、それ以外はlimitにすることを推奨
canFetchDetection?: 'safe' | 'limit';
};
export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I : never>(props: {
ctx: PagingCtx<Endpoint>;
autoInit?: boolean;
autoReInit?: boolean;
useShallowRef?: boolean;
}) {
const items = props.useShallowRef ? shallowRef<T[]>([]) : ref<T[]>([]);
@ -49,8 +54,9 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
const canFetchOlder = ref(false);
const error = ref(false);
// パラメータに何らかの変更があった際、再読込したいチャンネル等のIDが変わったなど
watch(() => [props.ctx.endpoint, props.ctx.params], init, { deep: true });
if (props.autoReInit !== false) {
watch(() => [props.ctx.endpoint, props.ctx.params], init, { deep: true });
}
function getNewestId(): string | null | undefined {
// 様々な要因により並び順は保証されないのでソートが必要
@ -92,12 +98,20 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
if (i === 3) item._shouldInsertAd_ = true;
}
if (res.length === 0 || props.ctx.noPaging) {
pushItems(res);
canFetchOlder.value = false;
} else {
pushItems(res);
canFetchOlder.value = true;
pushItems(res);
if (props.ctx.canFetchDetection === 'limit') {
if (res.length < FIRST_FETCH_LIMIT) {
canFetchOlder.value = false;
} else {
canFetchOlder.value = true;
}
} else if (props.ctx.canFetchDetection === 'safe' || props.ctx.canFetchDetection == null) {
if (res.length === 0 || props.ctx.noPaging) {
canFetchOlder.value = false;
} else {
canFetchOlder.value = true;
}
}
error.value = false;
@ -130,15 +144,22 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
if (i === 10) item._shouldInsertAd_ = true;
}
if (res.length === 0) {
canFetchOlder.value = false;
fetchingOlder.value = false;
} else {
pushItems(res);
canFetchOlder.value = true;
fetchingOlder.value = false;
pushItems(res);
if (props.ctx.canFetchDetection === 'limit') {
if (res.length < FIRST_FETCH_LIMIT) {
canFetchOlder.value = false;
} else {
canFetchOlder.value = true;
}
} else if (props.ctx.canFetchDetection === 'safe' || props.ctx.canFetchDetection == null) {
if (res.length === 0) {
canFetchOlder.value = false;
} else {
canFetchOlder.value = true;
}
}
}, err => {
}).finally(() => {
fetchingOlder.value = false;
});
}
@ -232,9 +253,11 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
}
}
onMounted(() => {
init();
});
if (props.autoInit !== false) {
onMounted(() => {
init();
});
}
return {
items: items as DeepReadonly<ShallowRef<T[]>>,