Add notification when Blob converting fails

app/lib/components/Chat/FileChatEntry.jsx

@@ -1,90 +1,102 @@
 import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { notifyAction } from '../../redux/stateActions';
 import { saveAs } from 'file-saver/FileSaver';
 import { client } from './FileSharing';
 
-const saveFile = (file) =>
-{
-  file.getBlob((err, blob) =>
-  {
-    if (err)
-    {
-      console.error('WebTorrent error');
-      return;
-    }
-
-    console.log('TRYING TO SAVE BLOB', blob)
-    saveAs(blob, file.name);
-  });
-};
-
 class FileChatEntry extends Component
 {
-  state = {
+	state = {
-    active: false,
+		active   : false,
-    numPeers: 0,
+		numPeers : 0,
-    progress: 0,
+		progress : 0,
-    files: null
+		files    : null
-  };
+	};
 
-  download = () =>
+	saveFile = (file) =>
-  {
+	{
-    this.setState({
+		file.getBlob((err, blob) =>
-      active: true
+		{
-    });
+			if (err)
+			{
+				return this.props.notify({
+					text : 'An error occurred while saving a file'
+				});
+			}
 	
-    client.add(this.props.message.file.magnet, (torrent) =>
+			saveAs(blob, file.name);
-    {
+		});
-      const onProgress = () =>
+	};
-      {
-        this.setState({
-          numPeers: torrent.numPeers,
-          progress: Math.round(torrent.progress * 100 * 100) / 100
-        });
-      };
 
-      setInterval(onProgress, 500);
+	download = () =>
-      onProgress();
+	{
+		this.setState({
+			active : true
+		});
 
-      torrent.on('done', () => {
+		client.add(this.props.message.file.magnet, (torrent) =>
-        onProgress();
+		{
-        clearInterval(onProgress);
+			const onProgress = () =>
+			{
+				this.setState({
+					numPeers : torrent.numPeers,
+					progress : Math.round(torrent.progress * 100 * 100) / 100
+				});
+			};
 
-        this.setState({
+			setInterval(onProgress, 500);
-          files: torrent.files
+			onProgress();
-        });
-      });
-    });
-  }
 
-  render()
+			torrent.on('done', () => 
-  {
+			{
-    return (
+				onProgress();
-      <Fragment>
+				clearInterval(onProgress);
-        <div>
-          <button onClick={this.download}>
-            append shared file to body
-          </button>
 
-          {this.state.active && (
+				this.setState({
-            <div>
+					files : torrent.files
-              peers: {this.state.numPeers}
+				});
-              progress: {this.state.progress}
+			});
-            </div>
+		});
-          )}
+	}
 
-          {this.state.files && (
+	render()
-            <div>
+	{
-              {this.state.files.map((file, i) => (
+		return (
-                <div key={i}>
+			<Fragment>
-                  <button onClick={() => saveFile(file)}>download {file.name}</button>
+				<div>
-                </div>
+					<button onClick={this.download}>
-              ))}
+						append shared file to body
-            </div>
+					</button>
-          )}
+
-        </div>
+					{this.state.active && (
-      </Fragment>
+						<div>
-    );
+							peers: {this.state.numPeers}
-  }
+							progress: {this.state.progress}
+						</div>
+					)}
+
+					{this.state.files && (
+						<div>
+							{this.state.files.map((file, i) => (
+								<div key={i}>
+									<button onClick={() => this.saveFile(file)}>
+										download {file.name}
+									</button>
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			</Fragment>
+		);
+	}
 }
 
-export default FileChatEntry;
+const mapDispatchToProps = {
+	notify : notifyAction
+};
+
+export default connect(
+	undefined,
+	mapDispatchToProps
+)(FileChatEntry);

app/lib/components/Chat/FileSharing.jsx

@@ -1,51 +1,53 @@
 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';
-import { store } from '../../store';
+import { store } from '../../store';
 
 export const client = new WebTorrent();
 
 const notifyPeers = (file) =>
 {
-  const { displayName, picture } = store.getState().me;
+	const { displayName, picture } = store.getState().me;
-  store.dispatch(stateActions.addUserFile(file));
+
-  store.dispatch(requestActions.sendChatFile(file, displayName, picture));
+	store.dispatch(stateActions.addUserFile(file));
+	store.dispatch(requestActions.sendChatFile(file, displayName, picture));
 };
 
 const shareFiles = (files) =>
 {
-  client.seed(files, (torrent) => {
+	client.seed(files, (torrent) => 
-    notifyPeers({
+	{
-      magnet: torrent.magnetURI
+		notifyPeers({
-    });
+			magnet : torrent.magnetURI
-  });
+		});
+	});
 };
 
 dragDrop('body', shareFiles);
 
-class FileSharing extends Component {
+class FileSharing extends Component 
-  constructor(props)
+{
-  {
+	constructor(props)
-    super(props);
+	{
-  }
+		super(props);
+	}
 
-  handleFileChange = (event) =>
+	handleFileChange = (event) =>
-  {
+	{
-    if (event.target.files.length > 0)
+		if (event.target.files.length > 0)
-    {
+		{
-      shareFiles(event.target.files);
+			shareFiles(event.target.files);
-    }
+		}
-  };
+	};
 
-  render()
+	render()
-  {
+	{
-    return (
+		return (
-      <input type="file" onChange={this.handleFileChange} />
+			<input type='file' onChange={this.handleFileChange} />
-    );
+		);
-  }
+	}
 }
 
 export default FileSharing;

app/lib/redux/reducers/helper.js

@@ -13,9 +13,9 @@ export function createNewMessage(text, sender, name, picture)
 export function createNewFile(file, sender, name, picture)
 {
 	return {
-		type: 'file',
+		type : 'file',
 		file,
-		time: Date.now(),
+		time : Date.now(),
 		name,
 		sender,
 		picture

app/lib/redux/requestActions.js

@@ -219,8 +219,8 @@ export const sendChatFile = (magnet, name, picture) =>
 	const message = createNewFile(magnet, 'response', name, picture);
 
 	return {
-		type: 'SEND_CHAT_MESSAGE',
+		type    : 'SEND_CHAT_MESSAGE',
-		payload: { message }
+		payload : { message }
 	};
 };
 

app/lib/redux/stateActions.js

@@ -413,8 +413,8 @@ export const addUserMessage = (text) =>
 export const addUserFile = (file) =>
 {
 	return {
-		type: 'ADD_NEW_USER_FILE',
+		type    : 'ADD_NEW_USER_FILE',
-		payload: { file }
+		payload : { file }
 	};
 };