AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 82 Pull requests 20 Projects Releases 1 Wiki Activity

change emoji reactions to use new format

Browse source
This commit is contained in:
Shpuld Shpuldson 2020-01-26 15:45:12 +02:00
parent b10b92a876
commit a018ea622c
7 changed files with 99 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/conversation/conversation.js
View file

@ -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

9
src/components/emoji_reactions/emoji_reactions.js
View file

@ -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 })

12
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -1,14 +1,14 @@
<template>
<div class="emoji-reactions">
<button
v-for="(users, emoji) in emojiReactions"
:key="emoji"
v-for="(reaction) in emojiReactions"
:key="reaction.emoji"
class="emoji-reaction btn btn-default"
:class="{ 'picked-reaction': reactedWith(emoji) }"
@click="emojiOnClick(emoji, $event)"
:class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
@click="emojiOnClick(reaction.emoji, $event)"
>
<span v-if="users">{{ users.length }}</span>
<span>{{ emoji }}</span>
<span>{{ reaction.count }}</span>
<span>{{ reaction.emoji }}</span>
</button>
</div>
</template>

1
src/components/status/status.vue
View file

@ -355,7 +355,6 @@
</transition>
<EmojiReactions
v-if="isFocused"
:status="status"
/>

66
src/modules/statuses.js
View file

@ -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 })
}
)
},

1
src/services/entity_normalizer/entity_normalizer.service.js
View file

@ -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

45
test/unit/specs/modules/statuses.spec.js
View file

@ -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()