refactor(frontend): improve pagination implementation

1 files changed, 24 insertions, 36 deletions

diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 679e8deaf5..fb9cd6e1f0 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <component :is="prefer.s.enablePullToRefresh && pullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => paginator.reload()" @contextmenu.prevent.stop="onContextmenu">
 	<div>
-		<MkPaginationControl v-if="props.withControl" v-model:order="order" v-model:date="date" style="margin-bottom: 10px" @reload="paginator.reload()"/>
+		<MkPaginationControl v-if="props.withControl" :paginator="paginator" style="margin-bottom: 10px"/>
 
 		<!-- :css="prefer.s.animation" にしたいけどバグる(おそらくvueのバグ) https://github.com/misskey-dev/misskey/issues/16078 -->
 		<Transition
@@ -26,14 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<div v-else key="_root_" class="_gaps">
 				<slot :items="paginator.items.value" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
-				<div v-if="order === 'oldest'">
-					<MkButton v-if="!paginator.fetchingNewer.value" :class="$style.more" :wait="paginator.fetchingNewer.value" primary rounded @click="paginator.fetchNewer">
+				<div v-if="paginator.order.value === 'oldest'">
+					<MkButton v-if="!paginator.fetchingNewer.value" :class="$style.more" :wait="paginator.fetchingNewer.value" primary rounded @click="paginator.fetchNewer()">
 						{{ i18n.ts.loadMore }}
 					</MkButton>
 					<MkLoading v-else/>
 				</div>
 				<div v-else v-show="paginator.canFetchOlder.value">
-					<MkButton v-if="!paginator.fetchingOlder.value" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchOlder">
+					<MkButton v-if="!paginator.fetchingOlder.value" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchOlder()">
 						{{ i18n.ts.loadMore }}
 					</MkButton>
 					<MkLoading v-else/>
@@ -44,49 +44,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 </component>
 </template>
 
-<script lang="ts" setup generic="T extends PagingCtx">
+<script lang="ts" setup generic="T extends Paginator, I = UnwrapRef<T['items']>">
 import { isLink } from '@@/js/is-link.js';
-import { ref, watch } from 'vue';
+import { onMounted, watch } from 'vue';
 import type { UnwrapRef } from 'vue';
-import type { PagingCtx } from '@/composables/use-pagination.js';
+import type { Paginator } from '@/utility/paginator.js';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
-import { usePagination } from '@/composables/use-pagination.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import MkPaginationControl from '@/components/MkPaginationControl.vue';
 import * as os from '@/os.js';
 
-type Paginator = ReturnType<typeof usePagination<T['endpoint']>>;
-
 const props = withDefaults(defineProps<{
-	pagination: T;
-	disableAutoLoad?: boolean;
-	displayLimit?: number;
+	paginator: T;
+	autoLoad?: boolean;
 	pullToRefresh?: boolean;
 	withControl?: boolean;
 }>(), {
-	displayLimit: 20,
+	autoLoad: true,
 	pullToRefresh: true,
 	withControl: false,
 });
 
-const order = ref<'newest' | 'oldest'>(props.pagination.order ?? 'newest');
-const date = ref<number | null>(null);
-
-const paginator: Paginator = usePagination({
-	ctx: props.pagination,
-});
-
-watch([order, date], () => {
-	paginator.updateCtx({
-		...props.pagination,
-		order: order.value,
-		initialDirection: order.value === 'oldest' ? 'newer' : 'older',
-		initialDate: date.value,
-	});
-}, { immediate: false });
-
 function onContextmenu(ev: MouseEvent) {
 	if (ev.target && isLink(ev.target as HTMLElement)) return;
 	if (window.getSelection()?.toString() !== '') return;
@@ -96,19 +76,27 @@ function onContextmenu(ev: MouseEvent) {
 		icon: 'ti ti-refresh',
 		text: i18n.ts.reload,
 		action: () => {
-			paginator.reload();
+			props.paginator.reload();
 		},
 	}], ev);
 }
 
+if (props.autoLoad) {
+	onMounted(() => {
+		props.paginator.init();
+	});
+}
+
+if (props.paginator.computedParams) {
+	watch(props.paginator.computedParams, () => {
+		props.paginator.reload();
+	}, { immediate: false, deep: true });
+}
+
 defineSlots<{
 	empty: () => void;
-	default: (props: { items: UnwrapRef<Paginator['items']> }) => void;
+	default: (props: { items: I }) => void;
 }>();
-
-defineExpose({
-	paginator: paginator,
-});
 </script>
 
 <style lang="scss" module>