meh, kinda works, sleep now

5 files changed, 111 insertions, 57 deletions

diff --git a/src/web/js/actions/MiddlePanelActions.js b/src/web/js/actions/MiddlePanelActions.js
index f750c900..159ba91b 100644
--- a/src/web/js/actions/MiddlePanelActions.js
+++ b/src/web/js/actions/MiddlePanelActions.js
@@ -1,53 +1,92 @@
 var JarrDispatcher = require('../dispatcher/JarrDispatcher');
 var MiddlePanelActionTypes = require('../constants/JarrConstants').MiddlePanelActionTypes;
 var jquery = require('jquery');
+var MiddlePanelStore = require('../stores/MiddlePanelStore');
+
+var _last_fetched_with = {};
+var shouldFetch = function(filters) {
+    if(filters.filter != null // undefined means unchanged
+            && (_last_fetched_with.filter != 'all'
+                || _last_fetched_with.filter != filters.filter)) {
+        return true;
+    }
+    if(_last_fetched_with.filter_type != null) {
+        if(_last_fetched_with.filter_type != filters.filter_type) {
+            return true;
+        }
+        if(_last_fetched_with.filter_id != filters.filter_id) {
+            return true;
+        }
+    }
+    return false;
+}
+var reloadIfNecessaryAndDispatch = function(dispath_payload) {
+    if(shouldFetch(dispath_payload)) {
+        filters = MiddlePanelStore.getRequestFilter();
+        for (var key in filters) {
+            if(dispath_payload[key] != null) {
+                filters[key] = dispath_payload[key];
+            }
+        }
+        jquery.getJSON('/middle_panel', dispath_payload, function(payload) {
+            dispath_payload.articles = payload.articles;
+            JarrDispatcher.dispatch(dispath_payload);
+            _last_fetched_with = MiddlePanelStore.getRequestFilter();
+        });
+    } else {
+        JarrDispatcher.dispatch(dispath_payload);
+    }
+}
 
 
 var MiddlePanelActions = {
     reload: function() {
-        jquery.getJSON('/middle_panel', function(payload) {
+        filters = MiddlePanelStore.getRequestFilter();
+        jquery.getJSON('/middle_panel', filters, function(payload) {
+            _last_fetched_with = filters;
             JarrDispatcher.dispatch({
                 type: MiddlePanelActionTypes.RELOAD_MIDDLE_PANEL,
                 articles: payload.articles,
             });
         });
     },
-    removeParentFilter: function(parent_type, parent_id) {
-        JarrDispatcher.dispatch({
+    removeParentFilter: function(filter_type, filter_id) {
+        reloadIfNecessaryAndDispatch({
             type: MiddlePanelActionTypes.MIDDLE_PANEL_PARENT_FILTER,
-            parent_type: null,
-            parent_id: null,
+            filter_type: null,
+            filter_id: null,
         });
     },
     setCategoryFilter: function(category_id) {
-        JarrDispatcher.dispatch({
+        reloadIfNecessaryAndDispatch({
             type: MiddlePanelActionTypes.MIDDLE_PANEL_PARENT_FILTER,
-            parent_type: 'category',
-            parent_id: category_id,
+            filter_type: 'category',
+            filter_id: category_id,
         });
     },
     setFeedFilter: function(feed_id) {
-        JarrDispatcher.dispatch({
+        reloadIfNecessaryAndDispatch({
             type: MiddlePanelActionTypes.MIDDLE_PANEL_PARENT_FILTER,
-            parent_type: 'feed',
-            parent_id: feed_id,
+            filter_type: 'feed',
+            filter_id: feed_id,
         });
     },
     setFilterAll: function() {
-        JarrDispatcher.dispatch({
-            component: 'middle_panel',
-            type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER_ALL,
+        reloadIfNecessaryAndDispatch({
+            type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER,
+            filter: 'all',
         });
     },
     setFilterUnread: function() {
-        JarrDispatcher.dispatch({
-            component: 'middle_panel',
-            type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER_UNREAD,
+        reloadIfNecessaryAndDispatch({
+            type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER,
+            filter: 'unread',
         });
     },
     setFilterLiked: function() {
-        JarrDispatcher.dispatch({
-            type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER_LIKED,
+        reloadIfNecessaryAndDispatch({
+            type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER,
+            filter: 'liked',
         });
     },
 };
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 38f3b1db..f95554b8 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -20,7 +20,7 @@ var TableLine = React.createClass({
     render: function() {
         var read = this.state.read ? 'r' : '';
         var liked = this.state.liked ? 'l' : '';
-        var icon = undefined;
+        var icon = null;
         if(this.props.icon_url){
             icon = (<img width="16px" src={this.props.icon_url} />);
         } else {
diff --git a/src/web/js/constants/JarrConstants.js b/src/web/js/constants/JarrConstants.js
index a0850283..3d334ee3 100644
--- a/src/web/js/constants/JarrConstants.js
+++ b/src/web/js/constants/JarrConstants.js
@@ -21,8 +21,6 @@ module.exports = {
     MiddlePanelActionTypes: keyMirror({
         RELOAD_MIDDLE_PANEL: null,
         MIDDLE_PANEL_PARENT_FILTER: null,
-        MIDDLE_PANEL_FILTER_ALL: null,
-        MIDDLE_PANEL_FILTER_UNREAD: null,
-        MIDDLE_PANEL_FILTER_LIKED: null,
+        MIDDLE_PANEL_FILTER: null,
     }),
 };
diff --git a/src/web/js/stores/MiddlePanelStore.js b/src/web/js/stores/MiddlePanelStore.js
index 4e6e04c4..80ac8198 100644
--- a/src/web/js/stores/MiddlePanelStore.js
+++ b/src/web/js/stores/MiddlePanelStore.js
@@ -7,38 +7,51 @@ var assign = require('object-assign');
 
 var MiddlePanelStore = assign({}, EventEmitter.prototype, {
     _datas: {filter: 'unread', articles: [],
-             parent_filter_type: null, parent_filter_id: null},
+             filter_type: null, filter_id: null},
     getAll: function() {
         return this._datas;
     },
+    getRequestFilter: function() {
+        return {'filter': this._datas.filter,
+                'filter_type': this._datas.filter_type,
+                'filter_id': this._datas.filter_id};
+    },
     getArticles: function() {
-        var articles = [];
         var key = null;
         var id = null;
-        if (this._datas.parent_filter_type) {
-            key = this._datas.parent_filter_type + '_id';
-            id = this._datas.parent_filter_id;
+        var filter = this._datas.filter;
+        if (this._datas.filter_type) {
+            key = this._datas.filter_type + '_id';
+            id = this._datas.filter_id;
         }
-        this._datas.articles.map(function(article) {
-            if(!key || article[key] == id) {
-                articles.push(article);
-            }
+        return this._datas.articles.filter(function(article) {
+            return ((!key || article[key] == id)
+                    && (filter == 'all'
+                        || (filter == 'unread' && !article.read)
+                        || (filter == 'liked' && article.liked)));
         });
-        return articles;
+    },
+    setArticles: function(articles) {
+        if(articles || articles == []) {
+            this._datas.articles = articles;
+            return true;
+        }
+        return false;
     },
     setFilter: function(value) {
         if(this._datas.filter != value) {
             this._datas.filter = value;
-            this.emitChange();
+            return true;
         }
+        return false;
     },
     setParentFilter: function(type, value) {
-        if(this._datas['parent_filter_id'] != value
-                || this._datas['parent_filter_type'] != type) {
-            this._datas['parent_filter_type'] = type;
-            this._datas['parent_filter_id'] = value;
-            this.emitChange();
+        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;
     },
     emitChange: function() {
         this.emit(CHANGE_EVENT);
@@ -53,30 +66,25 @@ var MiddlePanelStore = assign({}, EventEmitter.prototype, {
 
 
 MiddlePanelStore.dispatchToken = JarrDispatcher.register(function(action) {
+    var changed = false;
     switch(action.type) {
         case MiddlePanelActionTypes.RELOAD_MIDDLE_PANEL:
-            MiddlePanelStore._datas['articles'] = action.articles;
+            MiddlePanelStore.setArticles(action.articles);
             MiddlePanelStore.emitChange();
             break;
-        // PARENT FILTER
         case MiddlePanelActionTypes.MIDDLE_PANEL_PARENT_FILTER:
-            MiddlePanelStore.setParentFilter(action.parent_type,
-                                             action.parent_id);
-            break;
-        // FILTER
-        case MiddlePanelActionTypes.MIDDLE_PANEL_FILTER_ALL:
-            MiddlePanelStore.setFilter('all');
+            changed = MiddlePanelStore.setParentFilter(action.filter_type,
+                                                       action.filter_id);
+            changed = MiddlePanelStore.setArticles(action.articles) || changed;
+            if(changed) {MiddlePanelStore.emitChange();}
             break;
-        case MiddlePanelActionTypes.MIDDLE_PANEL_FILTER_UNREAD:
-            MiddlePanelStore.setFilter('unread');
+        case MiddlePanelActionTypes.MIDDLE_PANEL_FILTER:
+            changed = MiddlePanelStore.setFilter(action.filter);
+            changed = MiddlePanelStore.setArticles(action.articles) || changed;
+            if(changed) {MiddlePanelStore.emitChange();}
             break;
-        case MiddlePanelActionTypes.MIDDLE_PANEL_FILTER_LIKED:
-            MiddlePanelStore.setFilter('liked');
-            break;
-
-
         default:
-            // do nothing
+            // pass
     }
 });
 
diff --git a/src/web/views/views.py b/src/web/views/views.py
index 1b079d9f..25788c42 100644
--- a/src/web/views/views.py
+++ b/src/web/views/views.py
@@ -266,17 +266,26 @@ def get_menu():
 @app.route('/middle_panel')
 @login_required
 def get_middle_panel():
+    filters = {}
+    if request.args.get('filter') == 'unread':
+        filters['readed'] = False
+    elif request.args.get('filter') == 'liked':
+        filters['like'] = True
+    filter_type = request.args.get('filter_type')
+    if filter_type in {'feed', 'category'} and request.args.get('filter_id'):
+        filters[filter_type + '_id'] = int(request.args['filter_id'])
+
     fd_hash = {feed.id: {'title': feed.title,
                          'icon_url': url_for('icon.icon', url=feed.icon_url)
                                      if feed.icon_url else None}
                for feed in FeedController(g.user.id).read()}
-    articles = ArticleController(g.user.id).read(readed=False).order_by('date')
+    articles = ArticleController(g.user.id).read(**filters).order_by('-date')
     return jsonify(**{'articles': [{'title': art.title, 'liked': art.like,
             'read': art.readed, 'article_id': art.id,
             'feed_id': art.feed_id, 'category_id': art.category_id or 0,
             'feed_title': fd_hash[art.feed_id]['title'],
             'icon_url': fd_hash[art.feed_id]['icon_url'],
-            'date': art.date} for art in articles]})
+            'date': art.date} for art in articles.limit(1000)]})
 
 
 @etag_match