Add basic scroll-to-bottom functionality

app/lib/components/FileSharing/SharedFilesList.jsx

@@ -0,0 +1,59 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import FileEntry, { FileEntryProps } from './FileEntry';
+
+class SharedFilesList extends PureComponent
+{
+	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}>
+				{this.props.sharing.map((entry, i) => (
+					<FileEntry
+						data={entry}
+						key={i}
+					/>
+				))}
+			</div>
+		);
+	}
+}
+
+SharedFilesList.propTypes = {
+	sharing : PropTypes.arrayOf(FileEntryProps.data).isRequired
+};
+
+const mapStateToProps = (state) =>
+	({
+		sharing : state.sharing,
+	
+		// Included to scroll to the bottom when the user
+		// actually opens the tab. When the component first
+		// mounts, the component is not visible and so the
+		// component has no height which can be used for scrolling.
+		tabOpen : state.toolarea.currentToolTab === 'files'
+	});
+
+export default connect(
+	mapStateToProps
+)(SharedFilesList);

app/lib/components/FileSharing/index.jsx

@@ -1,6 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import WebTorrent from 'webtorrent';
 import createTorrent from 'create-torrent';
 import randomString from 'random-string';
@@ -9,7 +7,7 @@ import * as stateActions from '../../redux/stateActions';
 import * as requestActions from '../../redux/requestActions';
 import { store } from '../../store';
 import config from '../../../config';
-import FileEntry, { FileEntryProps } from './FileEntry';
+import SharedFilesList from './SharedFilesList';
 
 export const client = WebTorrent.WEBRTC_SUPPORT && new WebTorrent({
 	tracker : {
@@ -124,28 +122,10 @@ class FileSharing extends Component
 					</div>
 				</div>
 
-				<div className='shared-files'>
-					{this.props.sharing.map((entry, i) => (
-						<FileEntry
-							data={entry}
-							key={i}
-						/>
-					))}
-				</div>
+				<SharedFilesList />
 			</div>
 		);
 	}
 }
 
-FileSharing.propTypes = {
-	sharing : PropTypes.arrayOf(FileEntryProps.data).isRequired
-};
-
-const mapStateToProps = (state) =>
-	({
-		sharing : state.sharing
-	});
-
-export default connect(
-	mapStateToProps
-)(FileSharing);
+export default FileSharing;