Send and redact reaction events

This updates both the reaction row and action bar UIs to send and redact
reaction events as appropriate based on user interactions.

Fixes https://github.com/vector-im/riot-web/issues/9574
Fixes https://github.com/vector-im/riot-web/issues/9572

src/components/views/messages/MessageActionBar.js

@@ -106,6 +106,7 @@ export default class MessageActionBar extends React.PureComponent {
             title={_t("Agree or Disagree")}
             options={["👍", "👎"]}
             reactions={this.props.reactions}
+            mxEvent={this.props.mxEvent}
         />;
     }
 
@@ -119,6 +120,7 @@ export default class MessageActionBar extends React.PureComponent {
             title={_t("Like or Dislike")}
             options={["🙂", "😔"]}
             reactions={this.props.reactions}
+            mxEvent={this.props.mxEvent}
         />;
     }
 

src/components/views/messages/ReactionDimension.js

@@ -22,6 +22,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 
 export default class ReactionDimension extends React.PureComponent {
     static propTypes = {
+        mxEvent: PropTypes.object.isRequired,
         // Array of strings containing the emoji for each option
         options: PropTypes.array.isRequired,
         title: PropTypes.string,
@@ -32,9 +33,7 @@ export default class ReactionDimension extends React.PureComponent {
     constructor(props) {
         super(props);
 
-        this.state = {
+        this.state = this.getSelection();
-            selected: this.getSelection(),
-        };
 
         if (props.reactions) {
             props.reactions.on("Relations.add", this.onReactionsChange);
@@ -63,35 +62,42 @@ export default class ReactionDimension extends React.PureComponent {
     }
 
     onReactionsChange = () => {
-        this.setState({
+        this.setState(this.getSelection());
-            selected: this.getSelection(),
-        });
     }
 
     getSelection() {
         const myReactions = this.getMyReactions();
         if (!myReactions) {
-            return null;
+            return {
+                selectedOption: null,
+                selectedReactionEvent: null,
+            };
         }
         const { options } = this.props;
-        let selected = null;
+        let selectedOption = null;
+        let selectedReactionEvent = null;
         for (const option of options) {
-            const reactionExists = myReactions.some(mxEvent => {
+            const reactionForOption = myReactions.find(mxEvent => {
                 if (mxEvent.isRedacted()) {
                     return false;
                 }
                 return mxEvent.getContent()["m.relates_to"].key === option;
             });
-            if (reactionExists) {
+            if (!reactionForOption) {
-                if (selected) {
+                continue;
-                    // If there are multiple selected values (only expected to occur via
-                    // non-Riot clients), then act as if none are selected.
-                    return null;
-                }
-                selected = option;
             }
+            if (selectedOption) {
+                // If there are multiple selected values (only expected to occur via
+                // non-Riot clients), then act as if none are selected.
+                return {
+                    selectedOption: null,
+                    selectedReactionEvent: null,
+                };
+            }
+            selectedOption = option;
+            selectedReactionEvent = reactionForOption;
         }
-        return selected;
+        return { selectedOption, selectedReactionEvent };
     }
 
     getMyReactions() {
@@ -109,20 +115,34 @@ export default class ReactionDimension extends React.PureComponent {
     }
 
     toggleDimension(key) {
-        const state = this.state.selected;
+        const { selectedOption, selectedReactionEvent } = this.state;
-        const newState = state !== key ? key : null;
+        const newSelectedOption = selectedOption !== key ? key : null;
         this.setState({
-            selected: newState,
+            selectedOption: newSelectedOption,
         });
-        // TODO: Send the reaction event
+        if (selectedReactionEvent) {
+            MatrixClientPeg.get().redactEvent(
+                this.props.mxEvent.getRoomId(),
+                selectedReactionEvent.getId(),
+            );
+        }
+        if (newSelectedOption) {
+            MatrixClientPeg.get().sendEvent(this.props.mxEvent.getRoomId(), "m.reaction", {
+                "m.relates_to": {
+                    "rel_type": "m.annotation",
+                    "event_id": this.props.mxEvent.getId(),
+                    "key": newSelectedOption,
+                },
+            });
+        }
     }
 
     render() {
-        const { selected } = this.state;
+        const { selectedOption } = this.state;
         const { options } = this.props;
 
         const items = options.map(option => {
-            const disabled = selected && selected !== option;
+            const disabled = selectedOption && selectedOption !== option;
             const classes = classNames({
                 mx_ReactionDimension_disabled: disabled,
             });

src/components/views/messages/ReactionsRow.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 import { isContentActionable } from '../../../utils/EventUtils';
+import MatrixClientPeg from '../../../MatrixClientPeg';
 
 export default class ReactionsRow extends React.PureComponent {
     static propTypes = {
@@ -35,6 +36,10 @@ export default class ReactionsRow extends React.PureComponent {
             props.reactions.on("Relations.add", this.onReactionsChange);
             props.reactions.on("Relations.redaction", this.onReactionsChange);
         }
+
+        this.state = {
+            myReactions: this.getMyReactions(),
+        };
     }
 
     componentWillReceiveProps(nextProps) {
@@ -59,11 +64,24 @@ export default class ReactionsRow extends React.PureComponent {
 
     onReactionsChange = () => {
         // TODO: Call `onHeightChanged` as needed
+        this.setState({
+            myReactions: this.getMyReactions(),
+        });
         this.forceUpdate();
     }
 
+    getMyReactions() {
+        const reactions = this.props.reactions;
+        if (!reactions) {
+            return null;
+        }
+        const userId = MatrixClientPeg.get().getUserId();
+        return reactions.getAnnotationsBySender()[userId];
+    }
+
     render() {
         const { mxEvent, reactions } = this.props;
+        const { myReactions } = this.state;
 
         if (!reactions || !isContentActionable(mxEvent)) {
             return null;
@@ -75,10 +93,18 @@ export default class ReactionsRow extends React.PureComponent {
             if (!count) {
                 return null;
             }
+            const myReactionEvent = myReactions && myReactions.find(mxEvent => {
+                if (mxEvent.isRedacted()) {
+                    return false;
+                }
+                return mxEvent.getContent()["m.relates_to"].key === content;
+            });
             return <ReactionsRowButton
                 key={content}
                 content={content}
                 count={count}
+                mxEvent={mxEvent}
+                myReactionEvent={myReactionEvent}
             />;
         });
 

src/components/views/messages/ReactionsRowButton.js

@@ -18,48 +18,48 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
 export default class ReactionsRowButton extends React.PureComponent {
     static propTypes = {
+        // The event we're displaying reactions for
+        mxEvent: PropTypes.object.isRequired,
         content: PropTypes.string.isRequired,
         count: PropTypes.number.isRequired,
-    }
+        // A possible Matrix event if the current user has voted for this type
-
+        myReactionEvent: PropTypes.object,
-    constructor(props) {
-        super(props);
-
-        // TODO: This should be derived from actual reactions you may have sent
-        // once we have some API to read them.
-        this.state = {
-            selected: false,
-        };
     }
 
     onClick = (ev) => {
-        const state = this.state.selected;
+        const { mxEvent, myReactionEvent, content } = this.props;
-        this.setState({
+        if (myReactionEvent) {
-            selected: !state,
+            MatrixClientPeg.get().redactEvent(
-        });
+                mxEvent.getRoomId(),
-        // TODO: Send the reaction event
+                myReactionEvent.getId(),
+            );
+        } else {
+            MatrixClientPeg.get().sendEvent(mxEvent.getRoomId(), "m.reaction", {
+                "m.relates_to": {
+                    "rel_type": "m.annotation",
+                    "event_id": mxEvent.getId(),
+                    "key": content,
+                },
+            });
+        }
     };
 
     render() {
-        const { content, count } = this.props;
+        const { content, count, myReactionEvent } = this.props;
-        const { selected } = this.state;
 
         const classes = classNames({
             mx_ReactionsRowButton: true,
-            mx_ReactionsRowButton_selected: selected,
+            mx_ReactionsRowButton_selected: !!myReactionEvent,
         });
 
-        let adjustedCount = count;
-        if (selected) {
-            adjustedCount++;
-        }
-
         return <span className={classes}
             onClick={this.onClick}
         >
-            {content} {adjustedCount}
+            {content} {count}
         </span>;
     }
 }