refactor(frontend): improve pagination implementation

1 files changed, 11 insertions, 9 deletions

diff --git a/packages/frontend/src/pages/user/notes.vue b/packages/frontend/src/pages/user/notes.vue
index c97177b6a5..b5e600da92 100644
--- a/packages/frontend/src/pages/user/notes.vue
+++ b/packages/frontend/src/pages/user/notes.vue
@@ -15,18 +15,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<option value="files">{{ i18n.ts.withFiles }}</option>
 				</MkTab>
 			</template>
-			<MkNotesTimeline :key="tab" :noGap="true" :pagination="pagination" :class="$style.tl"/>
+			<MkNotesTimeline v-if="tab === 'featured'" :noGap="true" :paginator="featuredPaginator" :class="$style.tl"/>
+			<MkNotesTimeline v-else :noGap="true" :paginator="notesPaginator" :class="$style.tl"/>
 		</MkStickyContainer>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, markRaw } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkNotesTimeline from '@/components/MkNotesTimeline.vue';
 import MkTab from '@/components/MkTab.vue';
 import { i18n } from '@/i18n.js';
+import { Paginator } from '@/utility/paginator.js';
 
 const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
@@ -34,23 +36,23 @@ const props = defineProps<{
 
 const tab = ref<string>('all');
 
-const pagination = computed(() => tab.value === 'featured' ? {
-	endpoint: 'users/featured-notes' as const,
+const featuredPaginator = markRaw(new Paginator('users/featured-notes', {
 	limit: 10,
 	params: {
 		userId: props.user.id,
 	},
-} : {
-	endpoint: 'users/notes' as const,
+}));
+
+const notesPaginator = markRaw(new Paginator('users/notes', {
 	limit: 10,
-	params: {
+	computedParams: computed(() => ({
 		userId: props.user.id,
 		withRenotes: tab.value === 'all',
 		withReplies: tab.value === 'all',
 		withChannelNotes: tab.value === 'all',
 		withFiles: tab.value === 'files',
-	},
-});
+	})),
+}));
 </script>
 
 <style lang="scss" module>