refactor(frontend): improve pagination implementation

1 files changed, 9 insertions, 14 deletions

diff --git a/packages/frontend/src/pages/admin/invites.vue b/packages/frontend/src/pages/admin/invites.vue
index f1584fc864..e1b4890513 100644
--- a/packages/frontend/src/pages/admin/invites.vue
+++ b/packages/frontend/src/pages/admin/invites.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkInput v-if="!noExpirationDate" v-model="expiresAt" type="datetime-local">
 						<template #label>{{ i18n.ts.expirationDate }}</template>
 					</MkInput>
-					<MkInput v-model="createCount" type="number" min="1">
+					<MkInput v-model="createCount" type="number" :min="1">
 						<template #label>{{ i18n.ts.createCount }}</template>
 					</MkInput>
 					<MkButton primary rounded @click="createWithOptions">{{ i18n.ts.create }}</MkButton>
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<option value="-usedAt">{{ i18n.ts.usedAt }} ({{ i18n.ts.descendingOrder }})</option>
 				</MkSelect>
 			</div>
-			<MkPagination ref="pagingComponent" :pagination="pagination">
+			<MkPagination :paginator="paginator">
 				<template #default="{ items }">
 					<div class="_gaps_s">
 						<MkInviteCode v-for="item in items" :key="item.id" :invite="(item as any)" :onDeleted="deleted" moderator/>
@@ -54,8 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, useTemplateRef } from 'vue';
-import type { PagingCtx } from '@/composables/use-pagination.js';
+import { computed, markRaw, ref, useTemplateRef } from 'vue';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -67,21 +66,19 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkInviteCode from '@/components/MkInviteCode.vue';
 import { definePage } from '@/page.js';
-
-const pagingComponent = useTemplateRef('pagingComponent');
+import { Paginator } from '@/utility/paginator.js';
 
 const type = ref('all');
 const sort = ref('+createdAt');
 
-const pagination: PagingCtx = {
-	endpoint: 'admin/invite/list' as const,
+const paginator = markRaw(new Paginator('admin/invite/list', {
 	limit: 10,
-	params: computed(() => ({
+	computedParams: computed(() => ({
 		type: type.value,
 		sort: sort.value,
 	})),
 	offsetMode: true,
-};
+}));
 
 const expiresAt = ref('');
 const noExpirationDate = ref(true);
@@ -100,13 +97,11 @@ async function createWithOptions() {
 		text: tickets.map(x => x.code).join('\n'),
 	});
 
-	tickets.forEach(ticket => pagingComponent.value?.paginator.prepend(ticket));
+	tickets.forEach(ticket => paginator.prepend(ticket));
 }
 
 function deleted(id: string) {
-	if (pagingComponent.value) {
-		pagingComponent.value.paginator.removeItem(id);
-	}
+	paginator.removeItem(id);
 }
 
 const headerActions = computed(() => []);