From 15f8b2bab59b77c9253b3adb20fc25dd325cbc09 Mon Sep 17 00:00:00 2001
From: Iuri Matias <iuri.matias@gmail.com>
Date: Sun, 11 Nov 2018 07:53:23 -0500
Subject: [PATCH] add autoscroll

---
 app/components/ChatRoom.js | 6 ++++--
 package-lock.json          | 5 +++++
 package.json               | 1 +
 yarn.lock                  | 4 ++++
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/components/ChatRoom.js b/app/components/ChatRoom.js
index 6f4dee0..ee8cfe2 100644
--- a/app/components/ChatRoom.js
+++ b/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 }) => {
diff --git a/package-lock.json b/package-lock.json
index 534333b..fc795de 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 3a0daf6..d8f700e 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 6d9de42..2cbe345 100644
--- a/yarn.lock
+++ b/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"