[Upd #87] Autoscroll to last comment in comment dialog

kbss-cvut · Feb 1, 2022 · 7965018 · 7965018
1 parent 74e6508
commit 7965018
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/components/comment/CommentForm.jsx b/src/components/comment/CommentForm.jsx
@@ -31,9 +31,9 @@ const CommentForm = (props) => {
 
     const autoResizeTextArea = (e) => {
         const textArea = document.getElementById("comment-form");
-        textArea.style.height = "auto"
+        textArea.style.height = "auto";
         let scrollHeight = e.target.scrollHeight;
-        textArea.style.height = `${scrollHeight}px`
+        textArea.style.height = `${scrollHeight}px`;
     }
 
     return (

diff --git a/src/components/comment/CommentList.jsx b/src/components/comment/CommentList.jsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import CommentView from './CommentView';
 import PropTypes from 'prop-types';
 import Constants from '../../constants/Constants';
 import { Rings } from 'react-loader-spinner';
 
 const CommentList = (props) => {
+  const commentEndRef = useRef(null);
   const [isDeleting, setIsDeleting] = useState(false);
 
   const deleteCommentViewHandler = () => {
@@ -14,6 +15,13 @@ const CommentList = (props) => {
     }, 2000);
   };
 
+  useEffect(() => {
+    if (commentEndRef.current === null) {
+      return;
+    }
+    commentEndRef.current.scrollTop = commentEndRef.current.scrollHeight;
+  }, [JSON.stringify(props.comments)]);
+
   return (
     <span>
       {isDeleting ? (
@@ -22,8 +30,8 @@ const CommentList = (props) => {
           <p>Deleting comment...</p>
         </div>
       ) : (
-        <div className="comment-list-items">
-          {props.comment.map((comment, index) => (
+        <div className="comment-list-items" ref={commentEndRef}>
+          {props.comments.map((comment, index) => (
             <div key={index} className="comment-list-item">
               <CommentView
                 commentValue={comment[Constants.HAS_COMMENT_VALUE]}
@@ -42,7 +50,7 @@ const CommentList = (props) => {
 };
 
 CommentList.propTypes = {
-  comment: PropTypes.array.isRequired,
+  comments: PropTypes.array.isRequired,
   deleteQuestionComment: PropTypes.func.isRequired
 };
 

diff --git a/src/components/comment/QuestionCommentIcon.jsx b/src/components/comment/QuestionCommentIcon.jsx
@@ -105,7 +105,7 @@ const QuestionCommentIcon = (props) => {
                                 whileHover={{scale: 1.1, transition: {duration: 0.1}}}>
                                 <Close/>
                             </motion.div>
-                            <CommentList comment={_getComments()} deleteQuestionComment={deleteQuestionCommentHandler}/>
+                            <CommentList comments={_getComments()} deleteQuestionComment={deleteQuestionCommentHandler}/>
                             <CommentForm onChange={onCommentValueChangeHandler} />
                         </span>
                         </Tooltip>