working on making the file upload work over websocket and json

goTorrentWebUI/src/TopMenu/Modals/addTorrentFileModal.js

@@ -6,15 +6,17 @@ import { withStyles } from 'material-ui/styles';
 import PropTypes from 'prop-types';
 import Dialog, {
   DialogContent,
+  DialogContentText,
   DialogTitle,
+  DialogActions,
 } from 'material-ui/Dialog';
 //import InsertLinkIcon from 'material-ui-icons/Link';
 import ReactTooltip from 'react-tooltip'
 //import Icon from 'material-ui/Icon';
 import AddIcon from 'material-ui-icons/AddBox';
 import IconButton from 'material-ui/IconButton';
-//import Dropzone from 'react-dropzone'; //the File drop acceptor
-//const request = require('superagent');
+
+import Upload from 'material-ui-upload/Upload';
 
 const button = {
   fontSize: '60px',
@@ -22,16 +24,27 @@ const button = {
   paddingLeft: '20px',
 }
 
+const uploadButton = {
+  fontSize: '35px',
+  paddingLeft: '0px',
+}
+
 const inlineStyle = {
   display: 'inline-block',
 }
 
+const input = {
+  display: 'none',
+}
 
 
 export default class addTorrentFilePopup extends React.Component {
 
   state = {
     open: false,
+    torrentFileName: "",
+    torrentFileValue: new File([""], "tempName"),
+    storageValue: "",
   };
 
   handleClickOpen = () => {
@@ -42,8 +55,35 @@ export default class addTorrentFilePopup extends React.Component {
     this.setState({ open: false });
   };
 
-  setTextValue = (event) => {
-    this.setState({textValue: event.target.value});
+  handleSubmit = () => {
+    this.setState({ open: false });
+    //let magnetLinkSubmit = this.state.textValue;
+    this.setState({torrentFileValue: event.target.value});
+    const reader = new FileReader()
+    let torrentFileBlob = Blob(this.state.torrentFileValue)
+    let base64file = reader.readAsDataURL(torrentFileBlob)
+    
+    let torrentFileMessage = {
+      messageType: "torrentFileSubmit",
+      messageDetail: this.state.torrentFileName,
+      messageDetailTwo: this.state.storageValue,
+      Payload: [base64file],
+    }
+    console.log("Sending magnet link: ", torrentFileMessage);
+    ws.send(JSON.stringify(torrentFileMessage));
+  }
+
+  onFileLoad = (event, file) => {
+    this.setState({torrentFileName: file.name})
+    this.setState({torrentFileValue: File(file, file.name)})
+
+    console.log(event.target.result, file.name);
+  }
+  
+
+
+  setStorageValue = (event) => {
+    this.setState({storageValue: event.target.value})
   }
 
   render() {
@@ -57,11 +97,20 @@ export default class addTorrentFilePopup extends React.Component {
         <Dialog open={this.state.open} onRequestClose={this.handleRequestClose} onEscapeKeyUp={this.handleRequestClose} maxWidth="md">
           <DialogTitle>Add Torrent File</DialogTitle>
           <DialogContent>
-            <form  encType="multipart/form-data" method="post" action="/uploadTorrent">
-               <input  name="fileTest" type="file" /><p />
-               <input type="submit" value="submit" />
-            </form>
+            <DialogContentText>
+                Upload Torrent Here and Add Storage Path
+            </DialogContentText>
+            <Upload label="Upload Torrent" fileTypeRegex={/.torrent/} onFileLoad={this.onFileLoad}/>
+            <TextField id="storagePath" type="text" label="Storage Path" placeholder="Empty will be default torrent storage path" fullWidth onChange={this.setStorageValue} />
           </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleRequestClose} color="primary">
+              Cancel
+            </Button>
+            <Button onClick={this.handleSubmit} color="primary">
+              Submit
+            </Button>
+          </DialogActions>
         </Dialog>
       </div>
     );

goTorrentWebUI/src/TopMenu/Modals/addTorrentLinkModal.js

@@ -35,6 +35,9 @@ export default class addTorrentPopup extends React.Component {
 
   state = {
     open: false,
+    magnetLinkValue: "",
+    storageValue: "",
+
   };
 
   handleClickOpen = () => {
@@ -50,14 +53,19 @@ export default class addTorrentPopup extends React.Component {
       //let magnetLinkSubmit = this.state.textValue;
       let magnetLinkMessage = {
         messageType: "magnetLinkSubmit",
-        Payload: [this.state.textValue]
+        messageDetail: this.state.storageValue,
+        Payload: [this.state.magnetLinkValue]
       }
       console.log("Sending magnet link: ", magnetLinkMessage);
       ws.send(JSON.stringify(magnetLinkMessage));
   }
 
-  setTextValue = (event) => {
-    this.setState({textValue: event.target.value});
+  setMagnetLinkValue = (event) => {
+    this.setState({magnetLinkValue: event.target.value});
+  }
+
+  setStorageValue = (event) => {
+    this.setState({storageValue: event.target.value})
   }
 
   render() {
@@ -82,8 +90,9 @@ export default class addTorrentPopup extends React.Component {
               type="text"
               placeholder="Enter Magnet Link Here"
               fullWidth
-              onChange={this.setTextValue}
+              onChange={this.setMagnetLinkValue}
             />
+            <TextField id="storagePath" type="text" label="Storage Path" placeholder="Empty will be default torrent storage path" fullWidth onChange={this.setStorageValue} />
           </DialogContent>
           <DialogActions>
             <Button onClick={this.handleRequestClose} color="primary">

goTorrentWebUI/src/TopMenu/Modals/deleteTorrentModal.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Button from 'material-ui/Button';
+import TextField from 'material-ui/TextField';
+import { withStyles } from 'material-ui/styles';
+import PropTypes from 'prop-types';
+import Dialog, {
+  DialogContent,
+  DialogTitle,
+  DialogActions,
+} from 'material-ui/Dialog';
+//import InsertLinkIcon from 'material-ui-icons/Link';
+import ReactTooltip from 'react-tooltip'
+//import Icon from 'material-ui/Icon';
+import AddIcon from 'material-ui-icons/AddBox';
+import IconButton from 'material-ui/IconButton';
+import DeleteTorrentIcon from 'material-ui-icons/Delete';
+
+//Redux
+import {connect} from 'react-redux';
+import * as actionTypes from '../../store/actions';
+
+const button = {
+  fontSize: '60px',
+  paddingRight: '20px',
+  paddingLeft: '20px',
+}
+
+const inlineStyle = {
+  display: 'inline-block',
+}
+
+
+
+class DeleteTorrentModal extends React.Component {
+
+  state = {
+    open: false,
+  };
+
+  handleDeleteTorrent = () => {
+    let selection = []
+    let deleteTorrentHashes = {
+      MessageType: "deleteTorrents",
+      MessageDetail: "true",
+      Payload: this.props.selectionHashes
+    }
+    console.log("Deleting Torrents", deleteTorrentHashes)
+    ws.send(JSON.stringify(deleteTorrentHashes))
+    this.props.setButtonState(this.props.selection) //TODO this currently just forces a button refresh, should be a better way to do this
+    this.props.changeSelection(selection) //purging out our selection after deleting a torent
+    this.setState({ open: false });
+  }
+
+  handleDeleteData = () => {
+    let selection = []
+
+    let deleteTorrentHashes = {
+      MessageType: "deleteTorrents",
+      MessageDetail: "true",
+      Payload: this.props.selectionHashes,
+    }
+    console.log("Deleting Torrents and Data", deleteTorrentHashes)
+    ws.send(JSON.stringify(deleteTorrentHashes))
+    this.props.setButtonState(this.props.selection) //TODO this currently just forces a button refresh, should be a better way to do this
+    this.props.changeSelection(selection) //purging out our selection after deleting a torent
+    this.setState({ open: false });
+  }
+
+
+  handleClickOpen = () => {
+      if (this.props.selection.length > 0){
+        this.setState({ open: true });
+      } else {
+          console.log("Select a torrent to delete..")
+      }
+    
+  };
+
+  handleRequestClose = () => {
+    this.setState({ open: false });
+  };
+
+  setTextValue = (event) => {
+    this.setState({textValue: event.target.value});
+  }
+
+  render() {
+    const { onRequestClose, handleRequestClose, handleSubmit } = this.props;
+    return (
+      <div style={inlineStyle}>
+
+        <IconButton color={this.props.buttonState[0].deleteButton} data-tip="Delete Torrent" style={button} onClick={this.handleClickOpen} aria-label="Delete Torrent">
+          <ReactTooltip place="top" type="error" effect="float" />
+          <DeleteTorrentIcon />
+        </IconButton>
+        <Dialog open={this.state.open} onRequestClose={this.handleRequestClose} onEscapeKeyUp={this.handleRequestClose} maxWidth="md">
+          <DialogTitle>Delete Torrent</DialogTitle>
+          <DialogContent>
+          Are you sure you want to delete Torrent?
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleRequestClose} color="primary">
+              Cancel
+            </Button>
+            <Button onClick={this.handleDeleteData} color="primary">
+              Delete with Data
+            </Button>
+            <Button onClick={this.handleDeleteTorrent} color="primary">
+              Delete just Torrent
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+  
+};
+
+const mapStateToProps = state => {
+    return {
+      buttonState: state.buttonState,
+      selection: state.selection,
+      selectionHashes: state.selectionHashes,
+    };
+  }
+  
+  const mapDispatchToProps = dispatch => {
+    return {
+        setButtonState: (buttonState) => dispatch({type: actionTypes.SET_BUTTON_STATE, buttonState}),
+        changeSelection: (selection) => dispatch({type: actionTypes.CHANGE_SELECTION, selection}), //used to force a selection empty after deleting torrent
+    }
+  }
+  
+  
+  export default connect(mapStateToProps, mapDispatchToProps)(DeleteTorrentModal)