Move file sharing into a separate tab

app/lib/RoomClient.js

@@ -205,6 +205,22 @@ export default class RoomClient
 			});
 	}
 
+	sendFile(file)
+	{
+		logger.debug('sendFile() [file: %o]', file);
+
+		return this._protoo.send('send-file', { file })
+			.catch((error) =>
+		{
+			logger.error('sendFile() | failed: %o', error);
+
+			this._dispatch(requestActions.notify({
+				typ: 'error',
+				text: 'An error occurred while sharing a file'
+			}));
+		});
+	}
+
 	getChatHistory()
 	{
 		logger.debug('getChatHistory()');
@@ -1146,6 +1162,17 @@ export default class RoomClient
 					break;
 				}
 
+				case 'file-receive':
+				{
+					accept();
+
+					const { file } = request.data;
+
+					this._dispatch(stateActions.addFile(file));
+
+					break;
+				}
+
 				default:
 				{
 					logger.error('unknown protoo method "%s"', request.method);

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'

app/lib/redux/reducers/chatmessages.js

@@ -17,15 +17,6 @@ const chatmessages = (state = [], action) =>
 			return [ ...state, message ];
 		}
 
-		case 'ADD_NEW_USER_FILE':
-		{
-			const { file } = action.payload;
-
-			const message = createNewFile(file, 'client', 'Me', undefined);
-
-			return [ ...state, message ];
-		}
-
 		case 'ADD_NEW_RESPONSE_MESSAGE':
 		{
 			const { message } = action.payload;

app/lib/redux/reducers/helper.js

@@ -8,16 +8,4 @@ export function createNewMessage(text, sender, name, picture)
 		sender,
 		picture
 	};
-}
-
-export function createNewFile(file, sender, name, picture)
-{
-	return {
-		type : 'file',
-		file,
-		time : Date.now(),
-		name,
-		sender,
-		picture
-	};
 }

app/lib/redux/reducers/index.js

@@ -8,6 +8,7 @@ import notifications from './notifications';
 import chatmessages from './chatmessages';
 import chatbehavior from './chatbehavior';
 import toolarea from './toolarea';
+import sharing from './sharing';
 
 const reducers = combineReducers(
 	{
@@ -19,7 +20,8 @@ const reducers = combineReducers(
 		notifications,
 		chatmessages,
 		chatbehavior,
-		toolarea
+		toolarea,
+		sharing
 	});
 
 export default reducers;

app/lib/redux/reducers/sharing.js

@@ -0,0 +1,16 @@
+const sharing = (state = [], action) =>
+{
+  switch (action.type)
+  {
+    case 'SEND_FILE':
+      return [ ...state, { ...action.payload, me: true }];
+
+    case 'ADD_FILE':
+      return [ ...state, action.payload ];
+
+    default:
+      return state;
+  }
+};
+
+export default sharing;

app/lib/redux/requestActions.js

@@ -214,13 +214,11 @@ export const sendChatMessage = (text, name, picture) =>
 	};
 };
 
-export const sendChatFile = (magnet, name, picture) =>
+export const sendFile = (file, name, picture) =>
 {
-	const message = createNewFile(magnet, 'response', name, picture);
-
 	return {
-		type    : 'SEND_CHAT_MESSAGE',
-		payload : { message }
+		type: 'SEND_FILE',
+		payload: { file, name, picture }
 	};
 };
 

app/lib/redux/roomClientMiddleware.js

@@ -231,6 +231,12 @@ export default ({ dispatch, getState }) => (next) =>
 
 				break;
 			}
+
+			case 'SEND_FILE':
+			{
+				client.sendFile(action.payload);
+				break;
+			}
 		}
 
 		return next(action);

app/lib/redux/stateActions.js

@@ -441,6 +441,14 @@ export const dropMessages = () =>
 	};
 };
 
+export const addFile = (payload) =>
+{
+	return {
+		type: 'ADD_FILE',
+		payload
+	};
+};
+
 export const setPicture = (picture) =>
 	({
 		type    : 'SET_PICTURE',

app/stylus/components/ToolArea.styl

@@ -89,7 +89,7 @@
 			font-weight: bold;
 			transition: background ease 0.2s;
 			text-align: center;
-			width: 33.33%;
+			width: 25%;
 			font-size: 1.3vmin;
 			height: 3vmin;