add autoscroll

app/components/ChatRoom.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { Fragment } from 'react';
 import { Formik } from 'formik';
+import autoscroll from 'autoscroll-react';
 import PersonIcon from '@material-ui/icons/PersonOutline';
 import List from '@material-ui/core/List';
 import Divider from '@material-ui/core/Divider';
@@ -12,6 +13,7 @@ import grey from '@material-ui/core/colors/grey';
 import ChatBox from './ChatBox';
 import ChatHeader from './ChatHeader';
 
+let AutoScrollList = autoscroll(List);
 
 const formStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', flexBasis: '10%' };
 const listStyle = { overflow: 'scroll', flexBasis: '76%' };
@@ -26,7 +28,7 @@ const ChatRoom = ({ messages, sendMessage, currentChannel, usersTyping, typingEv
     >
       <ChatHeader currentChannel={currentChannel}/>
       <Divider />
-      <List style={listStyle}>
+      <AutoScrollList style={listStyle}>
         {messages[currentChannel] && messages[currentChannel].map((message, idx) => (
           <Fragment key={idx + message.message}>
             <ChatBox {...message} />
@@ -35,7 +37,7 @@ const ChatRoom = ({ messages, sendMessage, currentChannel, usersTyping, typingEv
             </li>
           </Fragment>
         ))}
-      </List>
+      </AutoScrollList>
       <Formik
         initialValues={{ chatInput: '' }}
         onSubmit={(values, { setSubmitting, resetForm }) => {

package-lock.json

@@ -2566,6 +2566,11 @@
         "postcss-value-parser": "^3.3.1"
       }
     },
+    "autoscroll-react": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/autoscroll-react/-/autoscroll-react-3.2.0.tgz",
+      "integrity": "sha512-HOiwy9GGTSk9WZwEPd+FwNLLZ17o5wkjAtAb+RtQUr/2J1PT2KRG+OI6LoGtfY5EwWvQKAbSsjkgLvLhItscSg=="
+    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",

package.json

@@ -258,6 +258,7 @@
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@material-ui/core": "^3.4.0",
     "@material-ui/icons": "^3.0.1",
+    "autoscroll-react": "^3.2.0",
     "devtron": "^1.4.0",
     "electron-debug": "^2.0.0",
     "electron-log": "^2.2.17",

yarn.lock

@@ -1667,6 +1667,10 @@ autoprefixer@^9.0.0:
     postcss "^7.0.5"
     postcss-value-parser "^3.3.1"
 
+autoscroll-react@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/autoscroll-react/-/autoscroll-react-3.2.0.tgz#eec26a4f3ef57173a724c356af02f3df5ab03342"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"