refactor(frontend): improve pagination implementation

1 files changed, 7 insertions, 8 deletions

diff --git a/packages/frontend/src/pages/search.user.vue b/packages/frontend/src/pages/search.user.vue
index eaec043311..bd67d41a80 100644
--- a/packages/frontend/src/pages/search.user.vue
+++ b/packages/frontend/src/pages/search.user.vue
@@ -17,17 +17,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkButton large primary gradate rounded @click="search">{{ i18n.ts.search }}</MkButton>
 	</div>
 
-	<MkFoldableSection v-if="userPagination">
+	<MkFoldableSection v-if="paginator">
 		<template #header>{{ i18n.ts.searchResult }}</template>
-		<MkUserList :key="`searchUsers:${key}`" :pagination="userPagination"/>
+		<MkUserList :key="`searchUsers:${key}`" :paginator="paginator"/>
 	</MkFoldableSection>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, toRef } from 'vue';
+import { markRaw, ref, shallowRef, toRef } from 'vue';
 import type { Endpoints } from 'misskey-js';
-import type { PagingCtx } from '@/composables/use-pagination.js';
 import MkUserList from '@/components/MkUserList.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkRadios from '@/components/MkRadios.vue';
@@ -38,6 +37,7 @@ import * as os from '@/os.js';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useRouter } from '@/router.js';
+import { Paginator } from '@/utility/paginator.js';
 
 const props = withDefaults(defineProps<{
 	query?: string,
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<{
 const router = useRouter();
 
 const key = ref(0);
-const userPagination = ref<PagingCtx<'users/search'>>();
+const paginator = shallowRef<Paginator<'users/search'> | null>(null);
 
 const searchQuery = ref(toRef(props, 'query').value);
 const searchOrigin = ref(toRef(props, 'origin').value);
@@ -112,15 +112,14 @@ async function search() {
 		}
 	}
 
-	userPagination.value = {
-		endpoint: 'users/search',
+	paginator.value = markRaw(new Paginator('users/search', {
 		limit: 10,
 		offsetMode: true,
 		params: {
 			query: query,
 			origin: instance.federation === 'none' ? 'local' : searchOrigin.value,
 		},
-	};
+	}));
 
 	key.value++;
 }