From 14b7f05af40ede154a767334dbbefc3458584290 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 27 Jul 2020 23:25:37 +0900 Subject: [PATCH] refactor(client): Use v-model for note component, freeze object Related: #6595 --- src/client/components/note.vue | 114 +++++++++++++----- src/client/components/notes.vue | 16 ++- .../components/reactions-viewer.reaction.vue | 14 +-- src/client/components/reactions-viewer.vue | 24 +--- src/client/components/timeline.vue | 1 - src/client/pages/favorites.vue | 2 +- src/client/pages/instance/index.vue | 2 +- src/client/pages/instance/queue.queue.vue | 2 +- src/client/pages/note.vue | 2 +- src/client/scripts/stream.ts | 4 +- 10 files changed, 111 insertions(+), 70 deletions(-) diff --git a/src/client/components/note.vue b/src/client/components/note.vue index 9bbf763494..fba812fc71 100644 --- a/src/client/components/note.vue +++ b/src/client/components/note.vue @@ -40,14 +40,14 @@

- +

({{ $t('private') }}) - + RN:
@@ -59,7 +59,7 @@
- + - -
- +
@@ -62,14 +62,15 @@ export default Vue.extend({ default: false }, - extract: { + prop: { + type: String, required: false } }, computed: { notes(): any[] { - return this.extract ? this.extract(this.items) : this.items; + return this.prop ? this.items.map(item => item[this.prop]) : this.items; }, reversed(): boolean { @@ -78,6 +79,15 @@ export default Vue.extend({ }, methods: { + updated(oldValue, newValue) { + const i = this.notes.findIndex(n => n === oldValue); + if (this.prop) { + Vue.set(this.items[i], this.prop, newValue); + } else { + Vue.set(this.items, i, newValue); + } + }, + focus() { this.$refs.notes.focus(); } diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue index 97d019d17f..639a1603ca 100644 --- a/src/client/components/reactions-viewer.reaction.vue +++ b/src/client/components/reactions-viewer.reaction.vue @@ -1,7 +1,7 @@ @@ -30,14 +30,6 @@ export default Vue.extend({ type: String, required: true, }, - myReaction: { - type: String, - required: false, - }, - emojis: { - type: Array, - required: true, - }, count: { type: Number, required: true, @@ -79,7 +71,7 @@ export default Vue.extend({ toggleReaction() { if (!this.canToggle) return; - const oldReaction = this.myReaction; + const oldReaction = this.note.myReaction; if (oldReaction) { this.$root.api('notes/reactions/delete', { noteId: this.note.id diff --git a/src/client/components/reactions-viewer.vue b/src/client/components/reactions-viewer.vue index 353e72ccfa..88e7df4646 100644 --- a/src/client/components/reactions-viewer.vue +++ b/src/client/components/reactions-viewer.vue @@ -1,6 +1,6 @@ @@ -12,28 +12,16 @@ export default Vue.extend({ components: { XReaction }, + data() { + return { + initialReactions: new Set(Object.keys(this.note.reactions)) + }; + }, props: { note: { type: Object, required: true }, - reactions: { - type: Object, - required: true - }, - myReaction: { - type: String, - required: false, - }, - emojis: { - type: Array, - required: true, - }, - }, - data() { - return { - initialReactions: new Set(Object.keys(this.note.reactions)) - }; }, computed: { isMe(): boolean { diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue index 5fd55e8ca2..28ff6ab1b3 100644 --- a/src/client/components/timeline.vue +++ b/src/client/components/timeline.vue @@ -52,7 +52,6 @@ export default Vue.extend({ }); const prepend = note => { - Object.freeze(note); (this.$refs.tl as any).prepend(note); this.$emit('note'); diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue index 59bef2ca91..0e625f84cf 100644 --- a/src/client/pages/favorites.vue +++ b/src/client/pages/favorites.vue @@ -2,7 +2,7 @@
{{ $t('favorites') }} - +
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue index d21f8d455e..3aedcb65af 100644 --- a/src/client/pages/instance/index.vue +++ b/src/client/pages/instance/index.vue @@ -436,7 +436,7 @@ export default Vue.extend({ }, onStatsLog(statsLog) { - for (const stats of statsLog.reverse()) { + for (const stats of [...statsLog].reverse()) { this.onStats(stats); } } diff --git a/src/client/pages/instance/queue.queue.vue b/src/client/pages/instance/queue.queue.vue index 1649d1e172..c2aa545fc0 100644 --- a/src/client/pages/instance/queue.queue.vue +++ b/src/client/pages/instance/queue.queue.vue @@ -169,7 +169,7 @@ export default Vue.extend({ }, onStatsLog(statsLog) { - for (const stats of statsLog.reverse()) { + for (const stats of [...statsLog].reverse()) { this.onStats(stats); } }, diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue index 5464875dfb..3f42516323 100644 --- a/src/client/pages/note.vue +++ b/src/client/pages/note.vue @@ -14,7 +14,7 @@
- +
diff --git a/src/client/scripts/stream.ts b/src/client/scripts/stream.ts index 4dcd3f1b2e..8a525ba002 100644 --- a/src/client/scripts/stream.ts +++ b/src/client/scripts/stream.ts @@ -112,10 +112,10 @@ export default class Stream extends EventEmitter { } for (const c of connections.filter(c => c != null)) { - c.emit(body.type, body.body); + c.emit(body.type, Object.freeze(body.body)); } } else { - this.emit(type, body); + this.emit(type, Object.freeze(body)); } }