Reaction: support reacting with an existing reaction

package.json: use github.com/arpith/zulip-js#new-reactions zulip-js branch
yarn.lock: update yarn.lock

constants: add ADD_REACTION
actions: add support for adding reaction
actions: new reactions api requires emoji_code

message: pass message_id to reactions
reactions: start using emoji_code
reactions:
1. use emoji_code as internal keys (instead of emoji_name)
2. store emoji_code -> emoji_name mapping in a separate object
3. pass emoji_code to Reaction :)

reaction:
1. change background color on hover
2. use emojiCode in increment call

package.json

@@ -50,7 +50,7 @@
     "redux-thunk": "2.1.0",
     "throng": "4.0.0",
     "underscore": "1.8.3",
-    "zulip-js": "2.0.3"
+    "zulip-js": "git+https://github.com/arpith/zulip-js.git#reactions-new"
   },
   "devDependencies": {
     "eslint": "4.15.0",

src/app/actions/index.js

@@ -7,8 +7,26 @@ import {
   UPDATE_POINTER,
   UPDATE_CURRENT_MESSAGE,
   UPDATE_SUBSCRIPTIONS,
+  ADD_REACTION,
 } from '../constants';
 
+export function addReaction(message_id, emoji_name, emoji_code) {
+  return (dispatch, getState) => {
+    const { config } = getState();
+    return zulip(config)
+      .then(z => z.reactions.add({ message_id, emoji_name, emoji_code }))
+      .then(({ result }) => {
+        if (result === 'success') {
+          dispatch({
+            type: ADD_REACTION,
+            message_id,
+            emoji: emoji_name
+          });
+        }
+      });
+  };
+}
+
 export function updateCurrentMessage(message) {
   return (dispatch) => {
     dispatch({

src/app/components/Message.jsx

@@ -71,7 +71,7 @@ class Message extends React.Component {
               <Timestamp timestamp={this.props.message.timestamp} />
             </div>
             <div dangerouslySetInnerHTML={markedupContent} className="messageContent" />
-            <Reactions reactions={this.props.message.reactions} />
+            <Reactions reactions={this.props.message.reactions} messageID={this.props.message.id} />
           </div>
         </div>
       </div>

src/app/components/Reaction.jsx

@@ -1,10 +1,32 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { replaceColons } from '../emoji';
-import style from '../styles/reaction';
+import { addReaction } from '../actions';
+import { style, hover } from '../styles/reaction';
 
-export default ({ emojiName, onHover }) => {
-  const reactionEmoji = replaceColons(`:${emojiName}:`);
-  return <button style={style} onMouseEnter={onHover} onMouseLeave={onHover}>
-    {reactionEmoji}
-  </button>;
+class Reaction extends Component {
+  state = { style };
+
+  onHover = (shouldHighlight) => {
+    if (shouldHighlight) {
+      this.setState({ style: hover });
+    } else {
+      this.setState({ style });
+    }
+    this.props.onHover();
+  };
+
+  render() {
+    const reactionEmoji = replaceColons(`:${this.props.emojiName}:`);
+    return <button style={this.state.style}
+      onClick={this.props.increment}
+      onMouseEnter={() => this.onHover(true)}
+      onMouseLeave={() => this.onHover(false)}>
+      {reactionEmoji}
+    </button>;
+  }
 }
+
+export default connect(null, (dispatch, { emojiName, messageID, emojiCode }) => ({
+  increment: () => dispatch(addReaction(messageID, emojiName, emojiCode)),
+}))(Reaction);

src/app/components/Reactions.jsx

@@ -7,11 +7,13 @@ export default class Reactions extends Component {
   constructor(props) {
     super(props);
     this.reactionsUsers = {};
-    this.props.reactions.forEach(({ emoji_name, user }) => {
-      if (!this.reactionsUsers[emoji_name]) {
-        this.reactionsUsers[emoji_name] = [user];
+    this.emojiNames = {};
+    this.props.reactions.forEach(({ emoji_name, user, emoji_code }) => {
+      this.emojiNames[emoji_code] = emoji_name;
+      if (!this.reactionsUsers[emoji_code]) {
+        this.reactionsUsers[emoji_code] = [user];
       } else {
-        this.reactionsUsers[emoji_name].push(user);
+        this.reactionsUsers[emoji_code].push(user);
       }
     });
     this.state = {
@@ -29,12 +31,17 @@ export default class Reactions extends Component {
       }
       this.setState({ displayUsers: !this.state.displayUsers });
     };
-    this.displayUsers = (emojiName) => this.setState({ users: this.reactionsUsers[emojiName] });
+    this.displayUsers = (emojiCode) => this.setState({ users: this.reactionsUsers[emojiCode] });
   }
 
   render() {
-    const reactions = Object.keys(this.reactionsUsers).map((emojiName) => {
-      return <Reaction emojiName={emojiName} key={emojiName} onHover={() => this.displayUsers(emojiName)} />;
+    const reactions = Object.keys(this.reactionsUsers).map((emojiCode) => {
+      return <Reaction key={emojiCode}
+        emojiCode={emojiCode}
+        emojiName={this.emojiNames[emojiCode]}
+        messageID={this.props.messageID}
+        onHover={() => this.displayUsers(emojiCode)}
+      />;
     });
     return <div style={style} onMouseEnter={this.toggleDisplayUsers} onMouseLeave={this.toggleDisplayUsers} >
       {reactions}

src/app/constants.js

@@ -5,3 +5,4 @@ export const UPDATE_USERS = 'UPDATE_USERS';
 export const UPDATE_POINTER = 'UPDATE_POINTER';
 export const UPDATE_CURRENT_MESSAGE = 'UPDATE_CURRENT_MESSAGE';
 export const UPDATE_SUBSCRIPTIONS = 'UPDATE_SUBSCRIPTIONS';
+export const ADD_REACTION = 'ADD_REACTION';

src/app/styles/reaction.js

@@ -1,4 +1,4 @@
-export default {
+export const style = {
   display: 'flex',
   border: 'none',
   marginRight: 8,
@@ -10,4 +10,7 @@ export default {
   justifyContent: 'center',
   cursor: 'pointer',
   fontSize: 'inherit',
+  transition: 'background-color 200ms linear',
 };
+
+export const hover = {...style, backgroundColor: 'rgba(0,162,255,0.8)' };