Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/src/BottomMenu/Tabs/fileTab.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Button from 'material-ui/Button';
+import Paper from 'material-ui/Paper';
 
 import { ProgressBarCell } from '../../CustomCells/progressBarCell';
 
 
 import {
-    SortingState, LocalSorting, VirtualTableLayout, SelectionState,
+    SortingState, IntegratedSorting, VirtualTableLayout, SelectionState,
 } from '@devexpress/dx-react-grid';
 
 import {
-    Grid, TableHeaderRow, PagingPanel, VirtualTableView, TableColumnResizing,
-    DragDropContext, TableColumnReordering, TableSelection,
+    Grid, TableHeaderRow, PagingPanel, VirtualTable, TableColumnResizing,
+    DragDropProvider, TableColumnReordering, TableSelection,
 } from '@devexpress/dx-react-grid-material-ui';
 
 
@@ -20,6 +21,7 @@ import * as actionTypes from '../../store/actions';
 
 
 
+
 class FileTab extends React.Component {
     
     constructor(props) {
@@ -34,7 +36,13 @@ class FileTab extends React.Component {
             ],
             sorting: [],
             columnOrder: ['FileName', 'FilePath', 'FileSize', 'FilePercent', 'FilePriority'],
-            columnWidths: {FileName: 450, FilePath: 650, FileSize: 100, FilePercent: 100, FilePriority: 75},
+            columnWidths: [
+                {columnName: 'FileName', width: 450},
+                {columnName: 'FilePath', width: 650},
+                {columnName: 'FileSize', width: 100},
+                {columnName: 'FilePercent', width: 100},
+                {columnName: 'FilePriority', width: 75},
+            ],
             fileSelection: [],
             selected: [],
  
@@ -45,6 +53,15 @@ class FileTab extends React.Component {
 
     }
 
+    progressBar = (props) => {
+        if(props.column.name == 'FilePercent'){
+            return (
+                <ProgressBarCell value={props.row.FilePercent * 100} style={props.style} />
+            );
+        }
+        return <VirtualTable.Cell {...props} />;
+    }
+
     changeSelection = (selection) => {
         console.log("Filelist is changing selection now", selection)
         this.setState({selected: selection})
@@ -66,7 +83,7 @@ class FileTab extends React.Component {
         })
         let setFilePriority = {
             MessageType: "setFilePriority",
-            Payload: {"TorrentHash": selectionHashes, "FilePriority": priority, "FilePaths": filePaths}
+            Payload: {"TorrentHash": selectionHash, "FilePriority": priority, "FilePaths": filePaths}
         }
 
         console.log(JSON.stringify(setFilePriority))
@@ -94,35 +111,30 @@ class FileTab extends React.Component {
             //Buttons here 
             <div>
                 Set File Priority: 
-                <Button raised color="primary" onClick={this.setHighPriority}>
+                <Button variant="raised" color="primary" onClick={this.setHighPriority}>
                     High
                 </Button>
-                <Button raised color="primary" onClick={this.setNormalPriority}>
+                <Button variant="raised" color="primary" onClick={this.setNormalPriority}>
                     Normal
                 </Button>
-                <Button raised color="accent" onClick={this.setCancelPriority}>
+                <Button variant="raised" color="secondary" onClick={this.setCancelPriority}>
                     Do Not Download
                 </Button>
-                <Grid rows={this.props.fileList} columns={this.state.columns}>
-                    <SortingState sorting={this.state.sorting} onSortingChange={this.changeSorting} />
-                    <LocalSorting />
-                    <DragDropContext />
-                    <SelectionState onSelectionChange={this.changeSelection} selection={this.state.selection}/>
-                
-                    <VirtualTableView height={300} tableCellTemplate={({ row, column, style }) => {
-                    if (column.name === 'FilePercent') {
-                        return (
-                            <ProgressBarCell value={row.FilePercent * 100} style={style} />
-                        );
-                        }
-                        return undefined;
-                    }}/>/>
-    
-                    <TableColumnResizing columnWidths={this.state.columnWidths} onColumnWidthsChange={this.changeColumnWidths}/>
-                    <TableColumnReordering order={this.state.columnOrder} onOrderChange={this.changeColumnOrder} />
-                    <TableSelection selectByRowClick highlightSelected />
-                    <TableHeaderRow allowSorting allowResizing allowDragging />
-                </Grid>
+                <Paper>
+                    <Grid rows={this.props.fileList} columns={this.state.columns}>
+                        <SortingState sorting={this.state.sorting} onSortingChange={this.changeSorting} />
+                        <IntegratedSorting />
+                        <DragDropProvider />
+                        <SelectionState onSelectionChange={this.changeSelection} selection={this.state.selection}/>
+                    
+                        <VirtualTable height={300} cellComponent={this.progressBar} />
+        
+                        <TableColumnResizing columnWidths={this.state.columnWidths} onColumnWidthsChange={this.changeColumnWidths}/>
+                        <TableColumnReordering order={this.state.columnOrder} onOrderChange={this.changeColumnOrder} />
+                        <TableSelection selectByRowClick highlightSelected />
+                        <TableHeaderRow allowSorting allowResizing allowDragging />
+                    </Grid>
+                </Paper>
             </div>
         );
     }
@@ -130,8 +142,6 @@ class FileTab extends React.Component {
 
 }
 
-
-
 const mapStateToProps = state => {
     return {
         selectionHashes: state.selectionHashes,

goTorrentWebUI/src/BottomMenu/Tabs/peerTab.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Paper from 'material-ui/Paper';
 
 import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
 
 import {
-    SortingState, LocalSorting, VirtualTableLayout, SelectionState,
+    SortingState, IntegratedSorting, VirtualTableLayout, SelectionState,
 } from '@devexpress/dx-react-grid';
 
 import {
-    Grid, TableView, TableHeaderRow, PagingPanel, VirtualTableView, TableColumnResizing,
-    DragDropContext, TableColumnReordering,
+    Grid, TableHeaderRow, VirtualTable, TableColumnResizing,
+    DragDropProvider, TableColumnReordering,
 } from '@devexpress/dx-react-grid-material-ui';
 
 
@@ -32,7 +33,13 @@ class PeerTab extends React.Component {
             ],
             sorting: [],
             columnOrder: ['PeerID', 'IP', 'Port', 'Source', 'SupportsEncryption'],
-            columnWidths: {PeerID: 250, IP: 150, Port: 100, Source: 150, SupportsEncryption: 150},
+            columnWidths: [
+                {columnName: 'PeerID', width: 250},
+                {columnName: 'IP', width: 150},
+                {columnName: 'Port', width: 100},
+                {columnName: 'Source', width: 150},
+                {columnName: 'SupportsEncryption', width: 150},
+            ]
         };
  
         this.changeColumnOrder = columnOrder => this.setState({columnOrder});
@@ -41,24 +48,24 @@ class PeerTab extends React.Component {
     }
 
     render() {
-        return (   
-            <Grid rows={this.props.peerList} columns={this.state.columns}>
-                <SortingState sorting={this.state.sorting} onSortingChange={this.changeSorting} />
-                <LocalSorting />
-                <DragDropContext />
-                <VirtualTableView height={350}/>
-                <TableColumnResizing columnWidths={this.state.columnWidths} onColumnWidthsChange={this.changeColumnWidths}/>
-                <TableColumnReordering order={this.state.columnOrder} onOrderChange={this.changeColumnOrder} />
-                <TableHeaderRow allowSorting allowResizing allowDragging />
-            </Grid>
+        return (
+            <Paper>   
+                <Grid rows={this.props.peerList} columns={this.state.columns}>
+                    <SortingState sorting={this.state.sorting} onSortingChange={this.changeSorting} />
+                    <IntegratedSorting />
+                    <DragDropProvider />
+                    <VirtualTable height={350}/>
+                    <TableColumnResizing columnWidths={this.state.columnWidths} onColumnWidthsChange={this.changeColumnWidths}/>
+                    <TableColumnReordering order={this.state.columnOrder} onOrderChange={this.changeColumnOrder} />
+                    <TableHeaderRow allowSorting allowResizing allowDragging />
+                </Grid>
+            </Paper>
         );
     }
 
 
 }
 
-
-
 const mapStateToProps = state => {
     return {
         selectionHashes: state.selectionHashes,

goTorrentWebUI/src/CustomCells/progressBarCell.js

@@ -10,9 +10,9 @@ const styles = theme => ({
     borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
   },
   progressBar: {
-    backgroundColor: theme.palette.primary[300],
+    backgroundColor: '#3e72c4',
     float: 'left',
-    height: theme.spacing.unit,
+    height: '100%',
     whiteSpace: 'nowrap',
   },
   progressText: {
@@ -37,7 +37,7 @@ export const ProgressBarCellBase = ({ value, classes, style }) => (
       className={classes.progressBar}
       style={{ width: `${value}%` }}
       title={`${value.toFixed(1)}%`}  
-    /><div className={classes.progressText}>{value}</div>
+    >{value}</div>
   </TableCell>
 );
 ProgressBarCellBase.propTypes = {

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

@@ -1,14 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Button from 'material-ui/Button';
+import Paper from 'material-ui/Paper';
 
 import {
-    SortingState, LocalSorting, VirtualTableLayout, SelectionState,
+    SortingState, IntegratedSorting, VirtualTableLayout, SelectionState,
 } from '@devexpress/dx-react-grid';
 
 import {
-    Grid, TableHeaderRow, PagingPanel, VirtualTableView, TableColumnResizing,
-    DragDropContext, TableColumnReordering, TableSelection,
+    Grid, TableHeaderRow, VirtualTable, TableColumnResizing,
+    DragDropProvider, TableColumnReordering, TableSelection,
 } from '@devexpress/dx-react-grid-material-ui';
 
 
@@ -31,14 +32,15 @@ class RSSTorrentList extends React.Component {
             ],
             sorting: [],
             columnOrder: ['TorrentName', 'TorrentLink', 'PublishDate'],
-            columnWidths: {TorrentName: 450, TorrentLink: 650, PublishDate: 200},
+            columnWidths: [
+                {columnName: 'TorrentName', width: 450},
+                {columnName: 'TorrentLink', width: 650},
+                {columnName: 'PublishDate', width: 200},
+            ],
             fileSelection: [],
-            selected: [],
- 
-            
+            selected: [],    
         };
 
-
         this.changeColumnOrder = columnOrder => this.setState({columnOrder});
         this.changeColumnWidths = columnWidths => this.setState({columnWidths});
         this.changeSorting = sorting => this.setState({sorting});
@@ -82,22 +84,24 @@ class RSSTorrentList extends React.Component {
         return (  
             //Buttons here 
             <div>
-                <Button raised color="primary" onClick={this.sendMagnetLinks}>
+                <Button variant="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>
+                    <Paper>
+                    <Grid rows={this.props.RSSTorrentList} columns={this.state.columns}>
+                        <SortingState sorting={this.state.sorting} onSortingChange={this.changeSorting} />
+                        <IntegratedSorting />
+                        <DragDropProvider />
+                        <SelectionState onSelectionChange={this.changeSelection} selection={this.state.selection}/>
+                    
+                        <VirtualTable 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>
+                    </Paper>
             </div>
         );
     }
@@ -106,7 +110,6 @@ class RSSTorrentList extends React.Component {
 }
 
 
-
 const mapStateToProps = state => {
     return {
         selectionHashes: state.selectionHashes,

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

@@ -59,7 +59,7 @@ const inlineStyle = {
           <ReactTooltip place="top" type="light" effect="float" />
           <RSSTorrentIcon />
         </IconButton>
-        <Dialog fullScreen open={this.props.RSSModalOpen} onRequestClose={this.handleRequestClose}>
+        <Dialog fullScreen open={this.props.RSSModalOpen} onClose={this.handleRequestClose} onEscapeKeyDown={this.handleRequestClose}>
         <DialogTitle>Manage RSS Feeds</DialogTitle>
           <RSSModalLayout />
         </Dialog>   

goTorrentWebUI/src/TopMenu/Modals/SettingsModal/SettingsModalContentTabs/apiSettingsTab.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { withStyles } from 'material-ui/styles';
+import Paper from 'material-ui/Paper';
+import Grid from 'material-ui/Grid';
+
+import {connect} from 'react-redux';
+
+
+const styles = theme => ({
+    root: {
+      flexGrow: 1,
+      marginTop: 0,
+    },
+    paper: {
+      padding: 16,
+      textAlign: 'left',
+      color: theme.palette.text.primary,
+    },
+    floatRight: {
+        float: 'right',
+    }
+});
+
+
+class APISettingsTab extends React.PureComponent {
+
+
+    requestNewKey = (keyName) => {
+
+    }
+
+
+    render() {
+        const { classes } = this.props;
+        return (
+            <div className={classes.root}>    
+            Not yet implemented!
+            </div>
+        );
+    }
+}
+
+
+const mapStateToProps = state => {
+    return {
+      settingsFile: state.settingsFile,
+    };
+  }
+
+export default withStyles(styles)(connect(mapStateToProps)(APISettingsTab))
+

goTorrentWebUI/src/TopMenu/Modals/SettingsModal/addSettingsModal.js

@@ -3,7 +3,7 @@ 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 PropTypes from 'prop-types';
 import List, {
     ListItem,
     ListItemIcon,
@@ -61,7 +61,7 @@ const inlineStyle = {
           <ReactTooltip place="top" type="light" effect="float" />
           <SettingsIcon />
         </IconButton>
-        <Dialog fullScreen open={this.props.settingsModalOpen} onRequestClose={this.handleRequestClose}>
+        <Dialog fullScreen open={this.props.settingsModalOpen} onClose={this.handleRequestClose} onEscapeKeyDown={this.handleRequestClose}>
         <DialogTitle>Manage Settings</DialogTitle>
         <SettingsModalLayout />
         </Dialog>   

goTorrentWebUI/src/TopMenu/Modals/SettingsModal/settingsModalContent.js

@@ -9,7 +9,7 @@ import ClientSettingsTab from './SettingsModalContentTabs/clientSettingsTab';
 import LoggingSettingsTab from './SettingsModalContentTabs/loggingSettingsTab';
 import NotesTab from './SettingsModalContentTabs/notesTab';
 import ServerSettingsTab from './SettingsModalContentTabs/serverSettingsTab';
-
+import APISettingsTab from './SettingsModalContentTabs/apiSettingsTab';
 
 
 
@@ -35,11 +35,11 @@ class SettingsModalContent extends React.Component {
                 return <LoggingSettingsTab />
             case 3:
                 return <ServerSettingsTab />
+            case 4:
+                return <APISettingsTab />
             default:
                 return <NotesTab />
-        }
-        
-       
+        } 
             
     }
 }

goTorrentWebUI/src/TopMenu/Modals/SettingsModal/settingsModalList.js

@@ -91,6 +91,9 @@ const inlineStyle = {
             <ListItem  className={this.state.activeIndex==3 ? classes.active: null} button onClick={() => this.changeMenuSelection(3)}>
                 <ListItemText primary="Server Settings" />
             </ListItem>
+            <ListItem  className={this.state.activeIndex==4 ? classes.active: null} button onClick={() => this.changeMenuSelection(4)}>
+                <ListItemText primary="API Settings" />
+            </ListItem>
         </List>
       </div>
     );

goTorrentWebUI/src/TopMenu/Modals/addTorrentFileModal.js

@@ -100,7 +100,7 @@ export default class addTorrentFilePopup extends React.Component {
         <ReactTooltip place="top" type="light" effect="float" />
         <AddIcon />
       </IconButton>
-        <Dialog open={this.state.open} onRequestClose={this.handleRequestClose} onEscapeKeyUp={this.handleRequestClose} maxWidth="md">
+        <Dialog open={this.state.open} onClose={this.handleRequestClose} onEscapeKeyDown={this.handleRequestClose} maxWidth="md">
           <DialogTitle>Add Torrent File</DialogTitle>
           <DialogContent>
             <DialogContentText>

goTorrentWebUI/src/TopMenu/Modals/addTorrentLinkModal.js

@@ -81,7 +81,7 @@ export default class addTorrentPopup extends React.Component {
         <ReactTooltip place="top" type="light" effect="float" />
         <InsertLinkIcon />
       </IconButton>
-        <Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
+        <Dialog open={this.state.open} onClose={this.handleRequestClose} onEscapeKeyDown={this.handleRequestClose}>
           <DialogTitle>Add Magnet Link</DialogTitle>
           <DialogContent>
             <DialogContentText>

goTorrentWebUI/src/TopMenu/Modals/changeStorageModal.js

@@ -70,7 +70,7 @@ class ChangeStorageModal extends React.Component {
         <ReactTooltip place="top" type="light" effect="float" />
         <StorageIcon />
       </IconButton>
-        <Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
+        <Dialog open={this.state.open} onClose={this.handleRequestClose} onEscapeKeyDown={this.handleRequestClose}>
           <DialogTitle>Change Storage Value</DialogTitle>
           <DialogContent>
             <DialogContentText>

goTorrentWebUI/src/TopMenu/Modals/deleteTorrentModal.js

@@ -91,7 +91,7 @@ class DeleteTorrentModal extends React.Component {
           <ReactTooltip place="top" type="error" effect="float" />
           <DeleteTorrentIcon />
         </IconButton>
-        <Dialog open={this.state.open} onRequestClose={this.handleRequestClose} onEscapeKeyUp={this.handleRequestClose} maxWidth="md">
+        <Dialog open={this.state.open} onClose={this.handleRequestClose} onEscapeKeyDown={this.handleRequestClose} maxWidth="md">
           <DialogTitle>Delete Torrent</DialogTitle>
           <DialogContent>
           Are you sure you want to delete Torrent?

goTorrentWebUI/src/TopMenu/topMenu.js

@@ -43,7 +43,6 @@ const styles = theme => ({
     display: 'none',
   },
   padding: {
-    paddingTop: '10px',
     paddingLeft: '10px',
   },
   verticalDivider: {
@@ -52,6 +51,7 @@ const styles = theme => ({
     height: '40px',
     position: 'absolute',
     display: 'inline-block',
+    marginTop: '10px',
     paddingRight: '30px',
     paddingLeft: '30px',
   },

goTorrentWebUI/src/store/reducer.js

@@ -22,6 +22,7 @@ const initialState = {
     webSocketState: false,
     searchFilterTerm: "",
     settingsFile: [],
+    settingsModalOpen: false,
 }
 
 
@@ -155,7 +156,7 @@ const reducer = (state = initialState, action) => {
             
                 if (buttonStateTest.length > 0 && buttonStateTest2.length === 0){
 
-                    let buttonStateFinal = [{startButton: "default", stopButton: "primary", deleteButton: "accent", fSeedButton: "default", fRecheckButton: "primary"}]
+                    let buttonStateFinal = [{startButton: "default", stopButton: "primary", deleteButton: "secondary", fSeedButton: "default", fRecheckButton: "primary"}]
                     return {
                         ...state,
                         buttonState: buttonStateFinal
@@ -163,7 +164,7 @@ const reducer = (state = initialState, action) => {
 
                 }
                 if (buttonStateTest.length === 0 && buttonStateTest2.length > 0){
-                    let buttonStateFinal = [{startButton: "primary", stopButton: "default", deleteButton: "accent", fSeedButton: "default", fRecheckButton: "primary"}]
+                    let buttonStateFinal = [{startButton: "primary", stopButton: "default", deleteButton: "secondary", fSeedButton: "default", fRecheckButton: "primary"}]
                     return {
                         ...state,
                         buttonState: buttonStateFinal
@@ -171,7 +172,7 @@ const reducer = (state = initialState, action) => {
 
                 }
                 if (buttonStateTest.length > 0 && buttonStateTest2.length > 0){
-                    let buttonStateFinal = [{startButton: "primary", stopButton: "primary", deleteButton: "accent", fSeedButton: "default", fRecheckButton: "primary"}]
+                    let buttonStateFinal = [{startButton: "primary", stopButton: "primary", deleteButton: "secondary", fSeedButton: "default", fRecheckButton: "primary"}]
                     return {
                         ...state,
                         buttonState: buttonStateFinal

goTorrentWebUI/src/torrentlist-test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styles from '../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
+import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
+import Paper from 'material-ui/Paper';
+
+import {
+    SortingState, LocalSorting, PagingState, VirtualTableLayout, SelectionState, FilteringState, LocalFiltering,
+} from '@devexpress/dx-react-grid';
+
+import {
+    Grid, TableHeaderRow, PagingPanel, VirtualTableView, VirtualTable, TableSelection, TableColumnResizing, Table,
+    DragDropContext, TableColumnReordering, 
+} from '@devexpress/dx-react-grid-material-ui';
+
+
+import { ProgressBarCell } from './CustomCells/progressBarCell';
+//react redux
+import {connect} from 'react-redux';
+import * as actionTypes from './store/actions';
+
+
+class TorrentListTable extends React.Component {
+    
+    render() {
+        return (
+            <Grid
+            rows={[
+            { id: 0, product: 'DevExtreme', owner: 'DevExpress' },
+            { id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
+            ]}
+            columns={[
+            { name: 'id', title: 'ID' },
+            { name: 'product', title: 'Product' },
+            { name: 'owner', title: 'Owner' },
+            ]}>
+            <Table />
+            <TableHeaderRow />
+        </Grid>
+    )}
+}
+
+export default TorrentListTable;

goTorrentWebUI/src/torrentlist.js

@@ -5,12 +5,12 @@ import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
 import Paper from 'material-ui/Paper';
 
 import {
-    SortingState, LocalSorting, PagingState, VirtualTableLayout, SelectionState, FilteringState, LocalFiltering,
+    SortingState, IntegratedSorting,  VirtualTableLayout, SelectionState, FilteringState, IntegratedFiltering,
 } from '@devexpress/dx-react-grid';
 
 import {
-    Grid, TableHeaderRow, PagingPanel, VirtualTableView, VirtualTable, TableSelection, TableColumnResizing,
-    DragDropContext, TableColumnReordering, 
+    Grid, TableHeaderRow, VirtualTable, TableSelection, TableColumnResizing,
+    DragDropProvider, TableColumnReordering,
 } from '@devexpress/dx-react-grid-material-ui';
 
 
@@ -20,28 +20,6 @@ import {connect} from 'react-redux';
 import * as actionTypes from './store/actions';
 
 
-/* var torrentLinkSubmit = document.getElementById('torrentLinkSubmit');
-var magnetLink = document.getElementById('magnetLink');
-var myTextArea = document.getElementById("loggerData");
-var torrentHash = document.getElementById("hash");
-initialize an empty torrents field before update.
- var torrentLinkSubmit = document.getElementById('torrentLinkSubmit');
-var magnetLink = document.getElementById('magnetLink');
-var myTextArea = document.getElementById("loggerData");
-var torrentHash = document.getElementById("hash");
-var torrentLinkSubmit = document.getElementById('torrentLinkSubmit');
-var torrentLinkModal = document.getElementById('addTorrentLinkModal');
-var btnTorrentLink = document.getElementById("addTorrentLink"); 
-*/
-
-
-
-function sendEvent(message)
-{
-    ws.send(message);
-    console.log('Sending message... ', message)
-}
-
 class TorrentListTable extends React.Component {
     
     constructor(props) {
@@ -62,7 +40,20 @@ class TorrentListTable extends React.Component {
                 { name: 'Availability', title: 'Availability'},
             ],
             columnOrder: ['TorrentName', 'DownloadedSize', 'Size', 'PercentDone', 'Status', 'DownloadSpeed', 'UploadSpeed','ActivePeers', 'ETA', 'Ratio', 'DateAdded', 'Availability'],
-            columnWidths: {TorrentName: 250, DownloadedSize: 100, Size: 100, PercentDone: 175, Status: 150, DownloadSpeed: 100, UploadSpeed: 100, ActivePeers: 100, ETA: 100, Ratio: 75, DateAdded: 100, Availability: 75},
+            columnWidths: [
+                {columnName: 'TorrentName', width: 250}, 
+                {columnName: 'DownloadedSize', width: 100}, 
+                {columnName: 'Size', width: 100}, 
+                {columnName: 'PercentDone', width: 175}, 
+                {columnName: 'Status', width: 150}, 
+                {columnName: 'DownloadSpeed', width: 100}, 
+                {columnName: 'UploadSpeed', width: 100}, 
+                {columnName: 'ActivePeers', width: 100},
+                {columnName: 'ETA', width: 100}, 
+                {columnName: 'Ratio', width: 75},
+                {columnName: 'DateAdded', width: 100}, 
+                {columnName: 'Availability', width: 75},
+            ],
             prevSelection: [], //just used to pull data from cell (temp Prevcell holder), real selection is in Redux
             pageSizes: [5, 10, 15, 0],
             currentPage: 0,
@@ -74,6 +65,14 @@ class TorrentListTable extends React.Component {
         this.changeCurrentPage = currentPage => this.setState({ currentPage });
     }
 
+    progressBar = (props) => {
+        if(props.column.name == 'PercentDone'){
+            return (
+                <ProgressBarCell value={props.row.PercentDone * 100} style={props.style} />
+            );
+        }
+        return <VirtualTable.Cell {...props} />;
+    }
 
 
     componentWillReceiveProps (nextProps){  //this is for setting the filter when the left menu activates a new filter
@@ -94,8 +93,6 @@ class TorrentListTable extends React.Component {
     }
 
 
-   
-
     changeSelection = (selection) => {
         //console.log("TOrrentlist is changing selection now", selection)
         this.props.changeSelection(selection) //dispatch selection to redux, also clear out anything tied to the old selection (peerlists, filelists, etc)
@@ -119,7 +116,6 @@ class TorrentListTable extends React.Component {
         
     }
 
-
     render() {
         return (
             <Paper>   
@@ -130,19 +126,12 @@ class TorrentListTable extends React.Component {
                     
                     <SelectionState onSelectionChange={this.changeSelection} selection={this.props.selection}/> 
 
-                    <LocalFiltering />
-                    <LocalSorting />
+                    <IntegratedFiltering />
+                    <IntegratedSorting />
 
-                    <VirtualTableView height={530} tableCellTemplate={({ row, column, style }) => {
-                    if (column.name === 'PercentDone') {
-                        return (
-                            <ProgressBarCell value={row.PercentDone * 100} style={style} />
-                        );
-                        }
-                        return undefined;
-                    }}/>
+                    <VirtualTable height={530} cellComponent={this.progressBar} />
 
-                    <DragDropContext />
+                    <DragDropProvider/>
                     <TableColumnResizing columnWidths={this.state.columnWidths} onColumnWidthsChange={this.changeColumnWidths}/>
                     <TableColumnReordering order={this.state.columnOrder} onOrderChange={this.changeColumnOrder} />
                     <TableSelection selectByRowClick highlightSelected />