diff --git a/app/lib/components/Chat/FileChatEntry.jsx b/app/lib/components/Chat/FileChatEntry.jsx index 922a17e..d2d397d 100644 --- a/app/lib/components/Chat/FileChatEntry.jsx +++ b/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 = { - active: false, - numPeers: 0, - progress: 0, - files: null - }; + state = { + active : false, + numPeers : 0, + progress : 0, + files : null + }; - download = () => - { - this.setState({ - active: true - }); + saveFile = (file) => + { + file.getBlob((err, blob) => + { + if (err) + { + return this.props.notify({ + text : 'An error occurred while saving a file' + }); + } + + saveAs(blob, file.name); + }); + }; - client.add(this.props.message.file.magnet, (torrent) => - { - const onProgress = () => - { - this.setState({ - numPeers: torrent.numPeers, - progress: Math.round(torrent.progress * 100 * 100) / 100 - }); - }; + download = () => + { + this.setState({ + active : true + }); - setInterval(onProgress, 500); - onProgress(); + client.add(this.props.message.file.magnet, (torrent) => + { + const onProgress = () => + { + this.setState({ + numPeers : torrent.numPeers, + progress : Math.round(torrent.progress * 100 * 100) / 100 + }); + }; - torrent.on('done', () => { - onProgress(); - clearInterval(onProgress); + setInterval(onProgress, 500); + onProgress(); - this.setState({ - files: torrent.files - }); - }); - }); - } + torrent.on('done', () => + { + onProgress(); + clearInterval(onProgress); - render() - { - return ( - -
- + this.setState({ + files : torrent.files + }); + }); + }); + } - {this.state.active && ( -
- peers: {this.state.numPeers} - progress: {this.state.progress} -
- )} + render() + { + return ( + +
+ - {this.state.files && ( -
- {this.state.files.map((file, i) => ( -
- -
- ))} -
- )} -
-
- ); - } + {this.state.active && ( +
+ peers: {this.state.numPeers} + progress: {this.state.progress} +
+ )} + + {this.state.files && ( +
+ {this.state.files.map((file, i) => ( +
+ +
+ ))} +
+ )} +
+
+ ); + } } -export default FileChatEntry; \ No newline at end of file +const mapDispatchToProps = { + notify : notifyAction +}; + +export default connect( + undefined, + mapDispatchToProps +)(FileChatEntry); \ No newline at end of file diff --git a/app/lib/components/Chat/FileSharing.jsx b/app/lib/components/Chat/FileSharing.jsx index 51cc1a6..9beaf37 100644 --- a/app/lib/components/Chat/FileSharing.jsx +++ b/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; - store.dispatch(stateActions.addUserFile(file)); - store.dispatch(requestActions.sendChatFile(file, displayName, picture)); + 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 - }); - }); + client.seed(files, (torrent) => + { + notifyPeers({ + magnet : torrent.magnetURI + }); + }); }; dragDrop('body', shareFiles); -class FileSharing extends Component { - constructor(props) - { - super(props); - } +class FileSharing extends Component +{ + constructor(props) + { + super(props); + } - handleFileChange = (event) => - { - if (event.target.files.length > 0) - { - shareFiles(event.target.files); - } - }; + handleFileChange = (event) => + { + if (event.target.files.length > 0) + { + shareFiles(event.target.files); + } + }; - render() - { - return ( - - ); - } + render() + { + return ( + + ); + } } export default FileSharing; \ No newline at end of file diff --git a/app/lib/redux/reducers/helper.js b/app/lib/redux/reducers/helper.js index 2ca3709..eb7864e 100644 --- a/app/lib/redux/reducers/helper.js +++ b/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 diff --git a/app/lib/redux/requestActions.js b/app/lib/redux/requestActions.js index e748d6d..465ef35 100644 --- a/app/lib/redux/requestActions.js +++ b/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', - payload: { message } + type : 'SEND_CHAT_MESSAGE', + payload : { message } }; }; diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js index 5d4d87e..27314eb 100644 --- a/app/lib/redux/stateActions.js +++ b/app/lib/redux/stateActions.js @@ -413,8 +413,8 @@ export const addUserMessage = (text) => export const addUserFile = (file) => { return { - type: 'ADD_NEW_USER_FILE', - payload: { file } + type : 'ADD_NEW_USER_FILE', + payload : { file } }; };