Share WebTorrent client between multiple components

app/lib/components/Chat/Chat.jsx

@@ -5,9 +5,17 @@ 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 {
@@ -21,9 +29,9 @@ class Chat extends Component
 
 		return (
 			<div data-component='Chat'>
-				<MessageList />
+				<MessageList client={this.client} />
 
-				<FileSharing />
+				<FileSharing client={this.client} />
 
 				<form
 					data-component='Sender'

app/lib/components/Chat/FileChatEntry.jsx

@@ -4,13 +4,6 @@ import { saveAs } from 'file-saver/FileSaver';
 
 class FileChatEntry extends Component
 {
-  constructor(props)
-  {
-    super(props);
-
-    this.client = new WebTorrent();
-  }
-
   state = {
     active: false,
     numPeers: 0,
@@ -23,7 +16,7 @@ class FileChatEntry extends Component
       active: true
     });
 
-    this.client.add(this.props.message.file.magnet, (torrent) =>
+    this.props.client.add(this.props.message.file.magnet, (torrent) =>
     {
       const onProgress = () =>
       {

app/lib/components/Chat/FileSharing.jsx

@@ -17,11 +17,9 @@ class FileSharing extends Component {
 
   componentDidMount()
   {
-    this.client = new WebTorrent();
-
     dragDrop('body', (files) =>
     {
-      this.client.seed(files, (torrent) => {
+      this.props.client.seed(files, (torrent) => {
         this.notifyPeers({
           magnet: torrent.magnetURI
         });

app/lib/components/Chat/MessageList.jsx

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