Move file sharing into a separate tab

app/lib/components/Chat/Chat.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import * as stateActions from '../../redux/stateActions';
 import * as requestActions from '../../redux/requestActions';
 import MessageList from './MessageList';
-import FileSharing from './FileSharing';
 
 class Chat extends Component
 {
@@ -27,8 +26,6 @@ class Chat extends Component
 					data-component='Sender'
 					onSubmit={(e) => { onSendMessage(e, displayName, picture); }}
 				>
-					<FileSharing />
-
 					<input
 						type='text'
 						className='new-message'

app/lib/components/Chat/MessageList.jsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import marked from 'marked';
 import { connect } from 'react-redux';
-import FileChatEntry from './FileChatEntry';
 
 const scrollToBottom = () =>
 {
@@ -60,20 +59,14 @@ class MessageList extends Component
 									<img className='message-avatar' src={picture} />
 
 									<div className='message-content'>
-										{message.type === 'message' && (
-											<div
-												className='message-text'
-												// eslint-disable-next-line react/no-danger
-												dangerouslySetInnerHTML={{ __html : marked.parse(
-													message.text,
-													{ sanitize: true, renderer: linkRenderer }
-												) }}
-											/>
-										)}
-
-										{message.type === 'file' && (
-											<FileChatEntry message={message} />
-										)}
+										<div
+											className='message-text'
+											// eslint-disable-next-line react/no-danger
+											dangerouslySetInnerHTML={{ __html : marked.parse(
+												message.text,
+												{ sanitize: true, renderer: linkRenderer }
+											) }}
+										/>
 
 										<span className='message-time'>
 											{message.name} - {this.getTimeString(messageTime)}

app/lib/components/FileSharing/FileEntry.jsx

@@ -3,9 +3,9 @@ import { connect } from 'react-redux';
 import magnet from 'magnet-uri';
 import * as requestActions from '../../redux/requestActions';
 import { saveAs } from 'file-saver/FileSaver';
-import { client } from './FileSharing';
+import { client } from './index';
 
-class FileChatEntry extends Component
+class FileEntry extends Component
 {
 	state = {
 		active   : false,
@@ -75,7 +75,7 @@ class FileChatEntry extends Component
 			active : true
 		});
 		
-		const magnet = this.props.message.file.magnet;
+		const magnet = this.props.data.file.magnet;
 
 		const existingTorrent = client.get(magnet);
 
@@ -95,13 +95,13 @@ class FileChatEntry extends Component
 				<div>
 					{!this.state.active && !this.state.files && (
 						<Fragment>
-							{this.props.message.sender === 'client' ? (
+							{this.props.data.me ? (
 								<p>You shared a file.</p>
 							) : (
 								<p>A new file was shared.</p>
 							)}
 
-							<p>{magnet.decode(this.props.message.file.magnet).dn}</p>
+							<p>{magnet.decode(this.props.data.file.magnet).dn}</p>
 
 							<button onClick={this.download}>
 								Download
@@ -147,4 +147,4 @@ const mapDispatchToProps = {
 export default connect(
 	undefined,
 	mapDispatchToProps
-)(FileChatEntry);
+)(FileEntry);

app/lib/components/FileSharing/index.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import WebTorrent from 'webtorrent';
 import createTorrent from 'create-torrent';
 import dragDrop from 'drag-drop';
@@ -7,6 +8,7 @@ import * as stateActions from '../../redux/stateActions';
 import * as requestActions from '../../redux/requestActions';
 import { store } from '../../store';
 import config from '../../../config';
+import FileEntry from './FileEntry';
 
 export const client = new WebTorrent({
 	tracker : {
@@ -20,11 +22,10 @@ const notifyPeers = (file) =>
 {
 	const { displayName, picture } = store.getState().me;
 
-	store.dispatch(stateActions.addUserFile(file));
-	store.dispatch(requestActions.sendChatFile(file, displayName, picture));
+	store.dispatch(requestActions.sendFile(file, displayName, picture));
 };
 
-const shareFiles = async(files) =>
+const shareFiles = async (files) =>
 {
 	const notification =
 	{
@@ -98,23 +99,40 @@ class FileSharing extends Component
 	{
 		return (
 			<div>
-				<input
-					style={{ display: 'none' }}
-					ref={this.fileInput}
-					type='file'
-					onChange={this.handleFileChange}
-					multiple
-				/>
+				<div>
+					<input
+						style={{ display: 'none' }}
+						ref={this.fileInput}
+						type='file'
+						onChange={this.handleFileChange}
+						multiple
+					/>
 
-				<button
-					type='button'
-					onClick={this.handleClick}
-				>
-					share file
-				</button>
+					<button
+						type='button'
+						onClick={this.handleClick}
+					>
+						share file
+					</button>
+				</div>
+
+				<div>
+					{this.props.sharing.map((entry) => (
+						<FileEntry
+							data={entry}
+						/>
+					))}
+				</div>
 			</div>
 		);
 	}
 }
 
-export default FileSharing;
+const mapStateToProps = (state) =>
+	({
+		sharing: state.sharing
+	});
+
+export default connect(
+	mapStateToProps
+)(FileSharing);

app/lib/components/ToolArea/ToolArea.jsx

@@ -5,6 +5,7 @@ import * as toolTabActions from '../../redux/stateActions';
 import ParticipantList from '../ParticipantList/ParticipantList';
 import Chat from '../Chat/Chat';
 import Settings from '../Settings';
+import FileSharing from '../FileSharing';
 
 class ToolArea extends React.Component
 {
@@ -46,6 +47,19 @@ class ToolArea extends React.Component
 						<Chat />
 					</div>
 
+					<input
+						type='radio'
+						name='tabs'
+						id='tab-files'
+						onChange={() => setToolTab('files')}
+						checked={currentToolTab === 'files'}
+					/>
+					<label htmlFor='tab-files'>Files</label>
+
+					<div className='tab'>
+						<FileSharing />
+					</div>
+
 					<input
 						type='radio'
 						name='tabs'