From b638422e35e698cf4de291a3eed93994906d7eac Mon Sep 17 00:00:00 2001
From: hippoz <paperplanelive@gmail.com>
Date: Tue, 12 Jan 2021 01:08:35 +0200
Subject: [PATCH] scroll all the way to bottom when a new message arrives

---
 .../src/Components/Categories/CategoryView.js  | 18 ++++++++++++++----
 bfrontend/src/Styles/App.scss                  |  3 ++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/bfrontend/src/Components/Categories/CategoryView.js b/bfrontend/src/Components/Categories/CategoryView.js
index 432084a..6664432 100644
--- a/bfrontend/src/Components/Categories/CategoryView.js
+++ b/bfrontend/src/Components/Categories/CategoryView.js
@@ -5,19 +5,22 @@ 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) => {
         if (e.key === 'Enter') {
             // Send message written in textbox
@@ -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>
diff --git a/bfrontend/src/Styles/App.scss b/bfrontend/src/Styles/App.scss
index 7711a3f..0055522 100644
--- a/bfrontend/src/Styles/App.scss
+++ b/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;