Use HOC for handling auto-scroll in Files tab

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);
+export default compose(
+	connect(mapStateToProps),
+	scrollToBottom()
+)(SharedFilesList);

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
 	};
 };