Introduce uiSettings DB

client/source/scripts/actions/TorrentActions.js

@@ -5,6 +5,12 @@ import ActionTypes from '../constants/ActionTypes';
 
 const TorrentActions = {
   addTorrents: function(urls, destination) {
+    axios.post('/ui/torrent-location', {
+        destination
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
     return axios.post('/client/add', {
         urls,
         destination
@@ -30,6 +36,25 @@ const TorrentActions = {
       });
   },
 
+  fetchLatestTorrentLocation: function () {
+    return axios.get('/ui/torrent-location')
+      .then((json = {}) => {
+        return json.data;
+      })
+      .then((data) => {
+        AppDispatcher.dispatchServerAction({
+          type: ActionTypes.UI_LATEST_TORRENT_LOCATION_REQUEST_SUCCESS,
+          data
+        });
+      })
+      .catch((error) => {
+        AppDispatcher.dispatchServerAction({
+          type: ActionTypes.UI_LATEST_TORRENT_LOCATION_REQUEST_ERROR,
+          error
+        });
+      });
+  },
+
   fetchTorrents: function () {
     return axios.get('/client/list')
       .then((json = {}) => {

client/source/scripts/actions/UIActions.js

@@ -1,3 +1,5 @@
+import axios from 'axios';
+
 import AppDispatcher from '../dispatcher/AppDispatcher';
 import ActionTypes from '../constants/ActionTypes';
 
@@ -16,6 +18,25 @@ const UIActions = {
     });
   },
 
+  fetchSortProps: function() {
+    return axios.get('/ui/sort-props')
+      .then((json = {}) => {
+        return json.data;
+      })
+      .then((data) => {
+        AppDispatcher.dispatchServerAction({
+          type: ActionTypes.UI_SORT_PROPS_REQUEST_SUCCESS,
+          data
+        });
+      })
+      .catch((error) => {
+        AppDispatcher.dispatchServerAction({
+          type: ActionTypes.UI_SORT_PROPS_REQUEST_ERROR,
+          error
+        });
+      });
+  },
+
   handleDetailsClick: function(data) {
     AppDispatcher.dispatchUIAction({
       type: ActionTypes.UI_CLICK_TORRENT_DETAILS,
@@ -45,6 +66,12 @@ const UIActions = {
   },
 
   setTorrentsSort: function(data) {
+    axios
+      .post('/ui/sort-props', data)
+      .catch(function (error) {
+        console.log(error);
+      });
+
     AppDispatcher.dispatchUIAction({
       type: ActionTypes.UI_SET_TORRENT_SORT,
       data

client/source/scripts/app.js

@@ -7,8 +7,13 @@ import Modals from './components/modals/Modals';
 import Sidebar from './components/panels/Sidebar';
 import TorrentListView from './components/panels/TorrentListView';
 import TorrentDetailsView from './components/panels/TorrentDetailsView';
+import TorrentActions from './actions/TorrentActions';
 
 class FloodApp extends React.Component {
+  componentDidMount() {
+    TorrentActions.fetchLatestTorrentLocation();
+  }
+
   render() {
     return (
       <Application>

client/source/scripts/components/modals/AddTorrents.js

@@ -2,8 +2,10 @@ import _ from 'lodash';
 import classnames from 'classnames';
 import React from 'react';
 
+import EventTypes from '../../constants/EventTypes';
 import TextboxRepeater from '../forms/TextboxRepeater';
 import TorrentActions from '../../actions/TorrentActions';
+import UIStore from '../../stores/UIStore';
 
 const METHODS_TO_BIND = [
   'getContent',
@@ -11,7 +13,8 @@ const METHODS_TO_BIND = [
   'handleUrlAdd',
   'handleUrlChange',
   'handleUrlRemove',
-  'handleAddTorrents'
+  'handleAddTorrents',
+  'onLatestTorrentLocationChange'
 ];
 
 export default class AddTorrents extends React.Component {
@@ -29,6 +32,23 @@ export default class AddTorrents extends React.Component {
     });
   }
 
+  componentWillMount() {
+    this.setState({destination: UIStore.getLatestTorrentLocation()});
+  }
+
+  componentDidMount() {
+    UIStore.listen(EventTypes.UI_LATEST_TORRENT_LOCATION_CHANGE, this.onLatestTorrentLocationChange);
+  }
+
+  componentWillUnmount() {
+    UIStore.unlisten(EventTypes.UI_LATEST_TORRENT_LOCATION_CHANGE, this.onLatestTorrentLocationChange);
+    UIStore.fetchLatestTorrentLocation();
+  }
+
+  onLatestTorrentLocationChange() {
+    this.setState({destination: UIStore.getLatestTorrentLocation()});
+  }
+
   getContent() {
     return (
       <div className="modal__content" onClick={this.handleMenuWrapperClick}>

client/source/scripts/components/sidebar/SpeedLimitDropdown.js

@@ -1,12 +1,12 @@
 import React from 'react';
 
 import ClientActions from '../../actions/ClientActions';
-import ClientDataStore from '../../stores/ClientDataStore';
 import Dropdown from '../forms/Dropdown';
 import EventTypes from '../../constants/EventTypes';
 import format from '../../util/formatData';
 import Limits from '../icons/Limits';
 import SidebarItem from '../sidebar/SidebarItem';
+import TransferDataStore from '../../stores/TransferDataStore';
 
 const METHODS_TO_BIND = ['onTransferDataRequestSuccess'];
 const SPEEDS = [1024, 10240, 102400, 512000, 1048576, 2097152, 5242880, 10485760, 0];
@@ -25,15 +25,15 @@ class Sidebar extends React.Component {
   }
 
   componentDidMount() {
-    ClientDataStore.listen(
+    TransferDataStore.listen(
       EventTypes.CLIENT_TRANSFER_DATA_REQUEST_SUCCESS,
       this.onTransferDataRequestSuccess
     );
-    ClientDataStore.fetchTransferData();
+    TransferDataStore.fetchTransferData();
   }
 
   componentWillUnmount() {
-    ClientDataStore.unlisten(
+    TransferDataStore.unlisten(
       EventTypes.CLIENT_TRANSFER_DATA_REQUEST_SUCCESS,
       this.onTransferDataRequestSuccess
     );
@@ -41,7 +41,7 @@ class Sidebar extends React.Component {
 
   onTransferDataRequestSuccess() {
     this.setState({
-      throttle: ClientDataStore.getThrottles({latest: true})
+      throttle: TransferDataStore.getThrottles({latest: true})
     });
   }
 

client/source/scripts/components/sidebar/TransferData.js

@@ -1,16 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import ClientDataStore from '../../stores/ClientDataStore';
 import Download from '../icons/Download';
 import EventTypes from '../../constants/EventTypes';
 import format from '../../util/formatData';
 import LineChart from '../ui/LineChart';
+import LoadingIndicator from '../ui/LoadingIndicator';
+import TransferDataStore from '../../stores/TransferDataStore';
 import Upload from '../icons/Upload';
 
 const METHODS_TO_BIND = [
   'onTransferDataRequestError',
-  'onTransferDataRequestSuccess'
+  'onTransferDataRequestSuccess',
+  'onTransferHistoryRequestSuccess'
 ];
 
 class ClientStats extends React.Component {
@@ -19,6 +21,7 @@ class ClientStats extends React.Component {
 
     this.state = {
       sidebarWidth: 0,
+      transferHistoryRequestSuccess: false,
       transferDataRequestError: false,
       transferDataRequestSuccess: false
     };
@@ -32,20 +35,25 @@ class ClientStats extends React.Component {
     this.setState({
       sidebarWidth: ReactDOM.findDOMNode(this).offsetWidth
     });
-    ClientDataStore.listen(
-      EventTypes.CLIENT_TRANSFER_DATA_REQUEST_SUCCESS,
-      this.onTransferDataRequestSuccess
-    );
-    ClientDataStore.fetchTransferData();
+    TransferDataStore.listen(EventTypes.CLIENT_TRANSFER_DATA_REQUEST_SUCCESS,
+      this.onTransferDataRequestSuccess);
+    TransferDataStore.listen(EventTypes.CLIENT_TRANSFER_HISTORY_REQUEST_SUCCESS,
+      this.onTransferHistoryRequestSuccess);
+    TransferDataStore.fetchTransferData();
   }
 
   componentWillUnmount() {
-    ClientDataStore.unlisten(
+    TransferDataStore.unlisten(
       EventTypes.CLIENT_TRANSFER_DATA_REQUEST_SUCCESS,
       this.onTransferDataRequestSuccess
     );
   }
 
+  isLoading() {
+    return !this.state.transferHistoryRequestSuccess ||
+      !this.state.transferDataRequestSuccess;
+  }
+
   onTransferDataRequestError() {
     this.setState({
       transferDataRequestError: true,
@@ -60,17 +68,25 @@ class ClientStats extends React.Component {
     });
   }
 
+  onTransferHistoryRequestSuccess() {
+    if (!this.state.transferHistoryRequestSuccess) {
+      this.setState({
+        transferHistoryRequestSuccess: true
+      });
+    }
+  }
+
   render() {
     if (this.state.transferDataRequestError) {
       return <div>Error</div>;
-    } else if (!this.state.transferDataRequestSuccess) {
-      return <div>Loading</div>;
+    } else if (this.isLoading()) {
+      return <LoadingIndicator />;
     }
 
-    let throttles = ClientDataStore.getThrottles();
-    let transferRate = ClientDataStore.getTransferRate();
-    let transferRates = ClientDataStore.getTransferRates();
-    let transferTotals = ClientDataStore.getTransferTotals();
+    let throttles = TransferDataStore.getThrottles();
+    let transferRate = TransferDataStore.getTransferRate();
+    let transferRates = TransferDataStore.getTransferRates();
+    let transferTotals = TransferDataStore.getTransferTotals();
 
     let downloadRate = format.data(transferRate.download, '/s');
     let downloadTotal = format.data(transferTotals.download);

client/source/scripts/components/torrent-list/ActionBar.js

@@ -34,6 +34,7 @@ export default class ActionBar extends React.Component {
   }
 
   componentDidMount() {
+    TorrentFilterStore.fetchSortProps();
     TorrentFilterStore.listen(EventTypes.UI_TORRENTS_SORT_CHANGE, this.onSortChange);
   }
 

client/source/scripts/components/ui/LineChart.js

@@ -41,16 +41,18 @@ export default class LineChart extends React.Component {
         })
       ]);
 
-    let lineFunc = d3
-      .svg
-      .line()
-      .x(function(dataPoint, index) {
-        return xRange(index);
-      })
-      .y(function(dataPoint) {
-        return yRange(dataPoint);
-      })
-      .interpolate('basis');
+    let lineFunc = function (interpolation) {
+      return d3
+        .svg
+        .line()
+        .x(function(dataPoint, index) {
+          return xRange(index);
+        })
+        .y(function(dataPoint) {
+          return yRange(dataPoint);
+        })
+        .interpolate(interpolation);
+    }
 
     let areaFunc = d3
       .svg
@@ -64,8 +66,8 @@ export default class LineChart extends React.Component {
       })
       .interpolate('basis');
 
-    let transferDataLinePoints = lineFunc(transferData);
-    let transferLimitLinePoints = lineFunc(transferLimit);
+    let transferDataLinePoints = lineFunc('basis')(transferData);
+    let transferLimitLinePoints = lineFunc('step-after')(transferLimit);
     let transferDataAreaPoints = areaFunc(transferData);
 
     graph

client/source/scripts/constants/ActionTypes.js

@@ -18,9 +18,13 @@ const ActionTypes = {
   UI_CLICK_TORRENT: 'UI_CLICK_TORRENT',
   UI_CLICK_TORRENT_DETAILS: 'UI_CLICK_TORRENT_DETAILS',
   UI_DISPLAY_MODAL: 'UI_DISPLAY_MODAL',
+  UI_LATEST_TORRENT_LOCATION_REQUEST_ERROR: 'UI_LATEST_TORRENT_LOCATION_REQUEST_ERROR',
+  UI_LATEST_TORRENT_LOCATION_REQUEST_SUCCESS: 'UI_LATEST_TORRENT_LOCATION_REQUEST_SUCCESS',
   UI_SET_TORRENT_SEARCH_FILTER: 'UI_SET_TORRENT_SEARCH_FILTER',
   UI_SET_TORRENT_SORT: 'UI_SET_TORRENT_SORT',
-  UI_SET_TORRENT_STATUS_FILTER: 'UI_SET_TORRENT_STATUS_FILTER'
+  UI_SET_TORRENT_STATUS_FILTER: 'UI_SET_TORRENT_STATUS_FILTER',
+  UI_SORT_PROPS_REQUEST_SUCCESS: 'UI_SORT_PROPS_REQUEST_SUCCESS',
+  UI_SORT_PROPS_REQUEST_ERROR: 'UI_SORT_PROPS_REQUEST_ERROR'
 };
 
 export default ActionTypes;

client/source/scripts/constants/EventTypes.js

@@ -8,6 +8,7 @@ const EventTypes = {
   CLIENT_TRANSFER_DATA_REQUEST_ERROR: 'CLIENT_TRANSFER_DATA_REQUEST_ERROR',
   CLIENT_TRANSFER_HISTORY_REQUEST_SUCCESS: 'CLIENT_TRANSFER_HISTORY_REQUEST_SUCCESS',
   UI_MODAL_CHANGE: 'UI_MODAL_CHANGE',
+  UI_LATEST_TORRENT_LOCATION_CHANGE: 'UI_LATEST_TORRENT_LOCATION_CHANGE',
   UI_TORRENT_DETAILS_HASH_CHANGE: 'UI_TORRENT_DETAILS_HASH_CHANGE',
   UI_TORRENT_DETAILS_OPEN_CHANGE: 'UI_TORRENT_DETAILS_OPEN_CHANGE',
   UI_TORRENT_SELECTION_CHANGE: 'UI_TORRENT_SELECTION_CHANGE',

client/source/scripts/stores/TorrentFilterStore.js

@@ -1,8 +1,9 @@
 import ActionTypes from '../constants/ActionTypes';
 import AppDispatcher from '../dispatcher/AppDispatcher';
 import BaseStore from './BaseStore';
-import TorrentActions from '../actions/TorrentActions';
 import EventTypes from '../constants/EventTypes';
+import TorrentActions from '../actions/TorrentActions';
+import UIActions from '../actions/UIActions';
 
 class TorrentFilterStoreClass extends BaseStore {
   constructor() {
@@ -18,26 +19,34 @@ class TorrentFilterStoreClass extends BaseStore {
     };
   }
 
-  getStatusFilter() {
-    return this.statusFilter;
-  }
-
-  setStatusFilter(filter) {
-    this.statusFilter = filter;
-    this.emit(EventTypes.UI_TORRENTS_FILTER_STATUS_CHANGE);
+  fetchSortProps() {
+    UIActions.fetchSortProps();
   }
 
   getSearchFilter() {
     return this.searchFilter;
   }
 
+  getStatusFilter() {
+    return this.statusFilter;
+  }
+
+  getTorrentsSort() {
+    return this.sortTorrentsBy;
+  }
+
+  handleSortPropsRequestSuccess(sortBy) {
+    this.setTorrentsSort(sortBy);
+  }
+
   setSearchFilter(filter) {
     this.searchFilter = filter;
     this.emit(EventTypes.UI_TORRENTS_FILTER_SEARCH_CHANGE);
   }
 
-  getTorrentsSort() {
-    return this.sortTorrentsBy;
+  setStatusFilter(filter) {
+    this.statusFilter = filter;
+    this.emit(EventTypes.UI_TORRENTS_FILTER_STATUS_CHANGE);
   }
 
   setTorrentsSort(sortBy) {
@@ -61,6 +70,9 @@ AppDispatcher.register((payload) => {
     case ActionTypes.UI_SET_TORRENT_SORT:
       TorrentFilterStore.setTorrentsSort(action.data);
       break;
+    case ActionTypes.UI_SORT_PROPS_REQUEST_SUCCESS:
+      TorrentFilterStore.handleSortPropsRequestSuccess(action.data);
+      break;
   }
 });
 

client/source/scripts/stores/TransferDataStore.js

@@ -5,7 +5,7 @@ import ClientActions from '../actions/ClientActions';
 import config from '../../../../config';
 import EventTypes from '../constants/EventTypes';
 
-class ClientDataStoreClass extends BaseStore {
+class TransferDataStoreClass extends BaseStore {
   constructor() {
     super();
 
@@ -126,43 +126,33 @@ class ClientDataStoreClass extends BaseStore {
       config.pollInterval
     );
   }
-
-  startPollingTorrents() {
-    clearInterval(this.pollTransferDataID);
-    this.pollTransferDataID = null;
-  }
-
-  stopPollingTorrentDetails() {
-    clearInterval(this.pollTorrentDetailsIntervalID);
-    this.isPollingTorrents = false;
-  }
 }
 
-const ClientDataStore = new ClientDataStoreClass();
+const TransferDataStore = new TransferDataStoreClass();
 
 AppDispatcher.register((payload) => {
   const {action, source} = payload;
 
   switch (action.type) {
     case ActionTypes.CLIENT_FETCH_TRANSFER_DATA_SUCCESS:
-      ClientDataStore.handleTransferDataSuccess(action.data.transferData);
+      TransferDataStore.handleTransferDataSuccess(action.data.transferData);
       break;
     case ActionTypes.CLIENT_FETCH_TRANSFER_DATA_ERROR:
-      ClientDataStore.handleTransferDataError(action.data.error);
+      TransferDataStore.handleTransferDataError(action.data.error);
       break;
     case ActionTypes.CLIENT_SET_THROTTLE_SUCCESS:
-      ClientDataStore.handleSetThrottleSuccess(action.data.transferData);
+      TransferDataStore.handleSetThrottleSuccess(action.data.transferData);
       break;
     case ActionTypes.CLIENT_SET_THROTTLE_ERROR:
-      ClientDataStore.handleSetThrottleError(action.data.error);
+      TransferDataStore.handleSetThrottleError(action.data.error);
       break;
     case ActionTypes.CLIENT_FETCH_TRANSFER_HISTORY_ERROR:
-      ClientDataStore.handleTransferHistoryError(action.error);
+      TransferDataStore.handleTransferHistoryError(action.error);
       break;
     case ActionTypes.CLIENT_FETCH_TRANSFER_HISTORY_SUCCESS:
-      ClientDataStore.handleTransferHistorySuccess(action.data);
+      TransferDataStore.handleTransferHistorySuccess(action.data);
       break;
   }
 });
 
-export default ClientDataStore;
+export default TransferDataStore;

client/source/scripts/stores/UIStore.js

@@ -10,6 +10,7 @@ class UIStoreClass extends BaseStore {
     super();
 
     this.activeModal = null;
+    this.latestTorrentLocation = null;
     this.torrentDetailsHash = null;
     this.torrentDetailsOpen = false;
   }
@@ -21,19 +22,31 @@ class UIStoreClass extends BaseStore {
     }
   }
 
+  fetchLatestTorrentLocation() {
+    TorrentActions.fetchLatestTorrentLocation();
+  }
+
   getActiveModal() {
     return this.activeModal;
   }
 
-  setActiveModal(modal) {
-    this.activeModal = modal;
-    this.emit(EventTypes.UI_MODAL_CHANGE);
+  getLatestTorrentLocation() {
+    return this.latestTorrentLocation;
   }
 
   getTorrentDetailsHash() {
     return this.torrentDetailsHash;
   }
 
+  handleLatestTorrentLocationRequestSuccess(location) {
+    this.latestTorrentLocation = location;
+    this.emit(EventTypes.UI_LATEST_TORRENT_LOCATION_CHANGE);
+  }
+
+  handleLatestTorrentLocationRequestError(error) {
+    console.log(error);
+  }
+
   handleTorrentClick(hash) {
     this.torrentDetailsHash = hash;
     this.emit(EventTypes.UI_TORRENT_DETAILS_HASH_CHANGE);
@@ -47,6 +60,11 @@ class UIStoreClass extends BaseStore {
   isTorrentDetailsOpen() {
     return this.torrentDetailsOpen;
   }
+
+  setActiveModal(modal) {
+    this.activeModal = modal;
+    this.emit(EventTypes.UI_MODAL_CHANGE);
+  }
 }
 
 const UIStore = new UIStoreClass();
@@ -64,6 +82,12 @@ AppDispatcher.register((payload) => {
     case ActionTypes.UI_DISPLAY_MODAL:
       UIStore.setActiveModal(action.data);
       break;
+    case ActionTypes.UI_LATEST_TORRENT_LOCATION_REQUEST_SUCCESS:
+      UIStore.handleLatestTorrentLocationRequestSuccess(action.data.path);
+      break;
+    case ActionTypes.UI_LATEST_TORRENT_LOCATION_REQUEST_ERROR:
+      UIStore.handleLatestTorrentLocationRequestError(action.error);
+      break;
   }
 });