correcting awful middle panel action handling

4 files changed, 55 insertions, 43 deletions

diff --git a/src/web/js/actions/MiddlePanelActions.js b/src/web/js/actions/MiddlePanelActions.js
index ec76d2bc..08510f29 100644
--- a/src/web/js/actions/MiddlePanelActions.js
+++ b/src/web/js/actions/MiddlePanelActions.js
@@ -21,16 +21,21 @@ var shouldFetch = function(filters) {
 //    }
 //    return false;
 }
-var key_whitelist = ['filter_id', 'filter_type',
-                     'query', 'search_title', 'search_content'];
 var reloadIfNecessaryAndDispatch = function(dispath_payload) {
     if(shouldFetch(dispath_payload)) {
-        var filters = MiddlePanelStore.getRequestFilter();
-        key_whitelist.map(function(key) {
+        var filters = MiddlePanelStore.getRequestFilter(
+                    dispath_payload.display_search);
+        MiddlePanelStore.filter_whitelist.map(function(key) {
             if(key in dispath_payload) {
                 filters[key] = dispath_payload[key];
             }
+            if(filters[key] == null) {
+                delete filters[key];
+            }
         });
+        if('display_search' in filters) {
+            delete filters['display_search'];
+        }
         jquery.getJSON('/middle_panel', filters,
                 function(payload) {
                     dispath_payload.articles = payload.articles;
@@ -50,15 +55,19 @@ var MiddlePanelActions = {
         });
     },
     search: function(search) {
-        MiddlePanelStore._datas.display_search = true;
-        MiddlePanelStore._datas.query = search.query;
-        MiddlePanelStore._datas.search_content = search.content;
-        MiddlePanelStore._datas.search_content = search.content;
-        this.reload();
+        reloadIfNecessaryAndDispatch({
+            type: ActionTypes.RELOAD_MIDDLE_PANEL,
+            display_search: true,
+            query: search.query,
+            search_title: search.title,
+            search_content: search.content,
+        });
     },
     search_off: function() {
-        MiddlePanelStore._datas.display_search = false;
-        this.reload();
+        reloadIfNecessaryAndDispatch({
+            type: ActionTypes.RELOAD_MIDDLE_PANEL,
+            display_search: false,
+        });
     },
     removeParentFilter: function() {
         reloadIfNecessaryAndDispatch({
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 4fe14c09..a46d7346 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -163,22 +163,28 @@ var MiddlePanelFilter = React.createClass({
         );
     },
     setAllFilter: function() {
-        this.setState({filter: 'all'});
-        MiddlePanelActions.setFilter('all');
+        this.setState({filter: 'all'}, function() {
+            MiddlePanelActions.setFilter('all');
+        }.bind(this));
     },
     setUnreadFilter: function() {
-        this.setState({filter: 'unread'});
-        MiddlePanelActions.setFilter('unread');
+        this.setState({filter: 'unread'}, function() {
+            MiddlePanelActions.setFilter('unread');
+        }.bind(this));
     },
     setLikedFilter: function() {
-        this.setState({filter: 'liked'});
-        MiddlePanelActions.setFilter('liked');
+        this.setState({filter: 'liked'}, function() {
+            MiddlePanelActions.setFilter('liked');
+        }.bind(this));
     },
     toogleSearch: function() {
-        if(this.state.display_search) {
-            MiddlePanelActions.search_off();
-        }
-        this.setState({display_search: !this.state.display_search});
+        this.setState({display_search: !this.state.display_search},
+            function() {
+                if(!this.state.display_search) {
+                    MiddlePanelActions.search_off();
+                }
+            }.bind(this)
+        );
     },
 });
 
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index a1e15e94..00e2dd54 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -21,7 +21,7 @@ var Feed = React.createClass({
         var header = (<h4>
                         {icon}<strong>Title:</strong> {this.props.feed.title}
                       </h4>);
-        return (<Panel header={header}>
+        return (<Panel collapsible defaultExpanded header={header}>
                     <dl className="dl-horizontal">
                         <dt>Description</dt>
                         <dd>{this.props.feed.description}</dd>
diff --git a/src/web/js/stores/MiddlePanelStore.js b/src/web/js/stores/MiddlePanelStore.js
index 611808f7..83b8d942 100644
--- a/src/web/js/stores/MiddlePanelStore.js
+++ b/src/web/js/stores/MiddlePanelStore.js
@@ -6,6 +6,8 @@ var assign = require('object-assign');
 
 
 var MiddlePanelStore = assign({}, EventEmitter.prototype, {
+    filter_whitelist: ['filter', 'filter_id', 'filter_type', 'display_search',
+                       'query', 'search_title', 'search_content'],
     _datas: {filter: 'unread', articles: [],
              filter_type: null, filter_id: null,
              display_search: false, query: null,
@@ -13,12 +15,12 @@ var MiddlePanelStore = assign({}, EventEmitter.prototype, {
     getAll: function() {
         return this._datas;
     },
-    getRequestFilter: function() {
+    getRequestFilter: function(display_search) {
         var filters = {'filter': this._datas.filter,
                        'filter_type': this._datas.filter_type,
                        'filter_id': this._datas.filter_id,
         };
-        if(this._datas.display_search) {
+        if(display_search || (display_search == undefined && this._datas.display_search)) {
             filters.query = this._datas.query;
             filters.search_title = this._datas.search_title;
             filters.search_content = this._datas.search_content;
@@ -47,20 +49,15 @@ var MiddlePanelStore = assign({}, EventEmitter.prototype, {
         }
         return false;
     },
-    setFilter: function(value) {
-        if(this._datas.filter != value) {
-            this._datas.filter = value;
-            return true;
-        }
-        return false;
-    },
-    setParentFilter: function(type, value) {
-        if(this._datas.filter_id != value || this._datas.filter_type != type) {
-            this._datas.filter_type = type;
-            this._datas.filter_id = value;
-            return true;
-        }
-        return false;
+    registerFilter: function(action) {
+        var changed = false;
+        this.filter_whitelist.map(function(key) {
+            if(key in action && this._datas[key] != action[key]) {
+                changed = true;
+                this._datas[key] = action[key];
+            }
+        }.bind(this));
+        return changed;
     },
     emitChange: function() {
         this.emit(CHANGE_EVENT);
@@ -78,17 +75,17 @@ MiddlePanelStore.dispatchToken = JarrDispatcher.register(function(action) {
     var changed = false;
     switch(action.type) {
         case ActionTypes.RELOAD_MIDDLE_PANEL:
-            MiddlePanelStore.setArticles(action.articles);
-            MiddlePanelStore.emitChange();
+            changed = MiddlePanelStore.registerFilter(action);
+            changed = MiddlePanelStore.setArticles(action.articles) || changed;
+            if(changed) {MiddlePanelStore.emitChange()};
             break;
         case ActionTypes.PARENT_FILTER:
-            changed = MiddlePanelStore.setParentFilter(action.filter_type,
-                                                       action.filter_id);
+            changed = MiddlePanelStore.registerFilter(action);
             changed = MiddlePanelStore.setArticles(action.articles) || changed;
             if(changed) {MiddlePanelStore.emitChange();}
             break;
         case ActionTypes.MIDDLE_PANEL_FILTER:
-            changed = MiddlePanelStore.setFilter(action.filter);
+            changed = MiddlePanelStore.registerFilter(action);
             changed = MiddlePanelStore.setArticles(action.articles) || changed;
             if(changed) {MiddlePanelStore.emitChange();}
             break;