diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 7ff0ac081c..45fb2bf6eb 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -150,7 +150,7 @@ const conversation = { if (!id) return this.highlight = id this.$store.dispatch('fetchFavsAndRepeats', id) - this.$store.dispatch('fetchEmojiReactions', id) + this.$store.dispatch('fetchEmojiReactionsBy', id) }, getHighlight () { return this.isExpanded ? this.highlight : null diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js index e81e6e2538..b37cce3d1e 100644 --- a/src/components/emoji_reactions/emoji_reactions.js +++ b/src/components/emoji_reactions/emoji_reactions.js @@ -4,12 +4,17 @@ const EmojiReactions = { props: ['status'], computed: { emojiReactions () { - return this.status.emojiReactions + console.log(this.status.emoji_reactions) + return this.status.emoji_reactions } }, methods: { reactedWith (emoji) { - return this.status.reactedWithEmoji.includes(emoji) + // return [] + const user = this.$store.state.users.currentUser + const reaction = this.status.emoji_reactions.find(r => r.emoji === emoji) + console.log(reaction) + return reaction.accounts && reaction.accounts.find(u => u.id === user.id) }, reactWith (emoji) { this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji }) diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index d83f60b615..8a22924000 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -1,14 +1,14 @@ diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 87e8b5da2d..d573930472 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -355,7 +355,6 @@ diff --git a/src/modules/statuses.js b/src/modules/statuses.js index dbae9d3886..ea0c1749db 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -10,10 +10,7 @@ import { first, last, isArray, - omitBy, - flow, - filter, - keys + omitBy } from 'lodash' import { set } from 'vue' import apiService from '../services/api/api.service.js' @@ -534,33 +531,48 @@ export const mutations = { newStatus.fave_num = newStatus.favoritedBy.length newStatus.favorited = !!newStatus.favoritedBy.find(({ id }) => currentUser.id === id) }, - addEmojiReactions (state, { id, emojiReactions, currentUser }) { + addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) { const status = state.allStatusesObject[id] - set(status, 'emojiReactions', emojiReactions) - const reactedWithEmoji = flow( - keys, - filter(reaction => find(reaction, { id: currentUser.id })) - )(emojiReactions) - set(status, 'reactedWithEmoji', reactedWithEmoji) + set(status, 'emoji_reactions', emojiReactions) }, addOwnReaction (state, { id, emoji, currentUser }) { const status = state.allStatusesObject[id] - status.emojiReactions = status.emojiReactions || {} - const listOfUsers = (status.emojiReactions && status.emojiReactions[emoji]) || [] - const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id }) - if (!hasSelfAlready) { - set(status.emojiReactions, emoji, listOfUsers.concat([{ id: currentUser.id }])) - set(status, 'reactedWithEmoji', [...status.reactedWithEmoji, emoji]) + const reactionIndex = findIndex(status.emoji_reactions, { emoji }) + const reaction = status.emoji_reactions[reactionIndex] || { emoji, count: 0, accounts: [] } + + const newReaction = { + ...reaction, + count: reaction.count + 1, + accounts: [ + ...reaction.accounts, + currentUser + ] + } + + // Update count of existing reaction if it exists, otherwise append at the end + if (reactionIndex >= 0) { + set(status.emoji_reactions, reactionIndex, newReaction) + } else { + set(status, 'emoji_reactions', [...status.emoji_reactions, newReaction]) } }, removeOwnReaction (state, { id, emoji, currentUser }) { const status = state.allStatusesObject[id] - const listOfUsers = status.emojiReactions[emoji] || [] - const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id }) - if (hasSelfAlready) { - const newUsers = filter(listOfUsers, user => user.id !== currentUser.id) - set(status.emojiReactions, emoji, newUsers) - set(status, 'reactedWithEmoji', status.reactedWithEmoji.filter(e => e !== emoji)) + const reactionIndex = findIndex(status.emoji_reactions, { emoji }) + if (reactionIndex < 0) return + + const reaction = status.emoji_reactions[reactionIndex] + + const newReaction = { + ...reaction, + count: reaction.count - 1, + accounts: reaction.accounts.filter(acc => acc.id === currentUser.id) + } + + if (newReaction.count > 0) { + set(status.emoji_reactions, reactionIndex, newReaction) + } else { + set(status, 'emoji_reactions', status.emoji_reactions.filter(r => r.emoji !== emoji)) } }, updateStatusWithPoll (state, { id, poll }) { @@ -672,7 +684,7 @@ const statuses = { commit('addOwnReaction', { id, emoji, currentUser }) rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then( status => { - dispatch('fetchEmojiReactions', id) + dispatch('fetchEmojiReactionsBy', id) } ) }, @@ -681,14 +693,14 @@ const statuses = { commit('removeOwnReaction', { id, emoji, currentUser }) rootState.api.backendInteractor.unreactWithEmoji({ id, emoji }).then( status => { - dispatch('fetchEmojiReactions', id) + dispatch('fetchEmojiReactionsBy', id) } ) }, - fetchEmojiReactions ({ rootState, commit }, id) { + fetchEmojiReactionsBy ({ rootState, commit }, id) { rootState.api.backendInteractor.fetchEmojiReactions({ id }).then( emojiReactions => { - commit('addEmojiReactions', { id, emojiReactions, currentUser: rootState.users.currentUser }) + commit('addEmojiReactionsBy', { id, emojiReactions, currentUser: rootState.users.currentUser }) } ) }, diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index ee007bee12..03eaa5d7b4 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -233,6 +233,7 @@ export const parseStatus = (data) => { output.statusnet_html = addEmojis(data.content, data.emojis) output.tags = data.tags + output.emoji_reactions = [{ emoji: 'A', count: 5 }] // data.pleroma.emoji_reactions if (data.pleroma) { const { pleroma } = data diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js index f794997b3c..e53aa388b1 100644 --- a/test/unit/specs/modules/statuses.spec.js +++ b/test/unit/specs/modules/statuses.spec.js @@ -241,6 +241,51 @@ describe('Statuses module', () => { }) }) + describe('emojiReactions', () => { + it('increments count in existing reaction', () => { + const state = defaultState() + const status = makeMockStatus({ id: '1' }) + status.emoji_reactions = [ { emoji: '😂', count: 1, accounts: [] } ] + + mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' }) + mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } }) + expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(2) + expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me') + }) + + it('adds a new reaction', () => { + const state = defaultState() + const status = makeMockStatus({ id: '1' }) + status.emoji_reactions = [] + + mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' }) + mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } }) + expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1) + expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me') + }) + + it('decreases count in existing reaction', () => { + const state = defaultState() + const status = makeMockStatus({ id: '1' }) + status.emoji_reactions = [ { emoji: '😂', count: 2, accounts: [{ id: 'me' }] } ] + + mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' }) + mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: {} }) + expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1) + expect(state.allStatusesObject['1'].emoji_reactions[0].accounts).to.eql([]) + }) + + it('removes a reaction', () => { + const state = defaultState() + const status = makeMockStatus({ id: '1' }) + status.emoji_reactions = [{ emoji: '😂', count: 1, accounts: [{ id: 'me' }] }] + + mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' }) + mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: {} }) + expect(state.allStatusesObject['1'].emoji_reactions.length).to.eql(0) + }) + }) + describe('showNewStatuses', () => { it('resets the minId to the min of the visible statuses when adding new to visible statuses', () => { const state = defaultState()