From d7c68d408f07e997457798d4e8902338877f4223 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
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 @@
<conversation
:collapsable="false"
is-page="true"
- :statusoid="statusoid"
+ :statusoid="statusId"
/>
</template>
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 <th.dev91@gmail.com>
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"
/>
</template>
From c1f3b0dc75f657d046b84d358a1679a75261db63 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
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 <th.dev91@gmail.com>
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 <th.dev91@gmail.com>
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 @@
<conversation
:collapsable="false"
is-page="true"
- :statusoid="statusId"
+ :status-id="statusId"
/>
</template>
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"
/>
</template>