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

app/lib/redux/reducers/chatmessages.js

@@ -1,6 +1,7 @@
 import
 {
-	createNewMessage
+	createNewMessage,
+	createNewFile
 } from './helper';
 
 const chatmessages = (state = [], action) =>
@@ -11,7 +12,16 @@ const chatmessages = (state = [], action) =>
 		{
 			const { text } = action.payload;
 
-			const message = createNewMessage(text, 'client', 'Me');
+			const message = createNewMessage(text, 'client', 'Me', undefined);
+
+			return [ ...state, message ];
+		}
+
+		case 'ADD_NEW_USER_FILE':
+		{
+			const { file } = action.payload;
+
+			const message = createNewFile(file, 'client', 'Me', undefined);
 
 			return [ ...state, message ];
 		}

app/lib/redux/reducers/helper.js

@@ -8,4 +8,16 @@ 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/requestActions.js

@@ -2,7 +2,8 @@ import randomString from 'random-string';
 import * as stateActions from './stateActions';
 import
 {
-	createNewMessage
+	createNewMessage,
+	createNewFile
 } from './reducers/helper';
 
 export const joinRoom = (
@@ -213,6 +214,16 @@ export const sendChatMessage = (text, name, picture) =>
 	};
 };
 
+export const sendChatFile = (magnet, name, picture) =>
+{
+	const message = createNewFile(magnet, 'response', name, picture);
+
+	return {
+		type: 'SEND_CHAT_MESSAGE',
+		payload: { message }
+	};
+};
+
 // This returns a redux-thunk action (a function).
 export const notify = ({ type = 'info', text, timeout }) =>
 {

app/lib/redux/stateActions.js

@@ -410,6 +410,14 @@ export const addUserMessage = (text) =>
 	};
 };
 
+export const addUserFile = (file) =>
+{
+	return {
+		type: 'ADD_NEW_USER_FILE',
+		payload: { file }
+	};
+};
+
 export const addResponseMessage = (message) =>
 {
 	return {

app/package.json

@@ -11,6 +11,7 @@
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "domready": "^1.0.8",
+    "drag-drop": "^4.2.0",
     "fscreen": "^1.0.2",
     "hark": "^1.2.2",
     "js-cookie": "^2.2.0",
@@ -33,7 +34,8 @@
     "redux-thunk": "^2.3.0",
     "resize-observer-polyfill": "^1.5.0",
     "riek": "^1.1.0",
-    "url-parse": "^1.4.1"
+    "url-parse": "^1.4.1",
+    "webtorrent": "^0.101.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",