hippoz/brainlet-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

scroll all the way to bottom when a new message arrives

Browse source
This commit is contained in:
hippoz 2021-01-12 01:08:35 +02:00
parent 68b8568174
commit b638422e35
No known key found for this signature in database
GPG key ID: 7C52899193467641
2 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
bfrontend/src/Components/Categories/CategoryView.js
View file

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

3
bfrontend/src/Styles/App.scss
View file

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