Add notification when Blob converting fails

app/lib/components/Chat/FileChatEntry.jsx

@@ -1,35 +1,37 @@
 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 = {
-    active: false,
+		active   : false,
-    numPeers: 0,
+		numPeers : 0,
-    progress: 0,
+		progress : 0,
-    files: null
+		files    : null
+	};
+
+	saveFile = (file) =>
+	{
+		file.getBlob((err, blob) =>
+		{
+			if (err)
+			{
+				return this.props.notify({
+					text : 'An error occurred while saving a file'
+				});
+			}
+	
+			saveAs(blob, file.name);
+		});
 	};
 
 	download = () =>
 	{
 		this.setState({
-      active: true
+			active : true
 		});
 
 		client.add(this.props.message.file.magnet, (torrent) =>
@@ -37,20 +39,21 @@ class FileChatEntry extends Component
 			const onProgress = () =>
 			{
 				this.setState({
-          numPeers: torrent.numPeers,
+					numPeers : torrent.numPeers,
-          progress: Math.round(torrent.progress * 100 * 100) / 100
+					progress : Math.round(torrent.progress * 100 * 100) / 100
 				});
 			};
 
 			setInterval(onProgress, 500);
 			onProgress();
 
-      torrent.on('done', () => {
+			torrent.on('done', () => 
+			{
 				onProgress();
 				clearInterval(onProgress);
 
 				this.setState({
-          files: torrent.files
+					files : torrent.files
 				});
 			});
 		});
@@ -76,7 +79,9 @@ class FileChatEntry extends Component
 						<div>
 							{this.state.files.map((file, i) => (
 								<div key={i}>
-                  <button onClick={() => saveFile(file)}>download {file.name}</button>
+									<button onClick={() => this.saveFile(file)}>
+										download {file.name}
+									</button>
 								</div>
 							))}
 						</div>
@@ -87,4 +92,11 @@ class FileChatEntry extends Component
 	}
 }
 
-export default FileChatEntry;
+const mapDispatchToProps = {
+	notify : notifyAction
+};
+
+export default connect(
+	undefined,
+	mapDispatchToProps
+)(FileChatEntry);

app/lib/components/Chat/FileSharing.jsx

@@ -1,32 +1,34 @@
 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;
+
 	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
+			magnet : torrent.magnetURI
 		});
 	});
 };
 
 dragDrop('body', shareFiles);
 
-class FileSharing extends Component {
+class FileSharing extends Component 
+{
 	constructor(props)
 	{
 		super(props);
@@ -43,7 +45,7 @@ class FileSharing extends Component {
 	render()
 	{
 		return (
-      <input type="file" onChange={this.handleFileChange} />
+			<input type='file' onChange={this.handleFileChange} />
 		);
 	}
 }

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