From 8c138936f3fcb4a005b0cfc9b54d3707660abc6f Mon Sep 17 00:00:00 2001
From: yassa <yassatamer99@gmail.com>
Date: Mon, 7 Aug 2023 13:13:13 +0300
Subject: [PATCH] Fix add comment ref error
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Since we create the comment nodeRef in the CommentList component
  We don’t need it to be created during adding a comment.

- We shouldn’t change the props of a react component, It is not
  the best practice, So that this commit creates the nodeRef in the
  render function where it is used instead of the constructor function.
---
 .../CommentBox/CommentList/CommentList.jsx    | 43 +++++++++----------
 .../SimpleCommentScreen.jsx                   |  4 +-
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx b/client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx
index 00e2fa15..9beaa81b 100644
--- a/client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx
+++ b/client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx
@@ -20,12 +20,6 @@ export default class CommentList extends BaseComponent {
 
   constructor(props, context) {
     super(props, context);
-    this.state = {};
-
-    const { $$comments } = this.props;
-    for (const comment of $$comments) {
-      comment.nodeRef = React.createRef(null);
-    }
 
     _.bindAll(this, 'errorWarning');
   }
@@ -55,24 +49,27 @@ export default class CommentList extends BaseComponent {
 
   render() {
     const { $$comments, cssTransitionGroupClassNames } = this.props;
-    const commentNodes = $$comments.map(($$comment, index) => (
-      // `key` is a React-specific concept and is not mandatory for the
-      // purpose of this tutorial. if you're curious, see more here:
-      // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
-      <CSSTransition
-        key={$$comment.get('id') || index}
-        nodeRef={$$comment.get('nodeRef')}
-        timeout={500}
-        classNames={cssTransitionGroupClassNames}
-      >
-        <Comment
+    const commentNodes = $$comments.map(($$comment, index) => {
+      const nodeRef = React.createRef(null);
+      return (
+        // `key` is a React-specific concept and is not mandatory for the
+        // purpose of this tutorial. if you're curious, see more here:
+        // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
+        <CSSTransition
           key={$$comment.get('id') || index}
-          author={$$comment.get('author')}
-          text={$$comment.get('text')}
-          ref={$$comment.get('nodeRef')}
-        />
-      </CSSTransition>
-    ));
+          nodeRef={nodeRef}
+          timeout={500}
+          classNames={cssTransitionGroupClassNames}
+        >
+          <Comment
+            key={$$comment.get('id') || index}
+            author={$$comment.get('author')}
+            text={$$comment.get('text')}
+            ref={nodeRef}
+          />
+        </CSSTransition>
+      );
+    });
 
     // For animation with TransitionGroup
     //   https://reactcommunity.org/react-transition-group/transition-group
diff --git a/client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx b/client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx
index 9500384e..e7917c82 100644
--- a/client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx
+++ b/client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx
@@ -54,9 +54,7 @@ class SimpleCommentScreen extends BaseComponent {
       .post('comments.json', { comment }, requestConfig)
       .then(() => {
         const { $$comments } = this.state;
-        // comment.nodeRef = React.createRef(null);
-        const commentWithNodeRef = { ...comment, nodeRef: React.createRef(null) };
-        const $$comment = Immutable.fromJS(commentWithNodeRef);
+        const $$comment = Immutable.fromJS(comment);
 
         this.setState({
           $$comments: $$comments.unshift($$comment),