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

wip

This commit is contained in:
syuilo 2025-05-01 18:45:17 +09:00
parent 1857052b32
commit 7fe3b4f86c
5 changed files with 29 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/MkDateSeparatedList.vue
View File

@ -7,8 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts">
import { defineComponent, h, TransitionGroup, useCssModule } from 'vue';
import type { PropType } from 'vue';
import type { MisskeyEntity } from '@/types/date-separated-list.js';
import MkAd from '@/components/global/MkAd.vue';
import { isDebuggerEnabled, stackTraceInstances } from '@/debug.js';
import * as os from '@/os.js';
@ -19,7 +17,7 @@ import { getDateText } from '@/utility/timeline-date-separate.js';
export default defineComponent({
props: {
items: {
type: Array as PropType<MisskeyEntity[]>,
type: Array,
required: true,
},
direction: {

4
packages/frontend/src/components/MkNotifications.vue
View File

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
<div v-else-if="paginator.items.value.size === 0" key="_empty_">
<div v-else-if="paginator.items.value.length === 0" key="_empty_">
<slot name="empty">
<div class="_fullinfo">
<img :src="infoImageUrl" draggable="false"/>
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass=" $style.transition_x_move"
tag="div"
>
<template v-for="(notification, i) in Array.from(paginator.items.value.values())" :key="notification.id">
<template v-for="(notification, i) in paginator.items.value" :key="notification.id">
<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true" :data-scroll-anchor="notification.id"/>
<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/>
</template>

4
packages/frontend/src/components/MkPagination.vue
View File

@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
<div v-else-if="paginator.items.value.size === 0" key="_empty_">
<div v-else-if="paginator.items.value.length === 0" key="_empty_">
<slot name="empty">
<div class="_fullinfo">
<img :src="infoImageUrl" draggable="false"/>
@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkButton>
<MkLoading v-else/>
</div>
<slot :items="Array.from(paginator.items.value.values())" :fetching="paginator.fetching.value || paginator.moreFetching.value"></slot>
<slot :items="paginator.items.value" :fetching="paginator.fetching.value || paginator.moreFetching.value"></slot>
<div v-show="!pagination.reversed && paginator.canFetchMore.value" key="_more_">
<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchOlder">
{{ i18n.ts.loadMore }}

4
packages/frontend/src/components/MkTimeline.vue
View File

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
<div v-else-if="paginator.items.value.size === 0" key="_empty_">
<div v-else-if="paginator.items.value.length === 0" key="_empty_">
<slot name="empty">
<div class="_fullinfo">
<img :src="infoImageUrl" draggable="false"/>
@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass=" $style.transition_x_move"
tag="div"
>
<template v-for="(note, i) in Array.from(paginator.items.value.values())" :key="note.id">
<template v-for="(note, i) in paginator.items.value" :key="note.id">
<div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]" :data-scroll-anchor="note.id">
<MkNote :class="$style.note" :note="note" :withHardMute="true"/>
<div :class="$style.ad">

58
packages/frontend/src/use/use-pagination.ts
View File

@ -38,26 +38,12 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
offsetMode?: boolean;
};
function arrayToEntries(entities: MisskeyEntity[]): [string, MisskeyEntity][] {
return entities.map(en => [en.id, en]);
}
export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['endpoint']]['res']>(props: {
ctx: Ctx;
export function usePagination<T extends MisskeyEntity>(props: {
ctx: PagingCtx;
}) {
/**
* 表示するアイテムのソース
* 最新が0番目
*/
const items = ref<Map<string, T>>(new Map());
const items = ref<T[]>([]);
const queue = ref<T[]>([]);
/**
* 初期化中かどうか（trueならMkLoadingで全て隠す）
*/
const fetching = ref(true);
const moreFetching = ref(false);
const canFetchMore = ref(false);
const error = ref(false);
@ -67,19 +53,19 @@ export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['
function getNewestId() {
// 様々な要因により並び順は保証されないのでソートが必要
return Array.from(items.value.keys()).sort().at(-1);
return items.value.map(x => x.id).sort().at(-1);
}
function getOldestId() {
// 様々な要因により並び順は保証されないのでソートが必要
return Array.from(items.value.keys()).sort().at(0);
return items.value.map(x => x.id).sort().at(0);
}
async function init(): Promise<void> {
items.value = new Map();
items.value = [];
fetching.value = true;
const params = props.ctx.params ? isRef(props.ctx.params) ? props.ctx.params.value : props.ctx.params : {};
await misskeyApi<MisskeyEntity[]>(props.ctx.endpoint, {
await misskeyApi<T[]>(props.ctx.endpoint, {
...params,
limit: props.ctx.limit ?? FIRST_FETCH_LIMIT,
allowPartial: true,
@ -90,11 +76,11 @@ export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['
}
if (res.length === 0 || props.ctx.noPaging) {
concatItems(res);
pushItems(res);
canFetchMore.value = false;
} else {
if (props.ctx.reversed) moreFetching.value = true;
concatItems(res);
pushItems(res);
canFetchMore.value = true;
}
@ -111,14 +97,14 @@ export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['
}
async function fetchOlder(): Promise<void> {
if (!canFetchMore.value || fetching.value || moreFetching.value || items.value.size === 0) return;
if (!canFetchMore.value || fetching.value || moreFetching.value || items.value.length === 0) return;
moreFetching.value = true;
const params = props.ctx.params ? isRef(props.ctx.params) ? props.ctx.params.value : props.ctx.params : {};
await misskeyApi<MisskeyEntity[]>(props.ctx.endpoint, {
await misskeyApi<T[]>(props.ctx.endpoint, {
...params,
limit: SECOND_FETCH_LIMIT,
...(props.ctx.offsetMode ? {
offset: items.value.size,
offset: items.value.length,
} : {
untilId: getOldestId(),
}),
@ -132,7 +118,7 @@ export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['
canFetchMore.value = false;
moreFetching.value = false;
} else {
items.value = new Map([...items.value, ...arrayToEntries(res)]);
items.value.push(...res);
canFetchMore.value = true;
moreFetching.value = false;
}
@ -145,11 +131,11 @@ export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['
toQueue?: boolean;
} = {}): Promise<void> {
const params = props.ctx.params ? isRef(props.ctx.params) ? props.ctx.params.value : props.ctx.params : {};
await misskeyApi<MisskeyEntity[]>(props.ctx.endpoint, {
await misskeyApi<T[]>(props.ctx.endpoint, {
...params,
limit: SECOND_FETCH_LIMIT,
...(props.ctx.offsetMode ? {
offset: items.value.size,
offset: items.value.length,
} : {
sinceId: getNewestId(),
}),
@ -157,26 +143,26 @@ export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['
if (options.toQueue) {
queue.value.unshift(...res.toReversed());
} else {
items.value = new Map([...arrayToEntries(res.toReversed()), ...items.value]);
items.value.unshift(...res.toReversed());
}
});
}
function trim() {
if (items.value.size >= MAX_ITEMS) canFetchMore.value = true;
items.value = new Map([...items.value].slice(0, MAX_ITEMS));
if (items.value.length >= MAX_ITEMS) canFetchMore.value = true;
items.value = items.value.slice(0, MAX_ITEMS);
}
function unshiftItems(newItems: T[]) {
items.value = new Map([...arrayToEntries(newItems), ...items.value]);
items.value.unshift(...newItems);
}
function concatItems(oldItems: T[]) {
items.value = new Map([...items.value, ...arrayToEntries(oldItems)]);
function pushItems(oldItems: T[]) {
items.value.push(...oldItems);
}
function prepend(item: T) {
unshiftItems([item]);
items.value.unshift(item);
}
function enqueue(item: T) {