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,