Initial work for file sharing using WebTorrent

app/lib/components/Chat/Chat.jsx

@@ -4,6 +4,7 @@ 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
 {
@@ -21,6 +22,9 @@ class Chat extends Component
 		return (
 			<div data-component='Chat'>
 				<MessageList />
+
+				<FileSharing />
+
 				<form
 					data-component='Sender'
 					onSubmit={(e) => { onSendMessage(e, displayName, picture); }}

app/lib/components/Chat/FileSharing.jsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import WebTorrent from 'webtorrent';
+import dragDrop from 'drag-drop';
+import * as stateActions from '../../redux/stateActions';
+import * as requestActions from '../../redux/requestActions';
+
+class FileSharing extends Component {
+  notifyPeers = (file) =>
+  {
+    this.props.notifyPeers(
+      file,
+      this.props.displayName,
+      this.props.picture
+    );
+  };
+
+  componentDidMount()
+  {
+    this.client = new WebTorrent();
+
+    dragDrop('body', (files) =>
+    {
+      this.client.seed(files, (torrent) => {
+        this.notifyPeers({
+          magnet: torrent.magnetURI
+        });
+      });
+    });
+  }
+
+  render()
+  {
+    return (
+      <div>
+        drag & drop files to share them!!!
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) =>
+  ({
+    displayName: state.me.displayName,
+    picture: state.me.picture
+  });
+
+const mapDispatchToProps = (dispatch) =>
+  ({
+    notifyPeers: (file, displayName, picture) =>
+    {
+      console.log(file)
+      dispatch(stateActions.addUserFile(file));
+      dispatch(requestActions.sendChatFile(file, displayName, picture));
+    }
+  });
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FileSharing);

app/lib/components/Chat/MessageList.jsx

@@ -48,30 +48,40 @@ class MessageList extends Component
 				{
 					chatmessages.map((message, i) =>
 					{
+						console.log(message);
+
 						const messageTime = new Date(message.time);
 
 						const picture = (message.sender === 'response' ?
 							message.picture : this.props.myPicture) || 'resources/images/avatar-empty.jpeg';
-
+					
 						return (
 							<div className='message' key={i}>
 								<div className={message.sender}>
 									<img className='message-avatar' src={picture} />
 
 									<div className='message-content'>
-										<div
-											className='message-text'
-											// eslint-disable-next-line react/no-danger
-											dangerouslySetInnerHTML={{ __html : marked.parse(
-												message.text,
-												{ sanitize: true, renderer: linkRenderer }
-											) }}
-										/>
+										{message.type === '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)}
-										</span>
+										{message.type === 'file' && (
+											<div>
+												{message.file.magnet}
+											</div>
+										)}
 									</div>
+
+									<span className='message-time'>
+										{message.name} - {this.getTimeString(messageTime)}
+									</span>
 								</div>
 							</div>
 						);