Merge pull request #3457 from ethcore/ng-save-sorting

Save sort order in LocalStorage

js/src/ui/Actionbar/Sort/sort.js

@@ -15,6 +15,8 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { observer } from 'mobx-react';
+
 import IconMenu from 'material-ui/IconMenu';
 import MenuItem from 'material-ui/MenuItem';
 
@@ -22,11 +24,15 @@ import SortIcon from 'material-ui/svg-icons/content/sort';
 
 import { Button } from '../../';
 
+import SortStore from './sortStore';
 import styles from './sort.css';
 
+@observer
 export default class ActionbarSort extends Component {
   static propTypes = {
+    id: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
+
     order: PropTypes.string,
     showDefault: PropTypes.bool,
     metas: PropTypes.array
@@ -37,8 +43,10 @@ export default class ActionbarSort extends Component {
     showDefault: true
   }
 
-  state = {
+  store = new SortStore(this.props);
-    menuOpen: false
+
+  componentDidMount () {
+    this.store.restoreSavedOrder();
   }
 
   render () {
@@ -51,12 +59,12 @@ export default class ActionbarSort extends Component {
             className={ styles.sortButton }
             label=''
             icon={ <SortIcon /> }
-            onClick={ this.handleMenuOpen }
+            onClick={ this.store.handleMenuOpen }
             />
         }
-        open={ this.state.menuOpen }
+        open={ this.store.menuOpen }
-        onRequestChange={ this.handleMenuChange }
+        onRequestChange={ this.store.handleMenuChange }
-        onItemTouchTap={ this.handleSortChange }
+        onItemTouchTap={ this.store.handleSortChange }
         targetOrigin={ { horizontal: 'right', vertical: 'top' } }
         anchorOrigin={ { horizontal: 'right', vertical: 'top' } }
         touchTapCloseDelay={ 0 }
@@ -109,16 +117,4 @@ export default class ActionbarSort extends Component {
     );
   }
 
-  handleSortChange = (event, child) => {
-    const order = child.props.value;
-    this.props.onChange(order);
-  }
-
-  handleMenuOpen = () => {
-    this.setState({ menuOpen: true });
-  }
-
-  handleMenuChange = (open) => {
-    this.setState({ menuOpen: open });
-  }
 }

js/src/ui/Actionbar/Sort/sortStore.js

@@ -0,0 +1,71 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, observable } from 'mobx';
+import store from 'store';
+
+const LS_STORE_KEY = '_parity::sortStore';
+
+export default class SortStore {
+  @observable menuOpen = false;
+
+  constructor (props) {
+    const { id, onChange } = props;
+
+    this.onChange = onChange;
+    this.id = id;
+  }
+
+  @action handleMenuOpen = () => {
+    this.menuOpen = true;
+  }
+
+  @action handleMenuChange = (open) => {
+    this.menuOpen = open;
+  }
+
+  @action handleSortChange = (event, child) => {
+    const order = child.props.value;
+    this.onChange(order);
+    this.saveOrder(order);
+  }
+
+  @action restoreSavedOrder = () => {
+    const order = this.getSavedOrder();
+    this.onChange(order);
+  }
+
+  getSavedOrder = () => {
+    return (this.getSavedOrders())[this.id];
+  }
+
+  getSavedOrders = () => {
+    return store.get(LS_STORE_KEY) || {};
+  }
+
+  setSavedOrders = (orders) => {
+    store.set(LS_STORE_KEY, orders);
+  }
+
+  saveOrder = (order) => {
+    const orders = {
+      ...this.getSavedOrders(),
+      [ this.id ]: order
+    };
+
+    this.setSavedOrders(orders);
+  }
+}

js/src/views/Accounts/accounts.js

@@ -90,6 +90,7 @@ class Accounts extends Component {
     return (
       <ActionbarSort
         key='sortAccounts'
+        id='sortAccounts'
         order={ this.state.sortOrder }
         onChange={ onChange } />
     );

js/src/views/Addresses/addresses.js

@@ -75,6 +75,7 @@ class Addresses extends Component {
     return (
       <ActionbarSort
         key='sortAccounts'
+        id='sortAddresses'
         order={ this.state.sortOrder }
         onChange={ onChange } />
     );

js/src/views/Contracts/contracts.js

@@ -82,6 +82,7 @@ class Contracts extends Component {
     return (
       <ActionbarSort
         key='sortAccounts'
+        id='sortContracts'
         order={ this.state.sortOrder }
         metas={ [
           { key: 'timestamp', label: 'date' }