Use basic read path from JS SDK for reactions

This displays existing reactions correctly in the action bar and reaction row,
but it doesn't yet update after a new reaction is sent.

src/components/views/messages/MessageActionBar.js

@@ -28,6 +28,8 @@ import { isContentActionable } from '../../../utils/EventUtils';
 export default class MessageActionBar extends React.PureComponent {
     static propTypes = {
         mxEvent: PropTypes.object.isRequired,
+        // The Relations model from the JS SDK for reactions to `mxEvent`
+        reactions: PropTypes.object,
         permalinkCreator: PropTypes.object,
         getTile: PropTypes.func,
         getReplyThread: PropTypes.func,
@@ -113,6 +115,7 @@ export default class MessageActionBar extends React.PureComponent {
         return <ReactionDimension
             title={_t("Agree or Disagree")}
             options={options}
+            reactions={this.props.reactions}
         />;
     }
 
@@ -135,6 +138,7 @@ export default class MessageActionBar extends React.PureComponent {
         return <ReactionDimension
             title={_t("Like or Dislike")}
             options={options}
+            reactions={this.props.reactions}
         />;
     }
 

src/components/views/messages/ReactionDimension.js

@@ -18,20 +18,56 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
 export default class ReactionDimension extends React.PureComponent {
     static propTypes = {
         options: PropTypes.array.isRequired,
         title: PropTypes.string,
+        // The Relations model from the JS SDK for reactions
+        reactions: PropTypes.object,
     };
 
     constructor(props) {
         super(props);
 
         this.state = {
-            selected: null,
+            selected: this.getInitialSelection(),
         };
     }
 
+    getInitialSelection() {
+        const myReactions = this.getMyReactions();
+        if (!myReactions) {
+            return null;
+        }
+        const { options } = this.props;
+        let selected = null;
+        for (const { key, content } of options) {
+            const reactionExists = myReactions.some(mxEvent => {
+                return mxEvent.getContent()["m.relates_to"].key === content;
+            });
+            if (reactionExists) {
+                if (selected) {
+                    // If there are multiple selected values (only expected to occur via
+                    // non-Riot clients), then act as if none are selected.
+                    return null;
+                }
+                selected = key;
+            }
+        }
+        return selected;
+    }
+
+    getMyReactions() {
+        const reactions = this.props.reactions;
+        if (!reactions) {
+            return null;
+        }
+        const userId = MatrixClientPeg.get().getUserId();
+        return reactions.getAnnotationsBySender()[userId];
+    }
+
     onOptionClick = (ev) => {
         const { key } = ev.target.dataset;
         this.toggleDimensionValue(key);

src/components/views/messages/ReactionsRow.js

@@ -20,37 +20,24 @@ import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { isContentActionable } from '../../../utils/EventUtils';
 
-// TODO: Actually load reactions from the timeline
-// Since we don't yet load reactions, let's inject some dummy data for testing the UI
-// only. The UI assumes these are already sorted into the order we want to present,
-// presumably highest vote first.
-const SAMPLE_REACTIONS = {
-    "👍": 4,
-    "👎": 2,
-    "🙂": 1,
-};
-
 export default class ReactionsRow extends React.PureComponent {
     static propTypes = {
         // The event we're displaying reactions for
         mxEvent: PropTypes.object.isRequired,
+        // The Relations model from the JS SDK for reactions to `mxEvent`
+        reactions: PropTypes.object,
     }
 
     render() {
-        const { mxEvent } = this.props;
+        const { mxEvent, reactions } = this.props;
 
-        if (!isContentActionable(mxEvent)) {
-            return null;
-        }
-
-        const content = mxEvent.getContent();
-        // TODO: Remove this once we load real reactions
-        if (!content.body || content.body !== "reactions test") {
+        if (!reactions || !isContentActionable(mxEvent)) {
             return null;
         }
 
         const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton');
-        const items = Object.entries(SAMPLE_REACTIONS).map(([content, count]) => {
+        const items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
+            const count = events.length;
             return <ReactionsRowButton
                 key={content}
                 content={content}