From d7c68d408f07e997457798d4e8902338877f4223 Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 30 Aug 2019 11:47:15 -0400 Subject: [PATCH 1/5] accept status id instead of status obj as statusoid prop --- .../conversation-page/conversation-page.js | 8 ++------ .../conversation-page/conversation-page.vue | 2 +- src/components/conversation/conversation.js | 17 ++++++++--------- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/components/conversation-page/conversation-page.js b/src/components/conversation-page/conversation-page.js index 1da70ce9..8f996be1 100644 --- a/src/components/conversation-page/conversation-page.js +++ b/src/components/conversation-page/conversation-page.js @@ -5,12 +5,8 @@ const conversationPage = { Conversation }, computed: { - statusoid () { - const id = this.$route.params.id - const statuses = this.$store.state.statuses.allStatusesObject - const status = statuses[id] - - return status + statusId () { + return this.$route.params.id } } } diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue index 532f785c..3db63343 100644 --- a/src/components/conversation-page/conversation-page.vue +++ b/src/components/conversation-page/conversation-page.vue @@ -2,7 +2,7 @@ diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 49fa8612..2be74c1f 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -51,20 +51,20 @@ const conversation = { }, computed: { status () { - return this.statusoid + return this.$store.state.statuses.allStatusesObject[this.statusoid] }, statusId () { - if (this.statusoid.retweeted_status) { - return this.statusoid.retweeted_status.id + if (this.status.retweeted_status) { + return this.status.retweeted_status.id } else { - return this.statusoid.id + return this.status.id } }, conversationId () { - if (this.statusoid.retweeted_status) { - return this.statusoid.retweeted_status.statusnet_conversation_id + if (this.status.retweeted_status) { + return this.status.retweeted_status.statusnet_conversation_id } else { - return this.statusoid.statusnet_conversation_id + return this.status.statusnet_conversation_id } }, conversation () { @@ -127,8 +127,7 @@ const conversation = { }) .then(() => this.setHighlight(this.statusId)) } else { - const id = this.$route.params.id - this.$store.state.api.backendInteractor.fetchStatus({ id }) + this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusoid }) .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] })) .then(() => this.fetchConversation()) } From 214ab22c4ccc92ddee537204c1c29a1dacb037b8 Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 30 Aug 2019 11:52:58 -0400 Subject: [PATCH 2/5] update prop binding --- src/components/timeline/timeline.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 4ad51714..14ce21af 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -33,7 +33,7 @@ v-if="timeline.statusesObject[statusId]" :key="statusId + '-pinned'" class="status-fadein" - :statusoid="timeline.statusesObject[statusId]" + :statusoid="statusId" :collapsable="true" :pinned-status-ids-object="pinnedStatusIdsObject" /> @@ -43,7 +43,7 @@ v-if="!excludedStatusIdsObject[status.id]" :key="status.id" class="status-fadein" - :statusoid="status" + :statusoid="status.id" :collapsable="true" /> From c1f3b0dc75f657d046b84d358a1679a75261db63 Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 30 Aug 2019 12:11:59 -0400 Subject: [PATCH 3/5] refactoring --- src/components/conversation/conversation.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 2be74c1f..398b7638 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -57,7 +57,7 @@ const conversation = { if (this.status.retweeted_status) { return this.status.retweeted_status.id } else { - return this.status.id + return this.statusoid } }, conversationId () { @@ -120,23 +120,25 @@ const conversation = { methods: { fetchConversation () { if (this.status) { - this.$store.state.api.backendInteractor.fetchConversation({ id: this.status.id }) + this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusoid }) .then(({ ancestors, descendants }) => { this.$store.dispatch('addNewStatuses', { statuses: ancestors }) this.$store.dispatch('addNewStatuses', { statuses: descendants }) + this.setHighlight(this.statusId) }) - .then(() => this.setHighlight(this.statusId)) } else { this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusoid }) - .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] })) - .then(() => this.fetchConversation()) + .then((status) => { + this.$store.dispatch('addNewStatuses', { statuses: [status] }) + this.fetchConversation() + }) } }, getReplies (id) { return this.replies[id] || [] }, focused (id) { - return (this.isExpanded) && id === this.status.id + return (this.isExpanded) && id === this.statusoid }, setHighlight (id) { if (!id) return From 482cd52f77fa514ace73a7e17f169c0518f000b1 Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 30 Aug 2019 12:58:48 -0400 Subject: [PATCH 4/5] stop fetching whole conversation when change highlighted status --- src/components/conversation/conversation.js | 22 ++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 398b7638..dc58cd58 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -1,4 +1,4 @@ -import { reduce, filter, findIndex, clone } from 'lodash' +import { reduce, filter, findIndex, clone, get } from 'lodash' import Status from '../status/status.vue' const sortById = (a, b) => { @@ -61,11 +61,7 @@ const conversation = { } }, conversationId () { - if (this.status.retweeted_status) { - return this.status.retweeted_status.statusnet_conversation_id - } else { - return this.status.statusnet_conversation_id - } + return this.getConversationId(this.statusoid) }, conversation () { if (!this.status) { @@ -110,7 +106,15 @@ const conversation = { Status }, watch: { - status: 'fetchConversation', + statusoid (newVal, oldVal) { + const newConversationId = this.getConversationId(newVal) + const oldConversationId = this.getConversationId(oldVal) + if (newConversationId && oldConversationId && newConversationId === oldConversationId) { + this.setHighlight(this.statusId) + } else { + this.fetchConversation() + } + }, expanded (value) { if (value) { this.fetchConversation() @@ -150,6 +154,10 @@ const conversation = { }, toggleExpanded () { this.expanded = !this.expanded + }, + getConversationId (statusId) { + const status = this.$store.state.statuses.allStatusesObject[statusId] + return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id')) } } } From 9727009147d541bc8ab7083791a531b39f29c614 Mon Sep 17 00:00:00 2001 From: taehoon Date: Tue, 3 Sep 2019 13:19:14 -0400 Subject: [PATCH 5/5] update prop name --- .../conversation-page/conversation-page.vue | 2 +- src/components/conversation/conversation.js | 24 +++++++++---------- src/components/timeline/timeline.vue | 4 ++-- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue index 3db63343..8cc0a55f 100644 --- a/src/components/conversation-page/conversation-page.vue +++ b/src/components/conversation-page/conversation-page.vue @@ -2,7 +2,7 @@ diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index dc58cd58..10dd8eb0 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -39,7 +39,7 @@ const conversation = { } }, props: [ - 'statusoid', + 'statusId', 'collapsable', 'isPage', 'pinnedStatusIdsObject' @@ -51,17 +51,17 @@ const conversation = { }, computed: { status () { - return this.$store.state.statuses.allStatusesObject[this.statusoid] + return this.$store.state.statuses.allStatusesObject[this.statusId] }, - statusId () { + originalStatusId () { if (this.status.retweeted_status) { return this.status.retweeted_status.id } else { - return this.statusoid + return this.statusId } }, conversationId () { - return this.getConversationId(this.statusoid) + return this.getConversationId(this.statusId) }, conversation () { if (!this.status) { @@ -73,7 +73,7 @@ const conversation = { } const conversation = clone(this.$store.state.statuses.conversationsObject[this.conversationId]) - const statusIndex = findIndex(conversation, { id: this.statusId }) + const statusIndex = findIndex(conversation, { id: this.originalStatusId }) if (statusIndex !== -1) { conversation[statusIndex] = this.status } @@ -106,11 +106,11 @@ const conversation = { Status }, watch: { - statusoid (newVal, oldVal) { + statusId (newVal, oldVal) { const newConversationId = this.getConversationId(newVal) const oldConversationId = this.getConversationId(oldVal) if (newConversationId && oldConversationId && newConversationId === oldConversationId) { - this.setHighlight(this.statusId) + this.setHighlight(this.originalStatusId) } else { this.fetchConversation() } @@ -124,14 +124,14 @@ const conversation = { methods: { fetchConversation () { if (this.status) { - this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusoid }) + this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusId }) .then(({ ancestors, descendants }) => { this.$store.dispatch('addNewStatuses', { statuses: ancestors }) this.$store.dispatch('addNewStatuses', { statuses: descendants }) - this.setHighlight(this.statusId) + this.setHighlight(this.originalStatusId) }) } else { - this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusoid }) + this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId }) .then((status) => { this.$store.dispatch('addNewStatuses', { statuses: [status] }) this.fetchConversation() @@ -142,7 +142,7 @@ const conversation = { return this.replies[id] || [] }, focused (id) { - return (this.isExpanded) && id === this.statusoid + return (this.isExpanded) && id === this.statusId }, setHighlight (id) { if (!id) return diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 14ce21af..ba66e6da 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -33,7 +33,7 @@ v-if="timeline.statusesObject[statusId]" :key="statusId + '-pinned'" class="status-fadein" - :statusoid="statusId" + :status-id="statusId" :collapsable="true" :pinned-status-ids-object="pinnedStatusIdsObject" /> @@ -43,7 +43,7 @@ v-if="!excludedStatusIdsObject[status.id]" :key="status.id" class="status-fadein" - :statusoid="status.id" + :status-id="status.id" :collapsable="true" />