Clean thread likes

src/components/chatInput/index.js

@@ -257,7 +257,7 @@ class ChatInput extends React.Component<Props, State> {
     // decorators that are passed to the editor are removed from the editor
     // state
     setTimeout(() => {
-      this.editor && this.editor.focus();
+      this.editor && this.editor.focus && this.editor.focus();
     }, 0);
   };
 
@@ -400,7 +400,7 @@ class ChatInput extends React.Component<Props, State> {
     // refocus the input
     setTimeout(() => {
       clear();
-      this.editor && this.editor.focus();
+      this.editor && this.editor.focus && this.editor.focus();
     });
 
     return 'handled';

src/components/chatInput/input.js

@@ -33,6 +33,7 @@ type Props = {
   networkDisabled: boolean,
   children?: React$Node,
   hasAttachment?: boolean,
+  code?: boolean,
 };
 
 type State = {
@@ -88,6 +89,7 @@ class Input extends React.Component<Props, State> {
       networkDisabled,
       children,
       hasAttachment,
+      code,
       ...rest
     } = this.props;
     const { plugins } = this.state;

src/components/draft-js-plugins-editor/index.js

@@ -60,11 +60,20 @@ class AndroidFallbackInput extends React.Component<Props, FallbackState> {
   };
 
   render() {
+    const {
+      editorState,
+      editorRef,
+      stripPastedStyles,
+      customStyleMap,
+      handleReturn,
+      editorKey,
+      ...rest
+    } = this.props;
     return (
       <div className="DraftEditor-root">
         <div className="DraftEditor-editorContainer">
           <Textarea
-            {...this.props}
+            {...rest}
             value={this.state.value}
             onChange={this.onChange}
             className={'DraftEditor-content ' + (this.props.className || '')}

src/components/threadLikes/index.js

@@ -1,9 +1,12 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
 import compose from 'recompose/compose';
 import type { GetThreadType } from 'shared/graphql/queries/thread/getThread';
 import addThreadReactionMutation from 'shared/graphql/mutations/thread/addThreadReaction';
 import removeThreadReactionMutation from 'shared/graphql/mutations/thread/removeThreadReaction';
+import { openModal } from 'src/actions/modals';
 
 import { IconButton } from 'src/components/buttons';
 import Icon from 'src/components/icons';
@@ -13,40 +16,58 @@ type LikeButtonProps = {
   thread: GetThreadType,
   addThreadReaction: Function,
   removeThreadReaction: Function,
+  currentUser: ?Object,
+  dispatch: Dispatch<Object>,
 };
 
-const LikeButtonPure = (props: LikeButtonProps) => {
-  const { thread } = props;
-  const { hasReacted, count } = thread.reactions;
+class LikeButtonPure extends React.Component<LikeButtonProps> {
+  handleClick = () => {
+    const { thread, dispatch, currentUser } = this.props;
 
-  const addThreadReaction = () => {
-    const { thread, addThreadReaction } = props;
+    if (!currentUser || !currentUser.id) {
+      return dispatch(openModal('CHAT_INPUT_LOGIN_MODAL', {}));
+    }
+
+    const { hasReacted } = thread.reactions;
+    return hasReacted ? this.removeThreadReaction() : this.addThreadReaction();
+  };
+
+  addThreadReaction = () => {
+    const { thread, addThreadReaction } = this.props;
     const input = { threadId: thread.id };
     return addThreadReaction({ input });
   };
 
-  const removeThreadReaction = () => {
-    const { thread, removeThreadReaction } = props;
+  removeThreadReaction = () => {
+    const { thread, removeThreadReaction } = this.props;
     const input = { threadId: thread.id };
     return removeThreadReaction({ input });
   };
 
-  return (
-    <LikeButtonWrapper hasReacted={hasReacted}>
-      <IconButton
-        glyph={hasReacted ? 'thumbsup-fill' : 'thumbsup'}
-        tipText={hasReacted ? 'Unlike thread' : 'Like thread'}
-        tipLocation={'bottom-left'}
-        onClick={
-          hasReacted ? () => removeThreadReaction() : () => addThreadReaction()
-        }
-      />
-      <CurrentCount>{count}</CurrentCount>
-    </LikeButtonWrapper>
-  );
-};
+  render() {
+    const { thread } = this.props;
+    const { hasReacted, count } = thread.reactions;
+
+    return (
+      <LikeButtonWrapper hasReacted={hasReacted}>
+        <IconButton
+          glyph={hasReacted ? 'thumbsup-fill' : 'thumbsup'}
+          tipText={hasReacted ? 'Unlike thread' : 'Like thread'}
+          tipLocation={'bottom-left'}
+          onClick={this.handleClick}
+        />
+        <CurrentCount>{count}</CurrentCount>
+      </LikeButtonWrapper>
+    );
+  }
+}
 
+const map = state => ({
+  currentUser: state.users.currentUser,
+});
 export const LikeButton = compose(
+  // $FlowFixMe
+  connect(map),
   addThreadReactionMutation,
   removeThreadReactionMutation
 )(LikeButtonPure);
@@ -63,7 +84,12 @@ export const LikeCount = (props: LikeCountProps) => {
   if (count > 0) {
     return (
       <LikeCountWrapper active={active}>
-        <Icon glyph={'thumbsup-fill'} size={24} />
+        <Icon
+          glyph={'thumbsup-fill'}
+          size={24}
+          tipText={`${count} likes`}
+          tipLocation={'top-right'}
+        />
         <CurrentCount>{count}</CurrentCount>
       </LikeCountWrapper>
     );

src/components/threadLikes/style.js

@@ -29,14 +29,15 @@ export const LikeButtonWrapper = styled(LikeWrapper)`
   }
 
   ${CurrentCount} {
-    margin-left: 4px;
+    margin-right: 8px;
     font-weight: 500;
     color: ${props =>
       props.hasReacted ? props.theme.text.default : props.theme.text.alt};
   }
 `;
 
 export const LikeCountWrapper = styled(LikeWrapper)`
+  margin-right: 8px;
   color: ${props =>
     props.active ? props.theme.text.reverse : props.theme.text.alt};
 `;