From ce35741030704d557d73eefe576d4c9a39ff3ea2 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 9 May 2019 15:39:00 +0100
Subject: [PATCH] Remove redundant `key` vs. `content` in `ReactionDimension`

This simplifies `ReactionDimension` by using the emoji string everywhere instead
of keeping a separate text string as well. It should improve readability as
well, as the reaction events also have a field `key` which was the emoji
content, which was easy to confuse.
---
 .../views/messages/MessageActionBar.js        | 24 ++-----------------
 .../views/messages/ReactionDimension.js       | 21 ++++++++--------
 2 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index d2ac9adcf0..903abfc2d2 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -102,19 +102,9 @@ export default class MessageActionBar extends React.PureComponent {
         }
 
         const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
-        const options = [
-            {
-                key: "agree",
-                content: "👍",
-            },
-            {
-                key: "disagree",
-                content: "👎",
-            },
-        ];
         return <ReactionDimension
             title={_t("Agree or Disagree")}
-            options={options}
+            options={["👍", "👎"]}
             reactions={this.props.reactions}
         />;
     }
@@ -125,19 +115,9 @@ export default class MessageActionBar extends React.PureComponent {
         }
 
         const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
-        const options = [
-            {
-                key: "like",
-                content: "🙂",
-            },
-            {
-                key: "dislike",
-                content: "😔",
-            },
-        ];
         return <ReactionDimension
             title={_t("Like or Dislike")}
-            options={options}
+            options={["🙂", "😔"]}
             reactions={this.props.reactions}
         />;
     }
diff --git a/src/components/views/messages/ReactionDimension.js b/src/components/views/messages/ReactionDimension.js
index 015e69d6b6..f7b43a418c 100644
--- a/src/components/views/messages/ReactionDimension.js
+++ b/src/components/views/messages/ReactionDimension.js
@@ -22,6 +22,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 
 export default class ReactionDimension extends React.PureComponent {
     static propTypes = {
+        // Array of strings containing the emoji for each option
         options: PropTypes.array.isRequired,
         title: PropTypes.string,
         // The Relations model from the JS SDK for reactions
@@ -68,12 +69,12 @@ export default class ReactionDimension extends React.PureComponent {
         }
         const { options } = this.props;
         let selected = null;
-        for (const { key, content } of options) {
+        for (const option of options) {
             const reactionExists = myReactions.some(mxEvent => {
                 if (mxEvent.isRedacted()) {
                     return false;
                 }
-                return mxEvent.getContent()["m.relates_to"].key === content;
+                return mxEvent.getContent()["m.relates_to"].key === option;
             });
             if (reactionExists) {
                 if (selected) {
@@ -81,7 +82,7 @@ export default class ReactionDimension extends React.PureComponent {
                     // non-Riot clients), then act as if none are selected.
                     return null;
                 }
-                selected = key;
+                selected = option;
             }
         }
         return selected;
@@ -98,12 +99,12 @@ export default class ReactionDimension extends React.PureComponent {
 
     onOptionClick = (ev) => {
         const { key } = ev.target.dataset;
-        this.toggleDimensionValue(key);
+        this.toggleDimension(key);
     }
 
-    toggleDimensionValue(value) {
+    toggleDimension(key) {
         const state = this.state.selected;
-        const newState = state !== value ? value : null;
+        const newState = state !== key ? key : null;
         this.setState({
             selected: newState,
         });
@@ -115,16 +116,16 @@ export default class ReactionDimension extends React.PureComponent {
         const { options } = this.props;
 
         const items = options.map(option => {
-            const disabled = selected && selected !== option.key;
+            const disabled = selected && selected !== option;
             const classes = classNames({
                 mx_ReactionDimension_disabled: disabled,
             });
-            return <span key={option.key}
-                data-key={option.key}
+            return <span key={option}
+                data-key={option}
                 className={classes}
                 onClick={this.onOptionClick}
             >
-                {option.content}
+                {option}
             </span>;
         });