From 06125e682004cdc7a110912f8926cf11dc4c6352 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 10 Jan 2022 03:30:35 +0900
Subject: [PATCH] wip: refactor(client): migrate paging components to
composition api
---
packages/client/src/pages/admin/abuses.vue | 20 ++-----------
packages/client/src/pages/admin/files.vue | 20 +++----------
packages/client/src/pages/admin/users.vue | 18 ++----------
packages/client/src/pages/channel.vue | 4 +--
packages/client/src/pages/clip.vue | 4 +--
packages/client/src/pages/federation.vue | 6 ++--
packages/client/src/pages/gallery/post.vue | 4 +--
packages/client/src/pages/page.vue | 4 +--
packages/client/src/pages/search.vue | 10 ++-----
packages/client/src/pages/tag.vue | 12 ++------
.../client/src/pages/user/follow-list.vue | 29 +++++++++----------
packages/client/src/pages/user/gallery.vue | 12 ++------
packages/client/src/pages/user/pages.vue | 12 ++------
packages/client/src/pages/user/reactions.vue | 12 ++------
packages/client/src/ui/deck/direct-column.vue | 6 ++--
15 files changed, 51 insertions(+), 122 deletions(-)
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index 8df20097b3..04257f86ce 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -62,7 +62,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue';
@@ -97,29 +97,15 @@ export default defineComponent({
pagination: {
endpoint: 'admin/abuse-user-reports',
limit: 10,
- params: () => ({
+ params: computed(() => ({
state: this.state,
reporterOrigin: this.reporterOrigin,
targetUserOrigin: this.targetUserOrigin,
- }),
+ })),
},
}
},
- watch: {
- state() {
- this.$refs.reports.reload();
- },
-
- reporterOrigin() {
- this.$refs.reports.reload();
- },
-
- targetUserOrigin() {
- this.$refs.reports.reload();
- },
- },
-
mounted() {
this.$emit('info', this[symbols.PAGE_INFO]);
},
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 032e394a66..f2027fe8ac 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -55,7 +55,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue';
import MkSelect from '@/components/form/select.vue';
@@ -97,27 +97,15 @@ export default defineComponent({
pagination: {
endpoint: 'admin/drive/files',
limit: 10,
- params: () => ({
+ params: computed(() => ({
type: (this.type && this.type !== '') ? this.type : null,
origin: this.origin,
- hostname: (this.hostname && this.hostname !== '') ? this.hostname : null,
- }),
+ hostname: (this.searchHost && this.searchHost !== '') ? this.searchHost : null,
+ })),
},
}
},
- watch: {
- type() {
- this.$refs.files.reload();
- },
- origin() {
- this.$refs.files.reload();
- },
- searchHost() {
- this.$refs.files.reload();
- },
- },
-
mounted() {
this.$emit('info', this[symbols.PAGE_INFO]);
},
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index e7a3437167..33d6fa4fd7 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -62,7 +62,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue';
import MkSelect from '@/components/form/select.vue';
@@ -112,30 +112,18 @@ export default defineComponent({
pagination: {
endpoint: 'admin/show-users',
limit: 10,
- params: () => ({
+ params: computed(() => ({
sort: this.sort,
state: this.state,
origin: this.origin,
username: this.searchUsername,
hostname: this.searchHost,
- }),
+ })),
offsetMode: true
},
}
},
- watch: {
- sort() {
- this.$refs.users.reload();
- },
- state() {
- this.$refs.users.reload();
- },
- origin() {
- this.$refs.users.reload();
- },
- },
-
async mounted() {
this.$emit('info', this[symbols.PAGE_INFO]);
},
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 67ab2d8981..598e173d81 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -69,9 +69,9 @@ export default defineComponent({
pagination: {
endpoint: 'channels/timeline',
limit: 10,
- params: () => ({
+ params: computed(() => ({
channelId: this.channelId,
- })
+ }))
},
};
},
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index 077a6ac8b5..b375856803 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -52,9 +52,9 @@ export default defineComponent({
pagination: {
endpoint: 'clips/notes',
limit: 10,
- params: () => ({
+ params: computed(() => ({
clipId: this.clipId,
- })
+ }))
},
};
},
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index a467c5eeb8..9815e68986 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -96,7 +96,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue';
import MkSelect from '@/components/form/select.vue';
@@ -130,7 +130,7 @@ export default defineComponent({
endpoint: 'federation/instances',
limit: 10,
offsetMode: true,
- params: () => ({
+ params: computed(() => ({
sort: this.sort,
host: this.host != '' ? this.host : null,
...(
@@ -141,7 +141,7 @@ export default defineComponent({
this.state === 'blocked' ? { blocked: true } :
this.state === 'notResponding' ? { notResponding: true } :
{})
- })
+ }))
},
}
},
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 096947e6f8..9d769deca0 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -95,9 +95,9 @@ export default defineComponent({
otherPostsPagination: {
endpoint: 'users/gallery/posts',
limit: 6,
- params: () => ({
+ params: computed(() => ({
userId: this.post.user.id
- })
+ })),
},
post: null,
error: null,
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 3a4803c3a3..5cb3948f1c 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -108,9 +108,9 @@ export default defineComponent({
otherPostsPagination: {
endpoint: 'users/pages',
limit: 6,
- params: () => ({
+ params: computed(() => ({
userId: this.page.user.id
- })
+ })),
},
};
},
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index 85d19bb255..771d0b557e 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -25,18 +25,12 @@ export default defineComponent({
pagination: {
endpoint: 'notes/search',
limit: 10,
- params: () => ({
+ params: computed(() => ({
query: this.$route.query.q,
channelId: this.$route.query.channel,
- })
+ }))
},
};
},
-
- watch: {
- $route() {
- (this.$refs.notes as any).reload();
- }
- },
});
</script>
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index a0c8367849..a9497ae801 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -5,7 +5,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import XNotes from '@/components/notes.vue';
import * as symbols from '@/symbols';
@@ -30,17 +30,11 @@ export default defineComponent({
pagination: {
endpoint: 'notes/search-by-tag',
limit: 10,
- params: () => ({
+ params: computed(() => ({
tag: this.tag,
- })
+ }))
},
};
},
-
- watch: {
- tag() {
- (this.$refs.notes as any).reload();
- }
- },
});
</script>
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
index 9fb8943fb8..e12ea477ca 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="mk-following-or-followers">
+ <MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
<div class="users _isolated">
<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
</div>
@@ -9,7 +9,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import MkUserInfo from '@/components/user-info.vue';
import MkPagination from '@/components/ui/pagination.vue';
@@ -32,25 +32,22 @@ export default defineComponent({
data() {
return {
- pagination: {
- endpoint: () => this.type === 'following' ? 'users/following' : 'users/followers',
+ followingPagination: {
+ endpoint: 'users/following',
limit: 20,
- params: {
+ params: computed(() => ({
userId: this.user.id,
- }
+ })),
+ },
+ followersPagination: {
+ endpoint: 'users/followers',
+ limit: 20,
+ params: computed(() => ({
+ userId: this.user.id,
+ })),
},
};
},
-
- watch: {
- type() {
- this.$refs.list.reload();
- },
-
- user() {
- this.$refs.list.reload();
- }
- }
});
</script>
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index 860aa9f44f..88f0604f1f 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -9,7 +9,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import MkGalleryPostPreview from '@/components/gallery-post-preview.vue';
import MkPagination from '@/components/ui/pagination.vue';
@@ -31,18 +31,12 @@ export default defineComponent({
pagination: {
endpoint: 'users/gallery/posts',
limit: 6,
- params: () => ({
+ params: computed(() => ({
userId: this.user.id
- })
+ })),
},
};
},
-
- watch: {
- user() {
- this.$refs.list.reload();
- }
- }
});
</script>
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index 40d1fe3842..3075dd5729 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -7,7 +7,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import MkPagePreview from '@/components/page-preview.vue';
import MkPagination from '@/components/ui/pagination.vue';
@@ -29,18 +29,12 @@ export default defineComponent({
pagination: {
endpoint: 'users/pages',
limit: 20,
- params: {
+ params: computed(() => ({
userId: this.user.id,
- }
+ })),
},
};
},
-
- watch: {
- user() {
- this.$refs.list.reload();
- }
- }
});
</script>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index 69c27de55b..f51f6669c3 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -14,7 +14,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import MkPagination from '@/components/ui/pagination.vue';
import MkNote from '@/components/note.vue';
import MkReactionIcon from '@/components/reaction-icon.vue';
@@ -38,18 +38,12 @@ export default defineComponent({
pagination: {
endpoint: 'users/reactions',
limit: 20,
- params: {
+ params: computed(() => ({
userId: this.user.id,
- }
+ })),
},
};
},
-
- watch: {
- user() {
- this.$refs.list.reload();
- }
- },
});
</script>
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index 6ef733dfd0..4206b09b97 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -7,7 +7,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import XColumn from './column.vue';
import XNotes from '@/components/notes.vue';
import * as os from '@/os';
@@ -34,9 +34,9 @@ export default defineComponent({
pagination: {
endpoint: 'notes/mentions',
limit: 10,
- params: () => ({
+ params: computed(() => ({
visibility: 'specified'
- })
+ })),
},
}
},
--
GitLab