moved sort state to redux, missing apply sort

3 files changed, 62 insertions, 47 deletions

diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js
index d621387c..642ded17 100644
--- a/web/src/js/components/flowtable.js
+++ b/web/src/js/components/flowtable.js
@@ -46,61 +46,59 @@ const FlowRowContainer = connect(
     })
 )(FlowRow)
 
-class FlowTableHead extends React.Component {
+function FlowTableHead({setSort, columns, sort}) {
+
+        //const hasSort = Column.sortKeyFun;
+
+        // let sortDesc = this.props.sort.sortDesc;
+        //
+        // if (Column === this.props.sort.sortColumn) {
+        //     sortDesc = !sortDesc;
+        //     this.props.setSort(sortColumn, sortDesc);
+        // } else {
+        //     this.props.setSort({sortColumn: hasSort && Column, sortDesc: false});
+        // }
+        //
+        // let sortKeyFun = Column.sortKeyFun;
+        // if (sortDesc) {
+        //     sortKeyFun = hasSort && function () {
+        //             const k = Column.sortKeyFun.apply(this, arguments);
+        //             if (_.isString(k)) {
+        //                 return reverseString("" + k);
+        //             }
+        //             return -k;
+        //         };
+        // }
+        //this.props.setSortKeyFun(sortKeyFun);
+
+        const sortColumn = sort.sortColumn;
+        const sortType = sort.sortDesc ? "sort-desc" : "sort-asc";
 
-    static propTypes = {
-        setSortKeyFun: React.PropTypes.func.isRequired,
-        columns: React.PropTypes.array.isRequired,
-    };
-
-    constructor(props, context) {
-        super(props, context);
-        this.state = {sortColumn: undefined, sortDesc: false};
-    }
-
-    onClick(Column) {
-        const hasSort = Column.sortKeyFun;
-
-        let sortDesc = this.state.sortDesc;
-
-        if (Column === this.state.sortColumn) {
-            sortDesc = !sortDesc;
-            this.setState({sortDesc});
-        } else {
-            this.setState({sortColumn: hasSort && Column, sortDesc: false});
-        }
-
-        let sortKeyFun = Column.sortKeyFun;
-        if (sortDesc) {
-            sortKeyFun = hasSort && function () {
-                    const k = Column.sortKeyFun.apply(this, arguments);
-                    if (_.isString(k)) {
-                        return reverseString("" + k);
-                    }
-                    return -k;
-                };
-        }
-
-        this.props.setSortKeyFun(sortKeyFun);
-    }
-
-    render() {
-        const sortColumn = this.state.sortColumn;
-        const sortType = this.state.sortDesc ? "sort-desc" : "sort-asc";
         return (
             <tr>
-                {this.props.columns.map(Column => (
+                {columns.map(Column => (
                     <Column.Title
                         key={Column.name}
-                        onClick={() => this.onClick(Column)}
-                        className={sortColumn === Column ? sortType : undefined}
+                        onClick={() => setSort({sortColumn: Column.name, sortDesc: Column.name != sort.sortColumn ? false : !sort.sortDesc})}
+                        className={sortColumn === Column.name ? sortType : undefined}
                     />
                 ))}
             </tr>
         );
-    }
 }
 
+FlowTableHead.propTypes = {
+        setSort: React.PropTypes.func.isRequired,
+        sort: React.PropTypes.object.isRequired,
+        columns: React.PropTypes.array.isRequired
+};
+
+const FlowTableHeadContainer = connect(
+    (state, ownProps) => ({
+        sort: state.flows.sort
+    })
+)(FlowTableHead)
+
 class FlowTable extends React.Component {
 
     static propTypes = {
@@ -186,9 +184,10 @@ class FlowTable extends React.Component {
             <div className="flow-table" onScroll={this.onViewportUpdate}>
                 <table>
                     <thead ref="head" style={{ transform }}>
-                    <FlowTableHead
+                    <FlowTableHeadContainer
                         columns={flowtable_columns}
                         setSortKeyFun={this.props.setSortKeyFun}
+                        setSort={this.props.setSort}
                     />
                     </thead>
                     <tbody>
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 22895991..99cdeb3c 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -7,7 +7,7 @@ import {Splitter} from "./common.js"
 import FlowTable from "./flowtable.js";
 import FlowView from "./flowview/index.js";
 import {connect} from 'react-redux'
-import {selectFlow, setFilter, setHighlight} from "../ducks/flows";
+import {selectFlow, setFilter, setHighlight, setSort} from "../ducks/flows";
 
 
 var MainView = React.createClass({
@@ -161,7 +161,8 @@ var MainView = React.createClass({
             <div className="main-view">
                 <FlowTable ref="flowTable"
                     selectFlow={this.selectFlow}
-                    setSortKeyFun={this.setSortKeyFun}
+                    setSortKeyFun={(f) => console.log("asdf")}
+                    setSort={this.props.setSort}
                     selected={this.props.selectedFlow} />
                 {details}
             </div>
@@ -173,12 +174,14 @@ const MainViewContainer = connect(
     state => ({
         flows: state.flows.view,
         filter: state.flows.filter,
+        sort: state.flows.sort,
         highlight: state.flows.highlight,
         selectedFlow: state.flows.all.byId[state.flows.selected[0]]
     }),
     dispatch => ({
         selectFlow: flowId => dispatch(selectFlow(flowId)),
         setFilter: filter => dispatch(setFilter(filter)),
+        setSort: (sort) => dispatch(setSort(sort)),
         setHighlight: highlight => dispatch(setHighlight(highlight))
     }),
     undefined,
diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js
index fdbc42ee..bde53179 100644
--- a/web/src/js/ducks/flows.js
+++ b/web/src/js/ducks/flows.js
@@ -5,6 +5,7 @@ import {updateViewFilter, updateViewList} from "./utils/view"
 export const UPDATE_FLOWS = "UPDATE_FLOWS"
 export const SET_FILTER = "SET_FLOW_FILTER"
 export const SET_HIGHLIGHT = "SET_FLOW_HIGHLIGHT"
+export const SET_SORT = "SET_FLOW_SORT"
 export const SELECT_FLOW = "SELECT_FLOW"
 
 const {
@@ -20,6 +21,7 @@ const defaultState = {
     view: [],
     filter: undefined,
     highlight: undefined,
+    sort: {sortColumn: undefined, sortDesc: false},
 }
 
 function makeFilterFn(filter) {
@@ -46,6 +48,11 @@ export default function reducer(state = defaultState, action) {
                 ...state,
                 highlight: action.highlight
             }
+        case SET_SORT:
+            return {
+                ...state,
+                sort: action.sort
+            }
         case SELECT_FLOW:
             return {
                 ...state,
@@ -69,6 +76,12 @@ export function setHighlight(highlight) {
         highlight
     }
 }
+export  function setSort(sort){
+    return {
+        type: SET_SORT,
+        sort
+    }
+}
 export function selectFlow(flowId) {
     return {
         type: SELECT_FLOW,