import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { feedbackStyle } from './ReplyFeedback.styles';

export default class ReplyFeedback extends PureComponent {
  static propTypes = {
    authId: PropTypes.string,
    replyConnection: PropTypes.object.isRequired,
    onVote: PropTypes.func.isRequired,
  };

  state = {
    isOwnReply: false,
  };

  componentWillUpdate = nextProps => {
    // check is own reply or not
    if (!this.props.authId && nextProps.authId) {
      const replyUserId = this.props.replyConnection.getIn(['user', 'id']);
      this.setState({
        isOwnReply: replyUserId === nextProps.authId,
      });
    }
  };

  handleUpVote = () => {
    const { replyConnection, onVote } = this.props;
    return onVote(replyConnection, 'UPVOTE');
  };

  handleDownVote = () => {
    const { replyConnection, onVote } = this.props;
    return onVote(replyConnection, 'DOWNVOTE');
  };

  getFeedbackScore = () => {
    const { isOwnReply } = this.state;
    return this.props.replyConnection.get('feedbacks').reduce(
      (agg, feedback) => {
        const isOwnFeedback =
          !isOwnReply && feedback.getIn(['user', 'id']) === this.props.authId;

        switch (feedback.get('score')) {
          case 1:
            agg.positiveCount += 1;
            isOwnFeedback && (agg.ownVote = 1);
            break;
          case -1:
            agg.negativeCount += 1;
            isOwnFeedback && (agg.ownVote = -1);
        }

        return agg;
      },
      { positiveCount: 0, negativeCount: 0, ownVote: 0 }
    );
  };

  render() {
    const { isOwnReply } = this.state;
    const { positiveCount, negativeCount, ownVote } = this.getFeedbackScore();
    return (
      <div className="reply-feedback">
        {!isOwnReply && <label>是否有幫助？</label>}
        <span className="vote-num">{positiveCount}</span>
        <button
          className="btn-vote"
          onClick={this.handleUpVote}
          disabled={isOwnReply}
        >
          <svg
            className={`icon icon-circle ${ownVote === 1 && 'active'}`}
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
          >
            <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" />
          </svg>
        </button>
        <span className="vote-num">{negativeCount}</span>
        <button
          className="btn-vote"
          onClick={this.handleDownVote}
          disabled={isOwnReply}
        >
          <svg
            className={`icon icon-cross ${ownVote === -1 && 'active'}`}
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
          >
            <path d="M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z" />
          </svg>
        </button>
        <style jsx>{feedbackStyle}</style>
      </div>
    );
  }
}

@@ -345,171 +345,120 @@
 %0A%0A  
-state = %7B%0A    isOwnReply: false,%0A  %7D;%0A%0A  componentWillUpdate = nextProps =%3E %7B%0A    // check is own reply or not%0A    if (!this.props.authId && nextProps.authId) %7B%0A  
+/**%0A   * @returns %7Bboolean%7D if the reply connection is created by the current user%0A   */%0A  isOwnReply = () =%3E %7B%0A
     
@@ -462,28 +462,44 @@
    const
+ %7B
  reply
-User
+Connection, auth
 Id
+ %7D
  = this.
@@ -495,33 +495,56 @@
 d %7D = this.props
-.
+;%0A    return authId === 
 replyConnection.
@@ -570,100 +570,8 @@
 %5D);%0A
-      this.setState(%7B%0A        isOwnReply: replyUserId === nextProps.authId,%0A      %7D);%0A    %7D%0A
   %7D;
@@ -867,47 +867,8 @@
 %3E %7B%0A
-    const %7B isOwnReply %7D = this.state;%0A
     
@@ -994,16 +994,21 @@
        !
+this.
 isOwnRep
@@ -1009,19 +1009,31 @@
 OwnReply
+()
  &&
+%0A         
  feedbac
@@ -1473,47 +1473,8 @@
 ) %7B%0A
-    const %7B isOwnReply %7D = this.state;%0A
     
@@ -1548,16 +1548,58 @@
 core();%0A
+    const isOwnReply = this.isOwnReply();%0A
     retu

Remove compoentWillUpdate because we upgraded to React 16.4