Added logging, changed some directory structure

goTorrentWebUI/src/TopMenu/Modals/RSSModal/RSSFeedList.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 List, {
+    ListItem,
+    ListItemIcon,
+    ListItemSecondaryAction,
+    ListItemText,
+  } from 'material-ui/List';
+import Dialog, {
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from 'material-ui/Dialog';
+import InsertLinkIcon from 'material-ui-icons/Link';
+import ReactTooltip from 'react-tooltip'
+import Icon from 'material-ui/Icon';
+import IconButton from 'material-ui/IconButton';
+import RSSTorrentIcon from 'material-ui-icons/RssFeed';
+import AddRSSIcon from 'material-ui-icons/AddCircle';
+import DeleteIcon 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 smallButton = {
+    width: '36px',
+    height: '36px',
+    padding: '5px',
+}
+
+const rssInput = {
+    width: '90%',
+    paddingRight: '10px',
+}
+
+const inlineStyle = {
+  display: 'inline-block',
+  backdrop: 'static',
+}
+
+ class RSSFeedList extends React.Component {
+  
+
+  state = {
+    testRSSFeeds: [],
+    showList: false,
+    selectedIndex: 0, 
+  };
+
+
+  showRSSFiles = (key) => {
+    let RSSTorrentsRequest = {
+      messageType: "rssTorrentsRequest",
+      Payload: [this.props.RSSList[key].RSSURL]
+    }
+    ws.send(JSON.stringify(RSSTorrentsRequest))
+
+    this.setState({selectedIndex: key}) //setting our selected index for styling
+    console.log("RSSFEED", key, "sending message", JSON.stringify(RSSTorrentsRequest))
+
+  }
+
+  getStyle = (index) => {
+    console.log("SettingStye", selectedIndex, index)
+    if (selectedIndex == index){
+      console.log("Returning activestyle")
+      style = "{{backgroundColor: '#80b3ff'}}"
+      return style
+    }
+    style = "{{backgroundColor: '#f44295'}}"
+    return style
+  }
+
+  deleteRSSFeed = (key) => {
+    let RSSURLDelete = {
+      messageType: "deleteRSSFeed",
+      Payload: [this.props.RSSList[key]]
+    }
+    console.log("Deleting THIS", this.props.RSSList[key])
+    //ws.send(JSON.stringify(RSSURLDelete));
+  }
+
+  render() {
+    //const { classes, onRequestClose, handleRequestClose, handleSubmit } = this.props;
+    if (this.props.RSSList.length > 0 && this.state.showList == false){
+      console.log("Setting list to show....")
+      this.setState({showList: true})
+    }
+
+    return (
+      <div style={inlineStyle}>
+        {this.state.showList == true && //if we have any rss torrent feeds then display them in list    }
+          <List dense>
+            {this.props.RSSList.map((RSSFeed, index) => { 
+              return (
+                <ListItem button={true} onClick={() => this.showRSSFiles(index)} key={index}>
+                  <ListItemText primary={RSSFeed.RSSName} />
+                  <ListItemSecondaryAction>
+                    <IconButton key={index} onClick={() => this.deleteRSSFeed(index)} aria-label="Delete">
+                      <DeleteIcon />
+                    </IconButton>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              )})}
+          </List> 
+        }
+      </div>
+    );
+  }
+
+};
+
+const mapStateToProps = state => {
+  return {
+    RSSList: state.RSSList,
+  };
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    rssModalOpenState: (RSSModalOpen) => dispatch({type: actionTypes.RSS_MODAL_OPEN_STATE, RSSModalOpen}), //sending modal state to backendwebsocket so we can update RSS lists
+  }
+}
+export default connect(mapStateToProps, mapDispatchToProps)(RSSFeedList)

goTorrentWebUI/src/TopMenu/Modals/RSSModal/RSSModalLayout.js

@@ -0,0 +1,187 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+//css for react grid
+import '../../../../node_modules/react-grid-layout/css/styles.css';
+import '../../../../node_modules/react-resizable/css/styles.css';
+//react-grid for layout
+import RGL, { WidthProvider } from 'react-grid-layout';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+//Redux
+import {connect} from 'react-redux';
+import * as actionTypes from '../../../store/actions';
+//interior items
+
+import TextField from 'material-ui/TextField';
+import { withStyles } from 'material-ui/styles';
+import Dialog, {
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from 'material-ui/Dialog';
+import ReactTooltip from 'react-tooltip'
+import Icon from 'material-ui/Icon';
+
+import RSSTorrentIcon from 'material-ui-icons/RssFeed';
+import AddRSSIcon from 'material-ui-icons/AddCircle';
+import RSSFeedList from './RSSFeedList';
+import RSSTorrentList from './RSSTorrentList';
+
+
+import IconButton from 'material-ui/IconButton';
+import Button from 'material-ui/Button';
+
+
+
+const ReactGridLayout = WidthProvider(RGL);
+
+const background = {
+  backgroundColor: '#e5e5e5',
+  boxShadow: '0 0 20px #000',
+}    
+
+
+const button = {
+  fontSize: '60px',
+  paddingRight: '20px',
+  paddingLeft: '20px',
+}
+
+const smallButton = {
+    width: '36px',
+    height: '36px',
+    padding: '5px',
+}
+
+const rssInput = {
+    width: '90%',
+    paddingRight: '10px',
+}
+
+const inlineStyle = {
+  display: 'inline-block',
+  backdrop: 'static',
+}
+
+
+ class RSSModalLayout extends React.Component {
+
+    static propTypes = {
+        onLayoutChange: PropTypes.func.isRequired
+      };
+    
+      static defaultProps = {
+        className: "layout",
+        items: 4,
+        rowHeight: 100,
+        onLayoutChange: function() {},
+        cols: 6,
+        draggableCancel: '.NoDrag',
+        draggableHandle: '.DragHandle'
+      };
+
+    constructor(props) {
+        super(props);
+
+        var layout =  [
+            {i: 'a', x: 0, y: 0, w: 6, h: 1, static: true},
+            {i: 'b', x: 0, y: 1, w: 1, h: 5, static: true},
+            {i: 'c', x: 1, y: 1, w: 5, h: 5, minW: 5, minH: 3, static: true},
+          ];
+        this.state = { layout };
+
+
+    };
+    onLayoutChange(layout) {
+        this.props.onLayoutChange(layout);
+    }
+
+    handleRSSModalClose = () => {
+        let closeState = false
+        this.props.rssModalOpenState(closeState)
+    }
+
+  handleAddRSSFeed = () => {
+    this.setState({ textValue: "Clear"}) //clearing out the text submitted
+    let RSSURLSubmit = {
+      messageType: "addRSSFeed",
+      Payload: [this.state.textValue]
+    }
+    ws.send(JSON.stringify(RSSURLSubmit));
+    let RSSRequest = {
+      messageType: "rssFeedRequest",
+    }
+    ws.send(JSON.stringify(RSSRequest)) //Immediatly request an update of the feed when you add a new URL
+  }
+
+  setTextValue = (event) => {
+    this.setState({ textValue: event.target.value });
+  }
+
+  componentWillReceiveProps (nextProps) {
+      console.log("nextprops", nextProps, "Modal", nextProps.RSSModalOpen)
+  }
+  componentWillMount () {
+      console.log("Mounting grid")
+  }
+  
+
+  render() {
+    return (
+            <div style={inlineStyle}>
+                <DialogContent>
+                <ReactGridLayout layout={this.state.layout} onLayoutChange={this.onLayoutChange}
+                    {...this.props}>
+                    <div key="a" sytle={background} className="DragHandle">
+                        <TextField
+                        style={rssInput}
+                        autoFocus
+                        margin="dense"
+                        id="name"
+                        label="Add New RSS URL"
+                        type="text"
+                        placeholder="Enter RSS URL Here.."
+                        onChange={this.setTextValue}
+                        />
+                    
+                        <IconButton onClick={this.handleAddRSSFeed} color="primary" data-tip="Add RSS Feed" style={smallButton} aria-label="Add RSS Feeds">
+                        <ReactTooltip place="top" type="light" effect="float" />
+                        <AddRSSIcon />
+                        </IconButton>
+                    </div>
+                    <div key="b" style={background} className="DragHandle">
+                        <RSSFeedList />
+                    </div>
+                    <div key="c" style={background} className="DragHandle">
+                        <RSSTorrentList />
+                    </div>
+                    </ReactGridLayout>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={this.handleRSSModalClose} color="primary">
+                    Close
+                    </Button>
+                </DialogActions>
+            </div>
+    );
+  }
+
+};
+
+//module.exports = RSSModalLayout;
+
+const mapStateToProps = state => {
+  return {
+    RSSList: state.RSSList,
+    RSSModalOpen: state.RSSModalOpen,
+  };
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+      rssModalOpenState: (RSSModalOpen) => dispatch({type: actionTypes.RSS_MODAL_OPEN_STATE, RSSModalOpen}),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(RSSModalLayout)

goTorrentWebUI/src/TopMenu/Modals/RSSModal/RSSTorrentList.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Button from 'material-ui/Button';
+
+import {
+    SortingState, LocalSorting, VirtualTableLayout, SelectionState,
+} from '@devexpress/dx-react-grid';
+
+import {
+    Grid, TableHeaderRow, PagingPanel, VirtualTableView, TableColumnResizing,
+    DragDropContext, TableColumnReordering, TableSelection,
+} from '@devexpress/dx-react-grid-material-ui';
+
+
+import {connect} from 'react-redux';
+import * as actionTypes from '../../../store/actions';
+
+const tableStyle = {
+    
+}
+
+class RSSTorrentList extends React.Component {
+    
+    constructor(props) {
+        super(props);
+        this.state = { //rows are stored in redux they are sent over from the server
+            columns: [
+                { name: 'TorrentName', title: 'Title'},
+                { name: 'TorrentLink', title: 'Magnet Link' },
+                { name: 'PublishDate', title: 'Date Published'},
+            ],
+            sorting: [],
+            columnOrder: ['TorrentName', 'TorrentLink', 'PublishDate'],
+            columnWidths: {TorrentName: 450, TorrentLink: 650, PublishDate: 200},
+            fileSelection: [],
+            selected: [],
+ 
+            
+        };
+
+
+        this.changeColumnOrder = columnOrder => this.setState({columnOrder});
+        this.changeColumnWidths = columnWidths => this.setState({columnWidths});
+        this.changeSorting = sorting => this.setState({sorting});
+
+    }
+
+    changeSelection = (selection) => {
+        console.log("TorrentList is changing selection now", selection)
+        this.setState({selected: selection})
+         if (selection.length > 0) { //if selection is empty buttons will be default and selectionHashes will be blanked out and pushed to redux
+            console.log("Getting the selected Rows")
+            const selectedRows = [] //array of all the selected Rows
+            selection.forEach(element => {   
+                selectedRows.push(this.props.RSSTorrentList[element])   //pushing the selected rows out of torrentlist
+            });
+           this.setState({fileSelection: selectedRows})
+        }
+       
+    }
+
+    sendMagnetLinks = () =>  {
+        let sendMagnetLinks = []
+        this.state.fileSelection.forEach(element => { //fileselection contains the currently selected rows
+            console.log("element", element)
+            sendMagnetLinks.push(element.TorrentLink)
+        })
+        let magnetLinkSubmit = {
+            MessageType: "magnetLinkSubmit",
+            Payload: sendMagnetLinks,    
+        }
+        console.log(JSON.stringify(magnetLinkSubmit))
+        ws.send(JSON.stringify(magnetLinkSubmit))
+    }
+
+    componentWillReceiveProps () {
+        console.log("New torrentlist", this.props.RSSTorrentList)
+    }
+
+
+    render() {
+        return (  
+            //Buttons here 
+            <div>
+                <Button raised color="primary" onClick={this.sendMagnetLinks}>
+                    Download Torrents
+                </Button>
+                <Grid rows={this.props.RSSTorrentList} columns={this.state.columns}>
+                    <SortingState sorting={this.state.sorting} onSortingChange={this.changeSorting} />
+                    <LocalSorting />
+                    <DragDropContext />
+                    <SelectionState onSelectionChange={this.changeSelection} selection={this.state.selection}/>
+                
+                    <VirtualTableView height={500} />
+    
+                    <TableColumnResizing columnWidths={this.state.columnWidths} onColumnWidthsChange={this.changeColumnWidths}/>
+                    <TableColumnReordering order={this.state.columnOrder} onOrderChange={this.changeColumnOrder} />
+                    <TableSelection selectByRowClick highlightSelected />
+                    <TableHeaderRow allowSorting allowResizing allowDragging />
+                </Grid>
+            </div>
+        );
+    }
+
+
+}
+
+
+
+const mapStateToProps = state => {
+    return {
+        selectionHashes: state.selectionHashes,
+        RSSTorrentList: state.RSSTorrentList,
+    };
+  }
+
+
+
+export default connect(mapStateToProps)(RSSTorrentList)

goTorrentWebUI/src/TopMenu/Modals/RSSModal/addRSSModal.js

@@ -0,0 +1,93 @@
+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 List, {
+    ListItem,
+    ListItemIcon,
+    ListItemSecondaryAction,
+    ListItemText,
+  } from 'material-ui/List';
+import Dialog, {
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from 'material-ui/Dialog';
+import InsertLinkIcon from 'material-ui-icons/Link';
+import ReactTooltip from 'react-tooltip'
+import Icon from 'material-ui/Icon';
+import IconButton from 'material-ui/IconButton';
+import RSSTorrentIcon from 'material-ui-icons/RssFeed';
+import AddRSSIcon from 'material-ui-icons/AddCircle';
+
+import RSSModalLayout from './RSSModalLayout'
+
+//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',
+  backdrop: 'static',
+}
+
+ class AddRSSModal extends React.Component {
+
+
+  componentDidMount () { //Immediatly request an update of the feed when loading app
+    let RSSRequest = {
+      messageType: "rssFeedRequest",
+    }
+    ws.send(JSON.stringify(RSSRequest)) 
+
+  }
+
+  rssModalOpenState = () => {
+    console.log("Opening RSS Modal")
+    this.props.rssModalOpenState(true)
+  }
+
+  render() {
+    const { classes, onRequestClose, handleRequestClose, handleSubmit } = this.props;
+    return (
+
+      <div style={inlineStyle}>
+        <IconButton onClick={this.rssModalOpenState} color="primary" data-tip="Add RSS URL" style={button} aria-label="RSS Feeds">
+          <ReactTooltip place="top" type="light" effect="float" />
+          <RSSTorrentIcon />
+        </IconButton>
+        <Dialog fullScreen open={this.props.RSSModalOpen} onRequestClose={this.handleRequestClose}>
+        <DialogTitle>Manage RSS Feeds</DialogTitle>
+          <RSSModalLayout />
+        </Dialog>   
+      </div>
+
+    );
+  }
+
+};
+
+
+const mapStateToProps = state => {
+  return {
+    RSSModalOpen: state.RSSModalOpen,
+  };
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+      rssModalOpenState: (RSSModalOpen) => dispatch({type: actionTypes.RSS_MODAL_OPEN_STATE, RSSModalOpen}),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddRSSModal)

goTorrentWebUI/src/TopMenu/Modals/addTorrentFileModal.js

@@ -0,0 +1,70 @@
+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,
+} 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');
+
+const button = {
+  fontSize: '60px',
+  paddingRight: '20px',
+  paddingLeft: '20px',
+}
+
+const inlineStyle = {
+  display: 'inline-block',
+}
+
+
+
+export default class addTorrentFilePopup extends React.Component {
+
+  state = {
+    open: false,
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleRequestClose = () => {
+    this.setState({ open: false });
+  };
+
+  setTextValue = (event) => {
+    this.setState({textValue: event.target.value});
+  }
+
+  render() {
+    const { classes, onRequestClose, handleRequestClose, handleSubmit } = this.props;
+    return (
+      <div style={inlineStyle}>
+        <IconButton onClick={this.handleClickOpen} color="primary" data-tip="Add Torrent File" style={button}  centerRipple aria-label="Add Torrent File" >
+        <ReactTooltip place="top" type="light" effect="float" />
+        <AddIcon />
+      </IconButton>
+        <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>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  }
+  
+};

goTorrentWebUI/src/TopMenu/Modals/addTorrentLinkModal.js

@@ -0,0 +1,101 @@
+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, {
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from 'material-ui/Dialog';
+import InsertLinkIcon from 'material-ui-icons/Link';
+import ReactTooltip from 'react-tooltip'
+import Icon from 'material-ui/Icon';
+import IconButton from 'material-ui/IconButton';
+
+
+
+
+const button = {
+  fontSize: '60px',
+  paddingRight: '20px',
+  paddingLeft: '20px',
+}
+
+const inlineStyle = {
+  display: 'inline-block',
+  backdrop: 'static',
+}
+
+export default class addTorrentPopup extends React.Component {
+
+
+
+  state = {
+    open: false,
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleRequestClose = () => {
+    this.setState({ open: false });
+  };
+
+  handleSubmit = () => {
+      this.setState({ open: false });
+      //let magnetLinkSubmit = this.state.textValue;
+      let magnetLinkMessage = {
+        messageType: "magnetLinkSubmit",
+        Payload: [this.state.textValue]
+      }
+      console.log("Sending magnet link: ", magnetLinkMessage);
+      ws.send(JSON.stringify(magnetLinkMessage));
+  }
+
+  setTextValue = (event) => {
+    this.setState({textValue: event.target.value});
+  }
+
+  render() {
+    const { classes, onRequestClose, handleRequestClose, handleSubmit } = this.props;
+    return (
+      <div style={inlineStyle}>
+        <IconButton onClick={this.handleClickOpen} color="primary" data-tip="Add Magnet Link" style={button}  centerRipple aria-label="Add Magnet Link" >
+        <ReactTooltip place="top" type="light" effect="float" />
+        <InsertLinkIcon />
+      </IconButton>
+        <Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
+          <DialogTitle>Add Magnet Link</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              Add a Magnet Link here and hit submit to add torrent...
+            </DialogContentText>
+            <TextField
+              autoFocus
+              margin="dense"
+              id="name"
+              label="Magnet Link"
+              type="text"
+              placeholder="Enter Magnet Link Here"
+              fullWidth
+              onChange={this.setTextValue}
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleRequestClose} color="primary">
+              Cancel
+            </Button>
+            <Button onClick={this.handleSubmit} color="primary">
+              Submit
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+  
+};