diff --git a/src/plugins/sib-reactions.js b/src/plugins/sib-reactions.js index f215989da24d15897a240d0c6f26e785ae2b20e6..e6f357071992b5fdf93c3bd1191d736a2f4262b5 100644 --- a/src/plugins/sib-reactions.js +++ b/src/plugins/sib-reactions.js @@ -52,7 +52,7 @@ converse.plugins.add('sib-reactions', { initialize() { const _converse = this._converse; const { api, __ } = _converse; - const { $msg, u, Strophe, sizzle, html } = converse.env; + const { $msg, u, Strophe, sizzle, html, _ } = converse.env; Strophe.addNamespace('REACTIONS', 'urn:xmpp:reactions:0'); @@ -124,15 +124,17 @@ converse.plugins.add('sib-reactions', { `; }, - // TODO: Add a generic button to add a reaction (instead of the actions button) - // TODO: When clicking an existing emoji, trigger an update - // FIXME: Group reactions by emoji + /** + * Render the reactions list. + * Adds an additional icon to add a reaction. + * @returns {html} + */ renderReactions() { return html` <div class='chat-msg__reactions'> - ${Object.values(this.model.get('reactions'))?.map(r => r.emojis?.map(em => html` - <a href='#' @click='${this.removeReaction}'><i class='fa'>${em}</i></a> - `))} + ${this.getEmojisByCount().map(({ emoji, count }) => html` + <a href='#' @click='${this.removeReaction}'><i class='fa'>${emoji} (${count})</i></a> + `)} <a href='#' @click='${this.openEmojiPicker}' class='chat-msg--react'><i class='fa fa-smile'></i></a> </div> `; @@ -149,6 +151,27 @@ converse.plugins.add('sib-reactions', { return reactions ? Object.values(reactions).map(r => r.emojis).flat().length > 0 : false; }, + /** + * Returns an object with the emoji as key and its count for value. + * @returns {*} + */ + getEmojisByCount() { + const reactions = this.model.get('reactions'); + const emojis = Object.values(reactions).map(r => r.emojis).flat(); + + return _.values(emojis.reduce((prev, curr) => { + if (prev.hasOwnProperty(curr)) { + prev[curr].count += 1; + } else { + prev[curr] = { + emoji: curr, + count: 1, + }; + } + return prev; + }, {})); + }, + // TODO: Care about overflow according to the target position openEmojiPicker(ev) { ev.preventDefault();