From 384203f9dcc8d7c0737f57eb0c79c996d7a79ca3 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Thu, 2 Aug 2018 09:59:59 +0200
Subject: [PATCH] Use HOC for handling auto-scroll in Files tab

---
 .../FileSharing/SharedFilesList.jsx           | 38 +++++++------------
 app/lib/components/FullScreenView.jsx         |  4 +-
 app/package-lock.json                         | 23 +++--------
 3 files changed, 21 insertions(+), 44 deletions(-)

diff --git a/app/lib/components/FileSharing/SharedFilesList.jsx b/app/lib/components/FileSharing/SharedFilesList.jsx
index 109b009..9b2b6ce 100644
--- a/app/lib/components/FileSharing/SharedFilesList.jsx
+++ b/app/lib/components/FileSharing/SharedFilesList.jsx
@@ -1,33 +1,20 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
+import { compose } from 'redux';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import FileEntry, { FileEntryProps } from './FileEntry';
+import scrollToBottom from '../Chat/scrollToBottom';
 
-class SharedFilesList extends PureComponent
+/**
+ * This component cannot be pure, as we need to use
+ * refs to scroll to the bottom when new files arrive.
+ */
+class SharedFilesList extends Component
 {
-	constructor(props)
-	{
-		super(props);
-
-		this.listRef = React.createRef();
-	}
-
-	scrollToBottom = () =>
-	{
-		const elem = this.listRef.current;
-
-		elem.scrollTop = elem.scrollHeight;
-	};
-
-	componentDidUpdate()
-	{
-		this.scrollToBottom();
-	}
-
 	render()
 	{
 		return (
-			<div className='shared-files' ref={this.listRef}>
+			<div className='shared-files'>
 				{this.props.sharing.map((entry, i) => (
 					<FileEntry
 						data={entry}
@@ -54,6 +41,7 @@ const mapStateToProps = (state) =>
 		tabOpen : state.toolarea.currentToolTab === 'files'
 	});
 
-export default connect(
-	mapStateToProps
-)(SharedFilesList);
\ No newline at end of file
+export default compose(
+	connect(mapStateToProps),
+	scrollToBottom()
+)(SharedFilesList);
diff --git a/app/lib/components/FullScreenView.jsx b/app/lib/components/FullScreenView.jsx
index ebf62f4..d47ffda 100644
--- a/app/lib/components/FullScreenView.jsx
+++ b/app/lib/components/FullScreenView.jsx
@@ -41,7 +41,7 @@ const FullScreenView = (props) =>
 			<div className='controls'>
 				<div
 					className={classnames('button', 'fullscreen', 'room-controls', {
-						visible: toolbarsVisible
+						visible : toolbarsVisible
 					})}
 					onClick={(e) =>
 					{
@@ -73,7 +73,7 @@ FullScreenView.propTypes =
 const mapStateToProps = (state) =>
 {
 	return {
-		consumer : state.consumers[state.room.fullScreenConsumer],
+		consumer        : state.consumers[state.room.fullScreenConsumer],
 		toolbarsVisible : state.room.toolbarsVisible
 	};
 };
diff --git a/app/package-lock.json b/app/package-lock.json
index 3173cc2..2af90be 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -4969,14 +4969,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4991,20 +4989,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5121,8 +5116,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5134,7 +5128,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5149,7 +5142,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5268,8 +5260,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5281,7 +5272,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5403,7 +5393,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",