import { reduce, filter, sortBy } from 'lodash' import Status from '../status/status.vue' const sortAndFilterConversation = (conversation) => { conversation = filter(conversation, (status) => status.type !== 'retweet') return sortBy(conversation, 'id') } const conversation = { data () { return { highlight: null } }, props: [ 'statusoid', 'collapsable' ], computed: { status () { return this.statusoid }, conversation () { if (!this.status) { return [] } const conversationId = this.status.statusnet_conversation_id const statuses = this.$store.state.statuses.allStatuses const conversation = filter(statuses, { statusnet_conversation_id: conversationId }) return sortAndFilterConversation(conversation) }, replies () { let i = 1 return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => { const irid = String(in_reply_to_status_id) if (irid) { result[irid] = result[irid] || [] result[irid].push({ name: `#${i}`, id: id }) } i++ return result }, {}) } }, components: { Status }, created () { this.fetchConversation() }, watch: { '$route': 'fetchConversation' }, methods: { fetchConversation () { if (this.status) { const conversationId = this.status.statusnet_conversation_id this.$store.state.api.backendInteractor.fetchConversation({id: conversationId}) .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses })) .then(() => this.setHighlight(this.statusoid.id)) } 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()) } }, getReplies (id) { id = String(id) return this.replies[id] || [] }, focused (id) { if (this.statusoid.retweeted_status) { return (id === this.statusoid.retweeted_status.id) } else { return (id === this.statusoid.id) } }, setHighlight (id) { this.highlight = String(id) } } } export default conversation