re-implement chat scroll to position

bigbluebutton-html5/imports/ui/components/chat/time-window-list/component.jsx

@@ -80,7 +80,11 @@ class TimeWindowList extends PureComponent {
   }
 
   componentDidMount() {
-    // TODO: re-implement scroll to position using virtualized list    
+    const { scrollPosition: scrollProps } = this.props;
+
+    this.setState({
+      scrollPosition: scrollProps,
+    });
   }
 
   componentDidUpdate(prevProps) {
@@ -99,6 +103,7 @@ class TimeWindowList extends PureComponent {
       syncing,
       syncedPercent,
       lastTimeWindowValuesBuild,
+      scrollPosition: scrollProps,
     } = this.props;
 
     const {
@@ -108,6 +113,12 @@ class TimeWindowList extends PureComponent {
       syncedPercent: prevSyncedPercent
     } = prevProps;
 
+    if (prevChatId !== chatId) {
+      this.setState({
+        scrollPosition: scrollProps,
+      });
+    }
+
     const prevTimeWindowsLength = prevTimeWindowsValues.length;
     const timeWindowsValuesLength = timeWindowsValues.length;
     const prevLastTimeWindow = prevTimeWindowsValues[prevTimeWindowsLength - 1];
@@ -257,6 +268,7 @@ class TimeWindowList extends PureComponent {
     const {
       intl,
       count,
+      timeWindowsValues,
     } = this.props;
     const { userScrolledBack } = this.state;
 
@@ -269,9 +281,15 @@ class TimeWindowList extends PureComponent {
           size="sm"
           key="unread-messages"
           label={intl.formatMessage(intlMessages.moreMessages)}
-          onClick={()=> this.setState({
-            userScrolledBack: false,
-          })}
+          onClick={()=> {
+            const lastItemIndex = timeWindowsValues.length - 1;
+            this.handleScrollUpdate(lastItemIndex);
+
+            this.setState({
+              scrollPosition: lastItemIndex,
+              userScrolledBack: false,
+            });
+          }}
         />
       );
     }
@@ -285,10 +303,12 @@ class TimeWindowList extends PureComponent {
     } = this.props;
     const {
       scrollArea,
-      userScrolledBack,
+      scrollPosition,
     } = this.state;
     ChatLogger.debug('TimeWindowList::render', {...this.props},  {...this.state}, new Date());
 
+    const shouldAutoScroll = !!(scrollPosition && timeWindowsValues.length >= scrollPosition);
+
     return (
       [<div 
         onMouseDown={()=> {
@@ -328,7 +348,7 @@ class TimeWindowList extends PureComponent {
                     }
                   }
                 }}
-                isScrolling={true}
+                isScrolling
                 rowHeight={this.cache.rowHeight}
                 className={styles.messageList}
                 rowRenderer={this.rowRender}
@@ -337,10 +357,11 @@ class TimeWindowList extends PureComponent {
                 width={width}
                 overscanRowCount={0}
                 deferredMeasurementCache={this.cache}
-                scrollToIndex={
-                  !userScrolledBack ? timeWindowsValues.length - 1 : undefined
-                }
-                onScroll={({ clientHeight, scrollHeight, scrollTop })=> {
+                scrollToIndex={shouldAutoScroll ? scrollPosition : undefined}
+                onRowsRendered={({ stopIndex }) => {
+                  this.handleScrollUpdate(stopIndex);
+                }}
+                onScroll={({ clientHeight, scrollHeight, scrollTop }) => {
                   const scrollSize = scrollTop + clientHeight;
                   if (scrollSize >= scrollHeight) {
                     this.setState({