Update all dependencies

components/CurrentReplies.js

@@ -94,7 +94,6 @@ class DeletedItems extends React.Component {
 }
 
 export default function CurrentReplies({
-  authId,
   replyConnections,
   disabled = false,
   onDelete = () => {},
@@ -122,7 +121,6 @@ export default function CurrentReplies({
     <ul className="items">
       {validConnections.map(conn => (
         <ReplyConnection
-          authId={authId}
           key={`${conn.get('articleId')}__${conn.get('replyId')}`}
           replyConnection={conn}
           onAction={onDelete}

components/ReplyConnection.js

@@ -50,7 +50,6 @@ export default class ReplyConnection extends React.PureComponent {
 
   renderFooter = () => {
     const {
-      authId,
       replyConnection,
       disabled,
       actionText,
@@ -87,11 +86,7 @@ export default class ReplyConnection extends React.PureComponent {
               </button>,
             ]
           : ''}
-        <ReplyFeedback
-          authId={authId}
-          replyConnection={replyConnection}
-          onVote={onVote}
-        />
+        <ReplyFeedback replyConnection={replyConnection} onVote={onVote} />
       </footer>
     );
   };

components/ReplyFeedback.js

@@ -1,22 +1,14 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { feedbackStyle } from './ReplyFeedback.styles';
 
-export default class ReplyFeedback extends PureComponent {
+class ReplyFeedback extends Component {
   static propTypes = {
-    authId: PropTypes.string,
     replyConnection: PropTypes.object.isRequired,
     onVote: PropTypes.func.isRequired,
   };
 
-  /**
-   * @returns {boolean} if the reply connection is created by the current user
-   */
-  isOwnReply = () => {
-    const { replyConnection, authId } = this.props;
-    return authId === replyConnection.getIn(['user', 'id']);
-  };
-
   handleUpVote = () => {
     const { replyConnection, onVote } = this.props;
     return onVote(replyConnection, 'UPVOTE');
@@ -28,11 +20,11 @@ export default class ReplyFeedback extends PureComponent {
   };
 
   getFeedbackScore = () => {
-    return this.props.replyConnection.get('feedbacks').reduce(
+    const { replyConnection, currentUserId } = this.props;
+
+    return replyConnection.get('feedbacks').reduce(
       (agg, feedback) => {
-        const isOwnFeedback =
-          !this.isOwnReply() &&
-          feedback.getIn(['user', 'id']) === this.props.authId;
+        const isOwnFeedback = feedback.getIn(['user', 'id']) === currentUserId;
 
         switch (feedback.get('score')) {
           case 1:
@@ -51,16 +43,20 @@ export default class ReplyFeedback extends PureComponent {
   };
 
   render() {
+    const { currentUserId, replyConnection } = this.props;
     const { positiveCount, negativeCount, ownVote } = this.getFeedbackScore();
-    const isOwnReply = this.isOwnReply();
+
+    const isOwnArticleReply =
+      currentUserId === replyConnection.getIn(['user', 'id']);
+
     return (
       <div className="reply-feedback">
-        {!isOwnReply && <label>是否有幫助？</label>}
+        {!isOwnArticleReply && <label>是否有幫助？</label>}
         <span className="vote-num">{positiveCount}</span>
         <button
           className="btn-vote"
           onClick={this.handleUpVote}
-          disabled={isOwnReply}
+          disabled={isOwnArticleReply}
         >
           <svg
             className={`icon icon-circle ${ownVote === 1 && 'active'}`}
@@ -74,7 +70,7 @@ export default class ReplyFeedback extends PureComponent {
         <button
           className="btn-vote"
           onClick={this.handleDownVote}
-          disabled={isOwnReply}
+          disabled={isOwnArticleReply}
         >
           <svg
             className={`icon icon-cross ${ownVote === -1 && 'active'}`}
@@ -89,3 +85,11 @@ export default class ReplyFeedback extends PureComponent {
     );
   }
 }
+
+function mapStateToProps({ auth }) {
+  return {
+    currentUserId: auth.getIn(['user', 'id']),
+  };
+}
+
+export default connect(mapStateToProps)(ReplyFeedback);

ducks/replyDetail.js

@@ -38,10 +38,14 @@ export const load = id => dispatch => {
           }
           replyId
           user {
+            id
             name
           }
           feedbacks {
             score
+            user {
+              id
+            }
           }
           status
           canUpdateStatus

pages/article.js

@@ -208,7 +208,7 @@ class ArticlePage extends React.Component {
   };
 
   render() {
-    const { data, isLoading, isReplyLoading, authId } = this.props;
+    const { data, isLoading, isReplyLoading } = this.props;
 
     const article = data.get('article');
     const replyConnections = data.get('replyConnections');
@@ -265,7 +265,6 @@ class ArticlePage extends React.Component {
         >
           <h2>現有回應</h2>
           <CurrentReplies
-            authId={authId}
             replyConnections={replyConnections}
             disabled={isReplyLoading}
             onDelete={this.handleReplyConnectionDelete}
@@ -310,9 +309,8 @@ function bootstrapFn(dispatch, { query: { id } }) {
   return dispatch(loadAuth(id));
 }
 
-function mapStateToProps({ articleDetail, auth }) {
+function mapStateToProps({ articleDetail }) {
   return {
-    authId: auth.getIn(['user', 'id']),
     isLoading: articleDetail.getIn(['state', 'isLoading']),
     isReplyLoading: articleDetail.getIn(['state', 'isReplyLoading']),
     data: articleDetail.get('data'),