seperating react files, starting to fix top menu.

main.go

@@ -395,6 +395,14 @@ func main() {
 
 				startTorrent(clientTorrent, torrentLocalStorage, db, Config.DataDir, "magnet", "") //starting the torrent and creating local DB entry
 
+			} else if string(msg) == "torrentFileListRequest" { //client requested a filelist update
+				fmt.Println("client Requested Filelist update")
+				err = conn.WriteMessage(msgType, []byte("fileListUpdate"))
+				if err != nil {
+					fmt.Println("Websocket Write err", err)
+					return
+				}
+
 			} else {
 				conn.Close()
 				fmt.Println(string(msg))

torrent-project/src/BackendComm/backendWebsocket.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import {connect} from 'react-redux';
+import * as actionTypes from '../store/actions';
+
+import ReactTooltip from 'react-tooltip'
+
+import BackendIcon from 'material-ui-icons/InfoOutline';
+
+
+
+var title = document.title; //Set the number of active torrents in the title
+let torrents= []; 
+
+
+
+
+
+//websocket is started in kickwebsocket.js and is picked up here so "ws" is already defined
+ws.onmessage = function (evt) { //When we recieve a message from the websocket
+    if(evt.data == "clientUpdate") {
+        console.log("Client Update Incoming...")
+    } else {  // recieving data
+        console.log("Recieved Client Update...")
+        var clientUpdate = JSON.parse(evt.data);
+        if (clientUpdate.total) { // if it has a total field it is a torrentlist update
+            torrents = []; //clearing out the torrent array to make room for new (so that it does keep adding)
+            for(var i = 0; i < clientUpdate.total; i++){
+                torrents.push({
+                    TorrentHashString: clientUpdate.data[i].TorrentHash,
+                    TorrentName: clientUpdate.data[i].TorrentName,
+                    DownloadedSize: clientUpdate.data[i].DownloadedSize,
+                    Size: clientUpdate.data[i].Size,
+                    DownloadSpeed: clientUpdate.data[i].DownloadSpeed,
+                    UploadSpeed: clientUpdate.data[i].UploadSpeed,
+                    PercentDone: clientUpdate.data[i].PercentDone,
+                    StoragePath: clientUpdate.data[i].StoragePath,
+                    DateAdded: clientUpdate.data[i].DateAdded,
+                    Status: clientUpdate.data[i].Status,
+                    BytesCompleted: clientUpdate.data[i].BytesCompleted,
+                    ActivePeers: clientUpdate.data[i].ActivePeers,
+                    ETA: clientUpdate.data[i].ETA,
+                })
+                
+            }
+        
+            var newTitle = '(' + clientUpdate.total + ')' + title; //updating the title
+            document.title = newTitle;
+        }
+                                    
+    }
+}
+
+
+ws.onclose = function() {
+    console.log('Closing connection')
+};
+
+var divStyle = {
+    display: 'inline-block',
+    paddingTop: '10px',
+    paddingLeft: '10px',
+}
+
+var buttonStyle ={
+    fontSize: '60px',
+}
+
+class BackendSocket extends React.Component {
+    
+    
+    componentDidMount() {
+        this.timerID = setInterval(
+          () => this.tick(),
+          2000
+        );    
+ 
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.timerID);
+    } 
+
+    tick() {
+        ws.send("clientUpdateRequest")//talking to the server to get the torrent list
+        this.props.newTorrentList(torrents)
+        
+        //console.log("STATE:", this.state.torrentList)
+        //console.log("Torrents", torrents);
+        
+    }
+
+    render() {
+        return (
+            <div style={divStyle}>
+                <BackendIcon styles={buttonStyle} color="primary" data-tip="BackendStatus: Green=Good" aria-label="Settings" />
+            </div>
+
+
+
+        );
+
+    }
+
+}
+
+const mapStateToProps = state => {
+    return {
+    };
+  }
+
+
+
+
+const mapDispatchToProps = dispatch => {
+    return {
+        newTorrentList: (torrentList) => dispatch({type: actionTypes.TORRENT_LIST, torrentList }),
+    }
+}
+
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(BackendSocket);

torrent-project/src/BottomMenu/Tabs/generalTab.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+
+
+function GeneralTab(props) {
+    
+    return (
+        <div>
+            Here
+        </div>
+    );
+}
+
+
+
+
+
+export default GeneralTab

torrent-project/src/BottomMenu/bottomMenu.js

@@ -4,7 +4,7 @@ import 'typeface-roboto';  // contains the font for material UI
 import { withStyles } from 'material-ui/styles';
 import AppBar from 'material-ui/AppBar';
 import Tabs, { Tab } from 'material-ui/Tabs';
-import generalTab from './Tabs/generalTab';
+import GeneralTab from './Tabs/generalTab';
 
 function TabContainer(props) {
     return <div style={{ padding: 8 * 3 }}>{props.children}</div>;
@@ -51,7 +51,7 @@ function TabContainer(props) {
               </Tabs>
             </AppBar>
           </div>
-          {value === 0 && <TabContainer><generalTab /></TabContainer>}
+          {value === 0 && <TabContainer><GeneralTab /></TabContainer>}
           {value === 1 && <TabContainer>Peers</TabContainer>}
           {value === 2 && <TabContainer>Files</TabContainer>}
           {value === 3 && <TabContainer>Speed</TabContainer>}

torrent-project/src/CSS/topMenu.css

@@ -0,0 +1,9 @@
+.button {
+    font-size: '60px';
+ }
+
+ .padding {
+   display: inline-block;
+   padding-top: '10px';
+   padding-left: '10px';
+ }

torrent-project/src/store/actions.js

@@ -1,4 +1,6 @@
 export const SORTLIST = 'SORTLIST';
 export const CHANGE_SELECTION = 'CHANGE_SELECTION';
 export const CHANGE_FILTER = 'CHANGE_FILTER';
+export const TORRENT_LIST = 'TORRENT_LIST';
+export const SET_BUTTON_STATE = 'BUTTON_STATE';
 

torrent-project/src/store/reducer.js

@@ -3,11 +3,13 @@ import * as actionTypes from './actions';
 
 
 const initialState = {
-    buttonState: "default",
+    buttonStateDefault: [{startButton: "default", pauseButton: "default", stopButton: "default", deleteButton: "default", fSeedButton: "default", fRecheckButton: "default"}],
+    buttonState: [{startButton: "default", pauseButton: "default", stopButton: "default", deleteButton: "default", fSeedButton: "default", fRecheckButton: "default"}],
     sorting: [],
     selection: [],
     filter: ["Status", ""],
-    columnName: "Status"
+    columnName: "Status",
+    torrentList: [],
 }
 
 const reducer = (state = initialState, action) => {
@@ -28,7 +30,20 @@ const reducer = (state = initialState, action) => {
             return {
                 ...state,
                 filter: action.filter
-            }
+            };
+
+        case actionTypes.TORRENT_LIST:
+            return {
+                ...state,
+                torrentList: action.torrentList
+            };
+
+        case actionTypes.SET_BUTTON_STATE:
+            return {
+                ...state,
+                buttonState: action.buttonState
+            }; 
+
 
         default:
             return state;

torrent-project/src/topMenu.js

@@ -23,6 +23,9 @@ import DeleteIcon from 'material-ui-icons/Delete';
 import AddShoppingCartIcon from 'material-ui-icons/AddShoppingCart';
 //import PhotoCamera from 'material-ui-icons/PhotoCamera';
 
+import BackendSocket from './BackendComm/backendWebsocket';
+
+
 //Redux
 import {connect} from 'react-redux';
 import * as actionTypes from './store/actions'
@@ -64,41 +67,19 @@ const styles = theme => ({
 class IconButtons extends React.Component {
   constructor(props){
     super(props);
-    //let buttonState = "default"
     
-    console.log("selection", this.props.selection)
-    
-    switch("downloading"){
-      case "paused":
-        startTorrentState: "primary"
-        pauseTorrentState: "disabled"
-        stopTorrentState: "primary"
-        deleteTorrentState: "accent"
-
-      case "stopped":
-        startTorrentState: "primary"
-        pauseTorrentState: "disabled"
-        stopTorrentState: "primary"
-        deleteTorrentState: "accent"
-
-      case "downloading":
-        startTorrentState: "disabled"
-        pauseTorrentState: "primary"
-        stopTorrentState: "primary"
-        deleteTorrentState: "accent"
-
-      default:
-        startTorrentState: "disabled"
-        pauseTorrentState: "disabled"
-        stopTorrentState: "disabled"
-        deleteTorrentState: "disabled" 
-    }
   }
  
-/*   onGlobalSelectRow = (selectedRowProps) => {
+  buttonHandler = (buttonState) => {
-    console.log("Here...", selectedRowProps)
+    console.log("BUTTONSTATE", buttonState)
+  }
+
+  componentWillReceiveProps = (nextProps) => {  //if we get a new buttonstate force a button update
+    if (this.props.buttonState != nextProps.buttonState){
+      this.buttonHandler(nextProps.buttonState)
+    }
+    console.log("B1State", this.props.buttonState[0].startButton)
   }
- */
 
   render() {
     const { classes } = this.props;
@@ -107,19 +88,19 @@ class IconButtons extends React.Component {
         <AddTorrentFilePopup />
         <AddTorrentLinkPopup />
         <div className={classes.verticalDivider}></div>
-        <IconButton color={this.props.startTorrentState} data-tip={this.props.selection} className={classes.button} aria-label="Start Torrent">
+        <IconButton color={this.props.buttonState[0].startButton} data-tip="Start Torrent" className={classes.button} aria-label="Start Torrent" onClick={this.startTorrent}>
           <ReactTooltip place="top" type="light" effect="float" />
           <StartTorrentIcon />
         </IconButton>
-        <IconButton color={this.props.pauseTorrentState} data-tip="Pause Torrent" className={classes.button} aria-label="Pause Torrent">
+        <IconButton color={this.props.buttonState[0].pauseButton} data-tip="Pause Torrent" className={classes.button} aria-label="Pause Torrent">
           <ReactTooltip place="top" type="light" effect="float" />
           <PauseTorrentIcon />
         </IconButton>
-        <IconButton color={this.props.stopTorrentState} data-tip="Stop Torrent" className={classes.button} aria-label="Stop Torrent">
+        <IconButton color={this.props.buttonState[0].stopButton} data-tip="Stop Torrent" className={classes.button} aria-label="Stop Torrent">
           <ReactTooltip place="top" type="light" effect="float" />
           <StopTorrentIcon />
         </IconButton>
-        <IconButton color={this.props.deleteTorrentState} data-tip="Delete Torrent" className={classes.button} aria-label="Delete Torrent">
+        <IconButton color={this.props.buttonState[0].deleteButton} data-tip="Delete Torrent" className={classes.button} aria-label="Delete Torrent">
           <ReactTooltip place="top" type="error" effect="float" />
           <DeleteTorrentIcon />
         </IconButton>
@@ -132,6 +113,8 @@ class IconButtons extends React.Component {
           <ReactTooltip place="top" type="light" effect="float" />
           <SettingsIcon />
         </IconButton>
+        <div className={classes.verticalDivider}></div>
+        <BackendSocket />
       </div>
     );
   }
@@ -142,9 +125,9 @@ IconButtons.propTypes = {
 };
 
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return {
-    selection: state.selection
+    buttonState: state.buttonState,
   };
 }
 

torrent-project/src/torrentlist.js

@@ -32,53 +32,7 @@ var torrentLinkModal = document.getElementById('addTorrentLinkModal');
 var btnTorrentLink = document.getElementById("addTorrentLink"); 
 */
 
-var title = document.title; //Set the number of active torrents in the title
-let torrents= []; 
 
-//websocket is started in kickwebsocket.js and is picked up here so "ws" is already defined
-ws.onmessage = function (evt) //When we recieve a message from the websocket
-{
-  if(evt.data == "clientUpdate") {
-        console.log("Client Update Incoming...")
-    } else {
-            console.log("Recieved Client Update...")
-            var clientUpdate = JSON.parse(evt.data);
-            // myTextArea.innerHTML = myTextArea.innerHTML + "</br>" + "Client Update Event...";
-            //myTextArea.innerHTML = myTextArea.innerHTML + "</br>" + clientUpdate.LocalTorrentInfo.DateAdded;
-            // myTextArea.innerHTML = myTextArea.innerHTML + "</br>" + evt.data;
-            //myTextArea.innerHTML = myTextArea.innerHTML + "</br>" + clientUpdate[0].TorrentHashString;
-
-            // torrentHash.innerHTML = "Hash: " + clientUpdate.data[0].TorrentHashString;
-            torrents = []; //clearing out the torrent array to make room for new (so that it does keep adding)
-            for(var i = 0; i < clientUpdate.total; i++){
-                torrents.push({
-                    TorrentHashString: clientUpdate.data[i].TorrentHash,
-                    TorrentName: clientUpdate.data[i].TorrentName,
-                    DownloadedSize: clientUpdate.data[i].DownloadedSize,
-                    Size: clientUpdate.data[i].Size,
-                    DownloadSpeed: clientUpdate.data[i].DownloadSpeed,
-                    UploadSpeed: clientUpdate.data[i].UploadSpeed,
-                    PercentDone: clientUpdate.data[i].PercentDone,
-                    StoragePath: clientUpdate.data[i].StoragePath,
-                    DateAdded: clientUpdate.data[i].DateAdded,
-                    Status: clientUpdate.data[i].Status,
-                    BytesCompleted: clientUpdate.data[i].BytesCompleted,
-                    ActivePeers: clientUpdate.data[i].ActivePeers,
-                    ETA: clientUpdate.data[i].ETA,
-                })
-                
-            }
-
-            var newTitle = '(' + clientUpdate.total + ')' + title; //updating the title
-            document.title = newTitle;
-        }
-    }
-ws.onclose = function()
-{
-    //var myTextArea = document.getElementById("loggerData");
-    //myTextArea.innerHTML = myTextArea.innerHTML + "</br>" + "Connection closed";
-    console.log('Closing connection')
-};
 
 function sendEvent(message)
 {
@@ -90,9 +44,7 @@ class TorrentListTable extends React.Component {
     
     constructor(props) {
         super(props);
-        this.state = {
+        this.state = { //rows are stored in redux they are sent over from the server
-            columnName: "Status",
-            torrentList: torrents, 
             columns: [
                 { name: 'TorrentName', title: 'Torrent Name' },
                 { name: 'DownloadedSize', title: 'Dl Size'},
@@ -108,8 +60,8 @@ class TorrentListTable extends React.Component {
                 { name: 'TorrentHashString', title: 'Torrent Hash' }
             ],
             columnOrder: ['TorrentName', 'DownloadedSize', 'Size', 'PercentDone', 'Status', 'DownloadSpeed', 'UploadSpeed','ActivePeers', 'ETA', 'Ratio', 'Availability', 'TorrentHashString'],
-            columnWidths: {TorrentName: 250, DownloadedSize: 100, Size: 100, PercentDone: 175, Status: 150, DownloadSpeed: 100, UploadSpeed: 100, ActivePeers: 100, ETA: 100, Ratio: 75, Availability: 75, TorrentHashString: 250,}
+            columnWidths: {TorrentName: 250, DownloadedSize: 100, Size: 100, PercentDone: 175, Status: 150, DownloadSpeed: 100, UploadSpeed: 100, ActivePeers: 100, ETA: 100, Ratio: 75, Availability: 75, TorrentHashString: 250,},
-
+            prevSelection: [], //just used to pull data from cell (temp Prevcell holder), real selection is in Redux
         };
  
         this.changeColumnOrder = columnOrder => this.setState({columnOrder});
@@ -118,75 +70,46 @@ class TorrentListTable extends React.Component {
 
 
 
-    componentDidMount() {
+    componentWillReceiveProps (nextProps){  //this is for setting the filter when the left menu activates a new filter
-        this.timerID = setInterval(
-          () => this.tick(),
-          2000
-        );    
- 
-    }
-
-    componentWillUnmount() {
-
-    clearInterval(this.timerID);
-    } 
-
-    componentWillReceiveProps (nextProps){
         if (this.props.filter != nextProps.filter){
             this.filterHandler(nextProps.filter)
         }
     }
 
-    tick() {
-        ws.send("clientUpdateRequest")//talking to the server to get the torrent list
-        this.setState({torrentList: torrents});
-        //console.log("STATE:", this.state.torrentList)
-        //console.log("Torrents", torrents);
 
+    determineButtonState = (selectedRows) => {
+        selectedRows.forEach(element => {
+            if (element.Status === "Downloading" || "Awaiting Peers" || "Seeding") {
+                let buttonState = [{startButton: "default", pauseButton: "primary", stopButton: "primary", deleteButton: "accent", fSeedButton: "default", fRecheckButton: "primary"}]
+                this.props.setButtonState(buttonState)
+            } else if (element.Status === "Completed")  {
+                let buttonState = [{startButton: "default", pauseButton: "default", stopButton: "default", deleteButton: "accent", fSeedButton: "primary", fRecheckButton: "primary"}]
+                this.props.setButtonState(buttonState)
+            } else {
+                this.props.setButtonState(this.props.buttonStateDefault)
+            }
+        });
     }
 
-    createSelectionold = (selection) => {
+    changeSelection = (selection) => {
-        for (i = 0; i < selection.length; i++){
+        this.props.changeSelection(selection) //dispatch selection to redux
-            buttonState = selection[i]
-        }
 
+        if (selection.length === 0) { //if selection is empty buttons will be default
+            console.log("No Selection")
+            this.props.setButtonState(this.props.buttonStateDefault) //if no selection dispatch that to redux
+        } else { // if we have selection continue on with logic to determine button state
         
+            const selectedRows = [] //array of all the selected Rows
 
-        switch("downloading"){
+            selection.forEach(element => {   
-        case "paused":
+                selectedRows.push(this.props.torrentList[element])   //pushing the selected rows out of torrentlist
-            startTorrentState: "primary"
+            });
-            pauseTorrentState: "disabled"
+            this.determineButtonState(selectedRows) //running a filter on the rows to determing buttonState
-            stopTorrentState: "primary"
-            deleteTorrentState: "accent"
-    
-        case "stopped":
-            startTorrentState: "primary"
-            pauseTorrentState: "disabled"
-            stopTorrentState: "primary"
-            deleteTorrentState: "accent"
-    
-        case "downloading":
-            startTorrentState: "disabled"
-            pauseTorrentState: "primary"
-            stopTorrentState: "primary"
-            deleteTorrentState: "accent"
-    
-        default:
-            startTorrentState: "disabled"
-            pauseTorrentState: "disabled"
-            stopTorrentState: "disabled"
-            deleteTorrentState: "disabled" 
         } 
        
     }
 
-    selectionHandler = (selection) => {
+    filterHandler = (filter) => { //TODO, figure out how to do multiple filter
-        console.log("Selection", selection) //prints out row number
-        this.props.changeSelection(selection) //dispatch to redux
-       
-    }
-
-    filterHandler = (filter) => {
         console.log("Changing FIlter", filter)
         console.log("Filter Value", filter[0].value)
         if (filter[0].value === 'Active') {
@@ -197,26 +120,15 @@ class TorrentListTable extends React.Component {
         }
     }
 
-    getCellValueFunc = (selection) => {
-        //console.log("Selection", selection)
-        console.log(selection["Status"])
-        if (selection[0] != undefined) {
-            console.log("Row", selection[0])
-            console.log("Column", "Status")
-            console.log("Data", selection[0]["Status"])
-        }
-
-    }
-
 
     render() {
         return (   
-            <Grid rows={this.state.torrentList} columns={this.state.columns}>
+            <Grid rows={this.props.torrentList} columns={this.state.columns}>
                 <SortingState sorting={this.props.sorting} onSortingChange={this.props.changeSorting} />
                 <LocalSorting />
                 <FilteringState filters={this.props.filter} />
                 <LocalFiltering />
-                <SelectionState onSelectionChange={this.props.changeSelection} selection={this.props.selection}/> 
+                <SelectionState onSelectionChange={this.changeSelection} selection={this.props.selection}/> 
                 <TableView  tableCellTemplate={({ row, column, style }) => {
                     if (column.name === 'PercentDone') {
                     return (
@@ -237,17 +149,18 @@ class TorrentListTable extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        filter: state.filter
+        filter: state.filter,
+        torrentList: state.torrentList,
+        buttonState: state.buttonState,
+        buttonStateDefault: state.buttonStateDefault, //all default
     };
   }
 
-
-
-
 const mapDispatchToProps = dispatch => {
     return {
         changeSorting: (sorting) => dispatch({type: actionTypes.SORTLIST, sorting }),
         changeSelection: (selection) => dispatch({type: actionTypes.CHANGE_SELECTION, selection}),
+        setButtonState: (buttonState) => dispatch({type: actionTypes.SET_BUTTON_STATE, buttonState})
     }
 }