scroll all the way to bottom when a new message arrives

bfrontend/src/Components/Categories/CategoryView.js

@@ -5,17 +5,20 @@ import gatewayConnection from '../../Gateway/globalGatewayConnection';
 
 import { useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
 function CategoryView({ categories, messages }) {
     const { id } = useParams();
     const [ textInput, setTextInput ] = useState('');
     const textInputRef = useRef(null);
+    const invisibleBottomMessageRef = useRef(null);
 
     let category;
 
-    if (categories) {
-        category = categories.find(x => x._id === id);
+    const scrollToBottom = () => {
+        if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) {
+            invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' });
+        }
     }
     
     const handleTextboxKeydown = (e) => {
@@ -27,6 +30,12 @@ function CategoryView({ categories, messages }) {
         }
     }
 
+    useEffect(scrollToBottom, [messages]);
+
+    if (categories) {
+        category = categories.find(x => x._id === id);
+    }
+
     if (category) {
         return (
             <div className="card main-card main-content-card">
@@ -35,6 +44,7 @@ function CategoryView({ categories, messages }) {
                 </div>
                 <div className="card message-list-card">
                     { messages.map(m => <Message key={ m._id } message={ m } />) }
+                    <div ref={ invisibleBottomMessageRef }></div>
                 </div>
                 <div className="card bar-card-bottom">
                     <input className="text-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>

bfrontend/src/Styles/App.scss

@@ -207,7 +207,8 @@ body {
 
     display: flex;
     flex-direction: column;
-    margin-top: 15px;
+    margin-top: 12px;
+    margin-bottom: 12px;
     margin-left: 5px;
     margin-right: 5px;
     padding: 5px;