Add file select input in addition to drag n drop

app/lib/components/Chat/Chat.jsx

@@ -5,17 +5,9 @@ import * as stateActions from '../../redux/stateActions';
 import * as requestActions from '../../redux/requestActions';
 import MessageList from './MessageList';
 import FileSharing from './FileSharing';
-import WebTorrent from 'webtorrent';
 
 class Chat extends Component
 {
-	constructor(props)
-	{
-		super(props);
-
-		this.client = new WebTorrent();
-	}
-
 	render()
 	{
 		const {
@@ -29,9 +21,9 @@ class Chat extends Component
 
 		return (
 			<div data-component='Chat'>
-				<MessageList client={this.client} />
+				<MessageList />
 
-				<FileSharing client={this.client} />
+				<FileSharing />
 
 				<form
 					data-component='Sender'

app/lib/components/Chat/FileChatEntry.jsx

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
-import WebTorrent from 'webtorrent';
 import { saveAs } from 'file-saver/FileSaver';
+import { client } from './FileSharing';
 
 const saveFile = (file) =>
 {
@@ -32,7 +32,7 @@ class FileChatEntry extends Component
       active: true
     });
 
-    this.props.client.add(this.props.message.file.magnet, (torrent) =>
+    client.add(this.props.message.file.magnet, (torrent) =>
     {
       const onProgress = () =>
       {

app/lib/components/Chat/FileSharing.jsx

@@ -4,55 +4,48 @@ import WebTorrent from 'webtorrent';
 import dragDrop from 'drag-drop';
 import * as stateActions from '../../redux/stateActions';
 import * as requestActions from '../../redux/requestActions';
+import { store } from '../../store';
+
+export const client = new WebTorrent();
+
+const notifyPeers = (file) =>
+{
+  const { displayName, picture } = store.getState().me;
+  store.dispatch(stateActions.addUserFile(file));
+  store.dispatch(requestActions.sendChatFile(file, displayName, picture));
+};
+
+const shareFiles = (files) =>
+{
+  client.seed(files, (torrent) => {
+    notifyPeers({
+      magnet: torrent.magnetURI
+    });
+  });
+};
+
+dragDrop('body', shareFiles);
 
 class FileSharing extends Component {
-  notifyPeers = (file) =>
+  constructor(props)
   {
-    this.props.notifyPeers(
+    super(props);
-      file,
-      this.props.displayName,
-      this.props.picture
-    );
-  };
-
-  componentDidMount()
-  {
-    dragDrop('body', (files) =>
-    {
-      this.props.client.seed(files, (torrent) => {
-        this.notifyPeers({
-          magnet: torrent.magnetURI
-        });
-      });
-    });
   }
 
+  handleFileChange = (event) =>
+  {
+    if (event.target.files.length > 0)
+    {
+      shareFiles(event.target.files);
+    }
+  };
+
   render()
   {
     return (
-      <div>
+      <input type="file" onChange={this.handleFileChange} />
-        drag & drop files to share them!!!
-      </div>
     );
   }
 }
 
-const mapStateToProps = (state) =>
+export default FileSharing;
-  ({
-    displayName: state.me.displayName,
-    picture: state.me.picture
-  });
-
-const mapDispatchToProps = (dispatch) =>
-  ({
-    notifyPeers: (file, displayName, picture) =>
-    {
-      dispatch(stateActions.addUserFile(file));
-      dispatch(requestActions.sendChatFile(file, displayName, picture));
-    }
-  });
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(FileSharing);

app/lib/components/Chat/MessageList.jsx

@@ -74,7 +74,7 @@ class MessageList extends Component
 										)}
 
 										{message.type === 'file' && (
-											<FileChatEntry message={message} client={this.props.client} />
+											<FileChatEntry message={message} />
 										)}
 									</div>
 

app/lib/index.jsx

@@ -3,13 +3,6 @@ import UrlParse from 'url-parse';
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import {
-	applyMiddleware as applyReduxMiddleware,
-	createStore as createReduxStore,
-	compose as composeRedux
-} from 'redux';
-import thunk from 'redux-thunk';
-import { createLogger as createReduxLogger } from 'redux-logger';
 import { getDeviceInfo } from 'mediasoup-client';
 import randomString from 'random-string';
 import Logger from './Logger';
@@ -17,48 +10,11 @@ import * as utils from './utils';
 import * as cookiesManager from './cookiesManager';
 import * as requestActions from './redux/requestActions';
 import * as stateActions from './redux/stateActions';
-import reducers from './redux/reducers';
-import roomClientMiddleware from './redux/roomClientMiddleware';
 import Room from './components/Room';
 import { loginEnabled } from '../config';
+import { store } from './store';
 
 const logger = new Logger();
-const reduxMiddlewares =
-[
-	thunk,
-	roomClientMiddleware
-];
-
-if (process.env.NODE_ENV === 'development')
-{
-	const reduxLogger = createReduxLogger(
-		{
-			duration  : true,
-			timestamp : false,
-			level     : 'log',
-			logErrors : true
-		});
-
-	reduxMiddlewares.push(reduxLogger);
-}
-
-const composeEnhancers =
-typeof window === 'object' &&
-window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
-	window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
-		// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
-	}) : composeRedux;
-
-const enhancer = composeEnhancers(
-	applyReduxMiddleware(...reduxMiddlewares)
-	// other store enhancers if any
-);
-
-const store = createReduxStore(
-	reducers,
-	undefined,
-	enhancer
-);
 
 domready(() =>
 {

app/lib/store.js

@@ -0,0 +1,48 @@
+import {
+	applyMiddleware,
+	createStore,
+	compose
+} from 'redux';
+import thunk from 'redux-thunk';
+import { createLogger } from 'redux-logger';
+import reducers from './redux/reducers';
+import roomClientMiddleware from './redux/roomClientMiddleware';
+
+const reduxMiddlewares =
+[
+	thunk,
+	roomClientMiddleware
+];
+
+if (process.env.NODE_ENV === 'development')
+{
+	const reduxLogger = createLogger(
+		{
+			duration  : true,
+			timestamp : false,
+			level     : 'log',
+			logErrors : true
+		});
+
+	reduxMiddlewares.push(reduxLogger);
+}
+
+const composeEnhancers =
+typeof window === 'object' &&
+window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
+	window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+		// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
+	}) : compose;
+
+const enhancer = composeEnhancers(
+	applyMiddleware(...reduxMiddlewares)
+	// other store enhancers if any
+);
+
+export const store = createStore(
+	reducers,
+	undefined,
+	enhancer
+);
+
+console.log(store);