hide comment reply when another one opens

web/app/components/comment/comment.jsx

@@ -11,10 +11,6 @@ export default class Comment extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      isInputVisible: false,
-    };
-
     this.updateState(props);
 
     this.decreaseScore = this.decreaseScore.bind(this);
@@ -60,9 +56,13 @@ export default class Comment extends Component {
   }
 
   onReplyClick() {
-    const { isInputVisible } = this.state;
+    const { data: { id }, replyingCommentId } = this.props;
 
-    this.setState({ isInputVisible: !isInputVisible });
+    if (replyingCommentId === id) {
+      store.set('replyingCommentId', null);
+    } else {
+      store.set('replyingCommentId', id);
+    }
   }
 
   onPinClick() {
@@ -161,11 +161,10 @@ export default class Comment extends Component {
 
   onReply(...rest) {
     this.props.onReply(...rest);
-    this.setState({ isInputVisible: false });
   }
 
-  render(props, { guest, userBlocked, pinned, score, scoreIncreased, scoreDecreased, isInputVisible, deleted }) {
-    const { data, mix, mods = {} } = props;
+  render(props, { guest, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted }) {
+    const { data, mix, mods = {}, replyingCommentId } = props;
     const isAdmin = !guest && store.get('user').admin;
     const isGuest = guest || !Object.keys(store.get('user')).length;
 
@@ -206,6 +205,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,
     };
 
     return (
@@ -345,7 +345,7 @@ export default class Comment extends Component {
         </div>
 
         {
-          isInputVisible && (
+          o.id === replyingCommentId && (
             <Input mix="comment__input" onSubmit={this.onReply} pid={o.id} autoFocus/>
           )
         }

web/app/components/root/root.jsx

@@ -19,6 +19,7 @@ export default class Root extends Component {
     this.state = {
       loaded: false,
       user: {},
+      replyingCommentId: null,
     };
 
     this.addComment = this.addComment.bind(this);
@@ -32,6 +33,7 @@ export default class Root extends Component {
 
   componentWillMount() {
     store.onUpdate('comments', comments => this.setState({ comments }));
+    store.onUpdate('replyingCommentId', id => this.setState({ replyingCommentId: id }));
   }
 
   componentDidMount() {
@@ -130,10 +132,11 @@ export default class Root extends Component {
     api.getComment({ id: data.id }).then(comment => {
       store.replaceComment(comment);
       this.setState({ comments: store.get('comments') });
+      store.set('replyingCommentId', null);
     });
   }
 
-  render({}, { config = {}, comments = [], user, loaded, isBlockedVisible, bannedUsers }) {
+  render({}, { config = {}, comments = [], user, loaded, isBlockedVisible, bannedUsers, replyingCommentId }) {
     if (!loaded) {
       return (
         <div id={NODE_ID}>
@@ -198,6 +201,7 @@ export default class Root extends Component {
                             mods={{ level: 0 }}
                             data={thread}
                             onReply={this.addComment}
+                            replyingCommentId={replyingCommentId}
                           />
                         ))
                       }

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 = {} } = props;
+    const { data: { comment, replies = [] }, mix, mods = {}, replyingCommentId } = props;
 
     return (
       <div className={b('thread', props)}>
@@ -12,6 +12,7 @@ export default class Thread extends Component {
           data={comment}
           mods={{ level: mods.level }}
           onReply={props.onReply}
+          replyingCommentId={replyingCommentId}
         />
 
         {
@@ -20,6 +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}
             />
           ))
         }