usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/frontend/src/composables/use-pagination.ts
View File

@ -35,10 +35,15 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
baseId?: MisskeyEntity['id']; baseId?: MisskeyEntity['id'];
direction?: 'newer' | 'older'; 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: { export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I : never>(props: {
ctx: PagingCtx<Endpoint>; ctx: PagingCtx<Endpoint>;
autoInit?: boolean;
autoReInit?: boolean;
useShallowRef?: boolean; useShallowRef?: boolean;
}) { }) {
const items = props.useShallowRef ? shallowRef<T[]>([]) : ref<T[]>([]); 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 canFetchOlder = ref(false);
const error = ref(false); const error = ref(false);
// パラメータに何らかの変更があった際、再読込したい（チャンネル等のIDが変わったなど） if (props.autoReInit !== false) {
watch(() => [props.ctx.endpoint, props.ctx.params], init, { deep: true }); watch(() => [props.ctx.endpoint, props.ctx.params], init, { deep: true });
}
function getNewestId(): string | null | undefined { 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 (i === 3) item._shouldInsertAd_ = true;
} }
if (res.length === 0 || props.ctx.noPaging) { pushItems(res);
pushItems(res);
canFetchOlder.value = false; if (props.ctx.canFetchDetection === 'limit') {
} else { if (res.length < FIRST_FETCH_LIMIT) {
pushItems(res); canFetchOlder.value = false;
canFetchOlder.value = true; } 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; error.value = false;
@ -130,15 +144,22 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
if (i === 10) item._shouldInsertAd_ = true; if (i === 10) item._shouldInsertAd_ = true;
} }
if (res.length === 0) { pushItems(res);
canFetchOlder.value = false;
fetchingOlder.value = false; if (props.ctx.canFetchDetection === 'limit') {
} else { if (res.length < FIRST_FETCH_LIMIT) {
pushItems(res); canFetchOlder.value = false;
canFetchOlder.value = true; } else {
fetchingOlder.value = false; 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; fetchingOlder.value = false;
}); });
} }
@ -232,9 +253,11 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
} }
} }
onMounted(() => { if (props.autoInit !== false) {
init(); onMounted(() => {
}); init();
});
}
return { return {
items: items as DeepReadonly<ShallowRef<T[]>>, items: items as DeepReadonly<ShallowRef<T[]>>,