Move the comment component ref to CommentList

This commit solve the warning of unexpected ref object provided for a div.
shakacode · Aug 10, 2023 · 907295a · 907295a
1 parent 4223647
commit 907295a
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 30 deletions.
diff --git a/client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx b/client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx
@@ -21,6 +21,12 @@ 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');
   }
 

diff --git a/client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx b/client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx
@@ -37,12 +37,6 @@ class SimpleCommentScreen extends BaseComponent {
       .get('comments.json', { responseType: 'json' })
       .then((res) => {
         const comments = [...res.data.comments];
-        for (const comment of comments) {
-          comment.nodeRef = React.createRef(null);
-        }
-        // comments.forEach((comment) => {
-        //   comment.nodeRef = React.createRef(null);
-        // });
         this.setState({ $$comments: Immutable.fromJS(comments) });
       })
       .catch((error) => this.setState({ fetchCommentsError: error }));

diff --git a/client/app/bundles/comments/reducers/commentsReducer.js b/client/app/bundles/comments/reducers/commentsReducer.js
@@ -19,14 +19,6 @@ export default function commentsReducer($$state = $$initialState, action = null)
 
   switch (type) {
     case actionTypes.FETCH_COMMENTS_SUCCESS: {
-      for (const comment of comments) {
-        comment.nodeRef = React.createRef(null);
-      }
-
-      // comments.forEach((comment) => {
-      //   comment.nodeRef = React.createRef(null);
-      // });
-
       return $$state.merge({
         $$comments: Immutable.fromJS(comments),
         fetchCommentError: null,

diff --git a/client/app/bundles/comments/store/commentsStore.js b/client/app/bundles/comments/store/commentsStore.js
@@ -1,4 +1,4 @@
-import React from 'react';
+// import React from 'react';
 import Immutable from 'immutable';
 import { compose, createStore, applyMiddleware, combineReducers } from 'redux';
 import thunkMiddleware from 'redux-thunk';
@@ -9,13 +9,6 @@ export default (props, railsContext) => {
   const initialComments = props.comments;
   const { $$commentsState } = initialStates;
 
-  for (const comment of initialComments) {
-    comment.nodeRef = React.createRef(null);
-  }
-
-  // initialComments.forEach((comment) => {
-  //   comment.nodeRef = React.createRef(null);
-  // });
   const initialState = {
     $$commentsStore: $$commentsState.merge({
       $$comments: Immutable.fromJS(initialComments),

diff --git a/client/app/bundles/comments/store/routerCommentsStore.js b/client/app/bundles/comments/store/routerCommentsStore.js
@@ -1,4 +1,4 @@
-import React from 'react';
+// import React from 'react';
 import Immutable from 'immutable';
 import { applyMiddleware, compose, createStore, combineReducers } from 'redux';
 import { routerReducer } from 'react-router-redux';
@@ -12,13 +12,6 @@ export default (props, railsContext) => {
   const initialComments = props.comments;
   const { $$commentsState } = initialStates;
 
-  for (const comment of initialComments) {
-    comment.nodeRef = React.createRef(null);
-  }
-
-  // initialComments.forEach((comment) => {
-  //   comment.nodeRef = React.createRef(null);
-  // });
   const initialState = {
     $$commentsStore: $$commentsState.merge({
       $$comments: Immutable.fromJS(initialComments),