From b638422e35e698cf4de291a3eed93994906d7eac Mon Sep 17 00:00:00 2001 From: hippoz 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 (
@@ -35,6 +44,7 @@ function CategoryView({ categories, messages }) {
{ messages.map(m => ) } +
setTextInput(target.value) }> 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;