diff options
Diffstat (limited to 'src/components/conversation')
| -rw-r--r-- | src/components/conversation/conversation.js | 63 | ||||
| -rw-r--r-- | src/components/conversation/conversation.vue | 28 |
2 files changed, 55 insertions, 36 deletions
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index b3074590..72ee9c39 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) => { @@ -39,10 +39,11 @@ const conversation = { } }, props: [ - 'statusoid', + 'statusId', 'collapsable', 'isPage', - 'showPinned' + 'pinnedStatusIdsObject', + 'inProfile' ], created () { if (this.isPage) { @@ -51,21 +52,17 @@ const conversation = { }, computed: { status () { - return this.statusoid + return this.$store.state.statuses.allStatusesObject[this.statusId] }, - statusId () { - if (this.statusoid.retweeted_status) { - return this.statusoid.retweeted_status.id + originalStatusId () { + if (this.status.retweeted_status) { + return this.status.retweeted_status.id } else { - return this.statusoid.id + return this.statusId } }, conversationId () { - if (this.statusoid.retweeted_status) { - return this.statusoid.retweeted_status.statusnet_conversation_id - } else { - return this.statusoid.statusnet_conversation_id - } + return this.getConversationId(this.statusId) }, conversation () { if (!this.status) { @@ -77,7 +74,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 } @@ -86,7 +83,8 @@ const conversation = { }, replies () { let i = 1 - return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => { + // eslint-disable-next-line camelcase + return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => { /* eslint-disable camelcase */ const irid = in_reply_to_status_id /* eslint-enable camelcase */ @@ -109,7 +107,15 @@ const conversation = { Status }, watch: { - '$route': 'fetchConversation', + statusId (newVal, oldVal) { + const newConversationId = this.getConversationId(newVal) + const oldConversationId = this.getConversationId(oldVal) + if (newConversationId && oldConversationId && newConversationId === oldConversationId) { + this.setHighlight(this.originalStatusId) + } else { + this.fetchConversation() + } + }, expanded (value) { if (value) { this.fetchConversation() @@ -119,26 +125,28 @@ const conversation = { methods: { fetchConversation () { if (this.status) { - this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id}) - .then(({ancestors, descendants}) => { + 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.originalStatusId) }) - .then(() => this.setHighlight(this.statusId)) } else { - const id = this.$route.params.id - this.$store.state.api.backendInteractor.fetchStatus({id}) - .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] })) - .then(() => this.fetchConversation()) + this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId }) + .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.statusId }, setHighlight (id) { + if (!id) return this.highlight = id this.$store.dispatch('fetchFavsAndRepeats', id) }, @@ -147,9 +155,10 @@ const conversation = { }, toggleExpanded () { this.expanded = !this.expanded - if (!this.expanded) { - this.setHighlight(null) - } + }, + getConversationId (statusId) { + const status = this.$store.state.statuses.allStatusesObject[statusId] + return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id')) } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 0b4998c3..0f1de55f 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -1,25 +1,35 @@ <template> - <div class="timeline panel-default" :class="[isExpanded ? 'panel' : 'panel-disabled']"> - <div v-if="isExpanded" class="panel-heading conversation-heading"> + <div + class="timeline panel-default" + :class="[isExpanded ? 'panel' : 'panel-disabled']" + > + <div + v-if="isExpanded" + class="panel-heading conversation-heading" + > <span class="title"> {{ $t('timeline.conversation') }} </span> <span v-if="collapsable"> - <a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a> + <a + href="#" + @click.prevent="toggleExpanded" + >{{ $t('timeline.collapse') }}</a> </span> </div> <status v-for="status in conversation" - @goto="setHighlight" - @toggleExpanded="toggleExpanded" :key="status.id" - :inlineExpanded="collapsable && isExpanded" + :inline-expanded="collapsable && isExpanded" :statusoid="status" - :expandable='!isExpanded' - :showPinned="showPinned" + :expandable="!isExpanded" + :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]" :focused="focused(status.id)" - :inConversation="isExpanded" + :in-conversation="isExpanded" :highlight="getHighlight()" :replies="getReplies(status.id)" + :in-profile="inProfile" class="status-fadein panel-body" + @goto="setHighlight" + @toggleExpanded="toggleExpanded" /> </div> </template> |