From 45462e4a5e8b94be110968afb2985bb145d7b6b3 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Fri, 14 Jan 2022 12:02:10 +0900 Subject: [PATCH] wip: refactor(client): migrate paging components to composition api --- .../src/components/sub-note-content.vue | 38 ++++++------------- .../src/components/user-online-indicator.vue | 31 +++++++-------- packages/client/src/pages/note.vue | 8 ++-- 3 files changed, 29 insertions(+), 48 deletions(-) diff --git a/packages/client/src/components/sub-note-content.vue b/packages/client/src/components/sub-note-content.vue index efa202ce2f..d6a37d07be 100644 --- a/packages/client/src/components/sub-note-content.vue +++ b/packages/client/src/components/sub-note-content.vue @@ -21,35 +21,21 @@ </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; import XPoll from './poll.vue'; import XMediaList from './media-list.vue'; -import * as os from '@/os'; +import * as misskey from 'misskey-js'; -export default defineComponent({ - components: { - XPoll, - XMediaList, - }, - props: { - note: { - type: Object, - required: true - } - }, - data() { - return { - collapsed: false, - }; - }, - created() { - this.collapsed = this.note.cw == null && this.note.text && ( - (this.note.text.split('\n').length > 9) || - (this.note.text.length > 500) - ); - } -}); +const props = defineProps<{ + note: misskey.entities.Note; +}>(); + +const collapsed = $ref( + props.note.cw == null && props.note.text != null && ( + (props.note.text.split('\n').length > 9) || + (props.note.text.length > 500) + )); </script> <style lang="scss" scoped> diff --git a/packages/client/src/components/user-online-indicator.vue b/packages/client/src/components/user-online-indicator.vue index 93e9dea57b..a87b0aeff5 100644 --- a/packages/client/src/components/user-online-indicator.vue +++ b/packages/client/src/components/user-online-indicator.vue @@ -2,26 +2,21 @@ <div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; +import * as misskey from 'misskey-js'; +import { i18n } from '@/i18n'; -export default defineComponent({ - props: { - user: { - type: Object, - required: true - }, - }, +const props = defineProps<{ + user: misskey.entities.User; +}>(); - computed: { - text(): string { - switch (this.user.onlineStatus) { - case 'online': return this.$ts.online; - case 'active': return this.$ts.active; - case 'offline': return this.$ts.offline; - case 'unknown': return this.$ts.unknown; - } - } +const text = $computed(() => { + switch (props.user.onlineStatus) { + case 'online': return i18n.locale.online; + case 'active': return i18n.locale.active; + case 'offline': return i18n.locale.offline; + case 'unknown': return i18n.locale.unknown; } }); </script> diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue index 2249fa2b91..72ac85ee90 100644 --- a/packages/client/src/pages/note.vue +++ b/packages/client/src/pages/note.vue @@ -84,19 +84,19 @@ export default defineComponent({ prev: { endpoint: 'users/notes' as const, limit: 10, - params: init => ({ + params: computed(() => ({ userId: this.note.userId, untilId: this.note.id, - }) + })), }, next: { reversed: true, endpoint: 'users/notes' as const, limit: 10, - params: init => ({ + params: computed(() => ({ userId: this.note.userId, sinceId: this.note.id, - }) + })), }, }; },