rsesot/misskey
1
0
Fork 0
forked from mirrors/misskey
Code Pull Requests Activity

refactor(frontend): improve pagination implementation

Browse Source
This commit is contained in:
syuilo
2025-06-29 15:11:25 +09:00
parent 8bc822d829
commit f1deb89e34
68 changed files with 1067 additions and 1138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/pages/user/clips.vue
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div>
<MkPagination v-slot="{items}" :pagination="pagination" withControl>
<MkPagination v-slot="{items}" :paginator="paginator" withControl>
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" :class="$style.item" class="_panel _margin">
<b>{{ item.name }}</b>
<div v-if="item.description" :class="$style.description">{{ item.description }}</div>
@@ -17,21 +17,21 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, markRaw } from 'vue';
import * as Misskey from 'misskey-js';
import MkPagination from '@/components/MkPagination.vue';
import { Paginator } from '@/utility/paginator.js';
const props = defineProps<{
user: Misskey.entities.User;
}>();
const pagination = {
endpoint: 'users/clips' as const,
const paginator = markRaw(new Paginator('users/clips', {
limit: 20,
params: computed(() => ({
computedParams: computed(() => ({
userId: props.user.id,
})),
};
}));
</script>
<style lang="scss" module>

13
packages/frontend/src/pages/user/files.vue
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="_spacer" style="--MI_SPACER-w: 1100px;">
<div :class="$style.root">
<MkPagination v-slot="{items}" :pagination="pagination" withControl>
<MkPagination v-slot="{items}" :paginator="paginator" withControl>
<div :class="$style.stream">
<MkNoteMediaGrid v-for="note in items" :note="note" square/>
</div>
@@ -16,24 +16,23 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, markRaw } from 'vue';
import * as Misskey from 'misskey-js';
import MkNoteMediaGrid from '@/components/MkNoteMediaGrid.vue';
import MkPagination from '@/components/MkPagination.vue';
import { Paginator } from '@/utility/paginator.js';
const props = defineProps<{
user: Misskey.entities.UserDetailed;
}>();
const pagination = {
endpoint: 'users/notes' as const,
const paginator = markRaw(new Paginator('users/notes', {
limit: 15,
params: computed(() => ({
computedParams: computed(() => ({
userId: props.user.id,
withFiles: true,
})),
};
}));
</script>
<style lang="scss" module>

12
packages/frontend/src/pages/user/flashs.vue
View File

@@ -5,27 +5,27 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<MkPagination v-slot="{items}" :pagination="pagination" withControl>
<MkPagination v-slot="{items}" :paginator="paginator" withControl>
<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash" class="_margin"/>
</MkPagination>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, markRaw } from 'vue';
import * as Misskey from 'misskey-js';
import MkFlashPreview from '@/components/MkFlashPreview.vue';
import MkPagination from '@/components/MkPagination.vue';
import { Paginator } from '@/utility/paginator.js';
const props = defineProps<{
user: Misskey.entities.User;
}>();
const pagination = {
endpoint: 'users/flashs' as const,
const paginator = markRaw(new Paginator('users/flashs', {
limit: 20,
params: computed(() => ({
computedParams: computed(() => ({
userId: props.user.id,
})),
};
}));
</script>

19
packages/frontend/src/pages/user/follow-list.vue
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
<MkPagination v-slot="{items}" :pagination="type === 'following' ? followingPagination : followersPagination" withControl>
<MkPagination v-slot="{items}" :paginator="type === 'following' ? followingPaginator : followersPaginator" withControl>
<div :class="$style.users">
<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" :user="user"/>
</div>
@@ -14,31 +14,30 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, markRaw } from 'vue';
import * as Misskey from 'misskey-js';
import MkUserInfo from '@/components/MkUserInfo.vue';
import MkPagination from '@/components/MkPagination.vue';
import { Paginator } from '@/utility/paginator.js';
const props = defineProps<{
user: Misskey.entities.User;
type: 'following' | 'followers';
}>();
const followingPagination = {
endpoint: 'users/following' as const,
const followingPaginator = markRaw(new Paginator('users/following', {
limit: 20,
params: computed(() => ({
computedParams: computed(() => ({
userId: props.user.id,
})),
};
}));
const followersPagination = {
endpoint: 'users/followers' as const,
const followersPaginator = markRaw(new Paginator('users/followers', {
limit: 20,
params: computed(() => ({
computedParams: computed(() => ({
userId: props.user.id,
})),
};
}));
</script>
<style lang="scss" module>

12
packages/frontend/src/pages/user/gallery.vue
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<MkPagination v-slot="{items}" :pagination="pagination" withControl>
<MkPagination v-slot="{items}" :paginator="paginator" withControl>
<div :class="$style.root">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
@@ -14,23 +14,23 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, markRaw } from 'vue';
import * as Misskey from 'misskey-js';
import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
import MkPagination from '@/components/MkPagination.vue';
import { Paginator } from '@/utility/paginator.js';
const props = withDefaults(defineProps<{
user: Misskey.entities.User;
}>(), {
});
const pagination = {
endpoint: 'users/gallery/posts' as const,
const paginator = markRaw(new Paginator('users/gallery/posts', {
limit: 6,
params: computed(() => ({
computedParams: computed(() => ({
userId: props.user.id,
})),
};
}));
</script>
<style lang="scss" module>

20
packages/frontend/src/pages/user/index.timeline.vue
View File

@@ -13,16 +13,18 @@ SPDX-License-Identifier: AGPL-3.0-only
<option value="files">{{ i18n.ts.withFiles }}</option>
</MkTab>
</template>
<MkNotesTimeline :key="tab" :noGap="true" :pagination="pagination" :pullToRefresh="false" :class="$style.tl"/>
<MkNotesTimeline v-if="tab === 'featured'" :noGap="true" :paginator="featuredPaginator" :pullToRefresh="false" :class="$style.tl"/>
<MkNotesTimeline v-else :noGap="true" :paginator="notesPaginator" :pullToRefresh="false" :class="$style.tl"/>
</MkStickyContainer>
</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;
@@ -30,23 +32,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>

10
packages/frontend/src/pages/user/lists.vue
View File

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer>
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div>
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" withControl>
<MkPagination v-slot="{items}" :paginator="paginator" withControl>
<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/list/${ list.id }`">
<div>{{ list.name }}</div>
<MkAvatars :userIds="list.userIds"/>
@@ -19,24 +19,24 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import {} from 'vue';
import { markRaw } from 'vue';
import * as Misskey from 'misskey-js';
import MkPagination from '@/components/MkPagination.vue';
import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
import MkAvatars from '@/components/MkAvatars.vue';
import { Paginator } from '@/utility/paginator.js';
const props = defineProps<{
user: Misskey.entities.UserDetailed;
}>();
const pagination = {
endpoint: 'users/lists/list' as const,
const paginator = markRaw(new Paginator('users/lists/list', {
noPaging: true,
limit: 10,
params: {
userId: props.user.id,
},
};
}));
</script>
<style lang="scss" module>

20
packages/frontend/src/pages/user/notes.vue
View File

@@ -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>

12
packages/frontend/src/pages/user/pages.vue
View File

@@ -5,27 +5,27 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<MkPagination v-slot="{items}" :pagination="pagination" withControl>
<MkPagination v-slot="{items}" :paginator="paginator" withControl>
<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_margin"/>
</MkPagination>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, markRaw } from 'vue';
import * as Misskey from 'misskey-js';
import MkPagePreview from '@/components/MkPagePreview.vue';
import MkPagination from '@/components/MkPagination.vue';
import { Paginator } from '@/utility/paginator.js';
const props = defineProps<{
user: Misskey.entities.User;
}>();
const pagination = {
endpoint: 'users/pages' as const,
const paginator = markRaw(new Paginator('users/pages', {
limit: 20,
params: computed(() => ({
computedParams: computed(() => ({
userId: props.user.id,
})),
};
}));
</script>

12
packages/frontend/src/pages/user/reactions.vue
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<MkPagination v-slot="{items}" :pagination="pagination">
<MkPagination v-slot="{items}" :paginator="paginator">
<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="_panel _margin">
<div :class="$style.header">
<MkAvatar :class="$style.avatar" :user="user"/>
@@ -19,23 +19,23 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, markRaw } from 'vue';
import * as Misskey from 'misskey-js';
import MkPagination from '@/components/MkPagination.vue';
import MkNote from '@/components/MkNote.vue';
import MkReactionIcon from '@/components/MkReactionIcon.vue';
import { Paginator } from '@/utility/paginator.js';
const props = defineProps<{
user: Misskey.entities.User;
}>();
const pagination = {
endpoint: 'users/reactions' as const,
const paginator = markRaw(new Paginator('users/reactions', {
limit: 20,
params: computed(() => ({
computedParams: computed(() => ({
userId: props.user.id,
})),
};
}));
</script>
<style lang="scss" module>