Add primary reactions to action bar

This adds the primary reactions to the action bar. They act as toggles where you
can only select one from each group at a time.

Note that currently we aren't actually sending the reaction at all. That's left
for a separate task.

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

src/components/views/messages/MessageActionBar.js

@@ -23,6 +23,8 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
 import { createMenu } from '../../structures/ContextualMenu';
+import SettingsStore from '../../../settings/SettingsStore';
+import classNames from 'classnames';
 
 export default class MessageActionBar extends React.PureComponent {
     static propTypes = {
@@ -33,6 +35,15 @@ export default class MessageActionBar extends React.PureComponent {
         onFocusChange: PropTypes.func,
     };
 
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            agreeDimension: null,
+            likeDimension: null,
+        };
+    }
+
     onFocusChange = (focused) => {
         if (!this.props.onFocusChange) {
             return;
@@ -48,6 +59,31 @@ export default class MessageActionBar extends React.PureComponent {
         );
     }
 
+    onAgreeClick = (ev) => {
+        this.toggleDimensionValue("agreeDimension", "agree");
+    }
+
+    onDisagreeClick = (ev) => {
+        this.toggleDimensionValue("agreeDimension", "disagree");
+    }
+
+    onLikeClick = (ev) => {
+        this.toggleDimensionValue("likeDimension", "like");
+    }
+
+    onDislikeClick = (ev) => {
+        this.toggleDimensionValue("likeDimension", "dislike");
+    }
+
+    toggleDimensionValue(dimension, value) {
+        const state = this.state[dimension];
+        const newState = state !== value ? value : null;
+        this.setState({
+            [dimension]: newState,
+        });
+        // TODO: Send the reaction event
+    }
+
     onReplyClick = (ev) => {
         dis.dispatch({
             action: 'reply_to_event',
@@ -108,19 +144,96 @@ export default class MessageActionBar extends React.PureComponent {
         return false;
     }
 
+    isReactionsEnabled() {
+        return SettingsStore.isFeatureEnabled("feature_reactions");
+    }
+
+    renderAgreeDimension() {
+        if (!this.isReactionsEnabled()) {
+            return null;
+        }
+
+        const state = this.state.agreeDimension;
+        const options = [
+            {
+                key: "agree",
+                content: "👍",
+                onClick: this.onAgreeClick,
+            },
+            {
+                key: "disagree",
+                content: "👎",
+                onClick: this.onDisagreeClick,
+            },
+        ];
+
+        return <span className="mx_MessageActionBar_reactionDimension"
+            title={_t("Agree or Disagree")}
+        >
+            {this.renderReactionDimensionItems(state, options)}
+        </span>;
+    }
+
+    renderLikeDimension() {
+        if (!this.isReactionsEnabled()) {
+            return null;
+        }
+
+        const state = this.state.likeDimension;
+        const options = [
+            {
+                key: "like",
+                content: "🙂",
+                onClick: this.onLikeClick,
+            },
+            {
+                key: "dislike",
+                content: "😔",
+                onClick: this.onDislikeClick,
+            },
+        ];
+
+        return <span className="mx_MessageActionBar_reactionDimension"
+            title={_t("Like or Dislike")}
+        >
+            {this.renderReactionDimensionItems(state, options)}
+        </span>;
+    }
+
+    renderReactionDimensionItems(state, options) {
+        return options.map(option => {
+            const disabled = state && state !== option.key;
+            const classes = classNames({
+                mx_MessageActionBar_reactionDisabled: disabled,
+            });
+            return <span key={option.key}
+                className={classes}
+                onClick={option.onClick}
+            >
+                {option.content}
+            </span>;
+        });
+    }
+
     render() {
+        let agreeDimensionReactionButtons;
+        let likeDimensionReactionButtons;
         let replyButton;
 
         if (this.isContentActionable()) {
-            replyButton = <span className="mx_MessageActionBar_replyButton"
+            agreeDimensionReactionButtons = this.renderAgreeDimension();
+            likeDimensionReactionButtons = this.renderLikeDimension();
+            replyButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
                 title={_t("Reply")}
                 onClick={this.onReplyClick}
             />;
         }
 
         return <div className="mx_MessageActionBar">
+            {agreeDimensionReactionButtons}
+            {likeDimensionReactionButtons}
             {replyButton}
-            <span className="mx_MessageActionBar_optionsButton"
+            <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
                 title={_t("Options")}
                 onClick={this.onOptionsClick}
             />