speed up hide reply form when another one opens

web/app/components/comment/comment.jsx

@@ -11,11 +11,15 @@ export default class Comment extends Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      isInputVisible: false,
+    };
+
     this.updateState(props);
 
     this.decreaseScore = this.decreaseScore.bind(this);
     this.increaseScore = this.increaseScore.bind(this);
-    this.onReplyClick = this.onReplyClick.bind(this);
+    this.toggleInputVisibility = this.toggleInputVisibility.bind(this);
     this.onReply = this.onReply.bind(this);
     this.onPinClick = this.onPinClick.bind(this);
     this.onUnpinClick = this.onUnpinClick.bind(this);
@@ -55,13 +59,13 @@ export default class Comment extends Component {
     }
   }
 
-  onReplyClick() {
-    const { data: { id }, replyingCommentId } = this.props;
+  toggleInputVisibility() {
+    const { isInputVisible } = this.state;
 
-    if (replyingCommentId === id) {
-      store.set('replyingCommentId', null);
-    } else {
-      store.set('replyingCommentId', id);
+    this.setState({ isInputVisible: !isInputVisible });
+
+    if (this.props.onReplyClick) {
+      this.props.onReplyClick(() => this.setState({ isInputVisible: false }));
     }
   }
 
@@ -163,8 +167,8 @@ export default class Comment extends Component {
     this.props.onReply(...rest);
   }
 
-  render(props, { guest, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted }) {
-    const { data, mix, mods = {}, replyingCommentId } = props;
+  render(props, { guest, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
+    const { data, mix, mods = {} } = props;
     const isAdmin = !guest && store.get('user').admin;
     const isGuest = guest || !Object.keys(store.get('user')).length;
 
@@ -205,7 +209,7 @@ export default class Comment extends Component {
       useless: userBlocked || deleted,
       // TODO: add default view mod or don't?
       view: o.user.admin ? 'admin' : null,
-      replying: replyingCommentId === o.id,
+      replying: isInputVisible,
     };
 
     return (
@@ -275,7 +279,7 @@ export default class Comment extends Component {
                     <span
                       className="comment__action"
                       tabIndex="0"
-                      onClick={this.onReplyClick}
+                      onClick={this.toggleInputVisibility}
                     >reply</span>
                   </span>
                 )
@@ -345,7 +349,7 @@ export default class Comment extends Component {
         </div>
 
         {
-          o.id === replyingCommentId && (
+          isInputVisible && (
             <Input mix="comment__input" onSubmit={this.onReply} pid={o.id} autoFocus/>
           )
         }

web/app/components/root/root.jsx

@@ -27,6 +27,7 @@ export default class Root extends Component {
     this.onSignOut = this.onSignOut.bind(this);
     this.onBlockedUsersShow = this.onBlockedUsersShow.bind(this);
     this.onBlockedUsersHide = this.onBlockedUsersHide.bind(this);
+    this.onReplyClick = this.onReplyClick.bind(this);
     this.onUnblockSomeone = this.onUnblockSomeone.bind(this);
     this.checkUrlHash = this.checkUrlHash.bind(this);
   }
@@ -121,6 +122,14 @@ export default class Root extends Component {
     });
   }
 
+  onReplyClick(cb) {
+    if (this.onPrevReplyClickCallback) {
+      this.onPrevReplyClickCallback();
+    }
+
+    this.onPrevReplyClickCallback = cb;
+  }
+
   onUnblockSomeone() {
     this.setState({ wasSomeoneUnblocked: true });
   }
@@ -201,7 +210,7 @@ export default class Root extends Component {
                             mods={{ level: 0 }}
                             data={thread}
                             onReply={this.addComment}
-                            replyingCommentId={replyingCommentId}
+                            onReplyClick={this.onReplyClick}
                           />
                         ))
                       }

web/app/components/thread/thread.jsx

@@ -4,7 +4,7 @@ import Comment from 'components/comment';
 
 export default class Thread extends Component {
   render(props) {
-    const { data: { comment, replies = [] }, mix, mods = {}, replyingCommentId } = props;
+    const { data: { comment, replies = [] }, mix, mods = {}, onReplyClick } = props;
 
     return (
       <div className={b('thread', props)}>
@@ -12,7 +12,7 @@ export default class Thread extends Component {
           data={comment}
           mods={{ level: mods.level }}
           onReply={props.onReply}
-          replyingCommentId={replyingCommentId}
+          onReplyClick={onReplyClick}
         />
 
         {
@@ -21,7 +21,7 @@ export default class Thread extends Component {
               data={thread}
               mods={{ level: mods.level < 5 ? mods.level + 1 : mods.level }}
               onReply={props.onReply}
-              replyingCommentId={replyingCommentId}
+              onReplyClick={onReplyClick}
             />
           ))
         }