Chore: Ensure comment list auto scrolls to bottom on post (#339)

Author: pramodsum

src/components/CommentList/CommentList.js

@@ -13,14 +13,44 @@ type Props = {
     onDelete: Function
 };
 
-const CommentList = ({ comments, onDelete }: Props) => (
-    <ul className={CLASS_COMMENT_LIST}>
-        {comments.map(({ id, ...rest }) => (
-            <li className={CLASS_COMMENT_LIST_ITEM} key={`annotation_${id}`}>
-                <Comment id={id} onDelete={onDelete} {...rest} />
-            </li>
-        ))}
-    </ul>
-);
+class CommentList extends React.Component<Props> {
+    commentsContainer: null | HTMLElement;
+
+    componentDidMount() {
+        this.scrollToBottom();
+    }
+
+    componentDidUpdate() {
+        this.scrollToBottom();
+    }
+
+    /**
+     * Scrolls the container to the bottom
+     * @return {void}
+     */
+    scrollToBottom = () => {
+        if (this.commentsContainer) {
+            this.commentsContainer.scrollTop = this.commentsContainer.scrollHeight;
+        }
+    };
+
+    render() {
+        const { comments, onDelete } = this.props;
+        return (
+            <ul
+                className={CLASS_COMMENT_LIST}
+                ref={(ref) => {
+                    this.commentsContainer = ref;
+                }}
+            >
+                {comments.map(({ id, ...rest }) => (
+                    <li className={CLASS_COMMENT_LIST_ITEM} key={`annotation_${id}`}>
+                        <Comment id={id} onDelete={onDelete} {...rest} />
+                    </li>
+                ))}
+            </ul>
+        );
+    }
+}
 
 export default CommentList;