From 15c4ed6bebdeb277c24bd92dab5bba900fc90de4 Mon Sep 17 00:00:00 2001 From: François Schmidts Date: Mon, 25 Jan 2016 13:14:06 +0100 Subject: redoing constant, handling read / unread in menu, removing bad optim for loading articles --- src/web/js/actions/MenuActions.js | 10 +++--- src/web/js/actions/MiddlePanelActions.js | 57 ++++++++++++++++-------------- src/web/js/actions/RightPanelActions.js | 4 +-- src/web/js/components/MiddlePanel.react.js | 10 ++++-- src/web/js/components/RightPanel.react.js | 1 - src/web/js/constants/JarrConstants.js | 13 ++----- src/web/js/stores/MenuStore.js | 37 +++++++++++++++---- src/web/js/stores/MiddlePanelStore.js | 16 +++++---- src/web/js/stores/RightPanelStore.js | 3 +- src/web/views/views.py | 3 +- 10 files changed, 91 insertions(+), 63 deletions(-) (limited to 'src/web') diff --git a/src/web/js/actions/MenuActions.js b/src/web/js/actions/MenuActions.js index 1f1eea01..bf039fd1 100644 --- a/src/web/js/actions/MenuActions.js +++ b/src/web/js/actions/MenuActions.js @@ -1,5 +1,5 @@ var JarrDispatcher = require('../dispatcher/JarrDispatcher'); -var MenuActionTypes = require('../constants/JarrConstants').MenuActionTypes; +var ActionTypes = require('../constants/JarrConstants'); var jquery = require('jquery'); @@ -8,7 +8,7 @@ var MenuActions = { reload: function() { jquery.getJSON('/menu', function(payload) { JarrDispatcher.dispatch({ - type: MenuActionTypes.RELOAD_MENU, + type: ActionTypes.RELOAD_MENU, categories: payload.categories, feed_in_error: payload.feed_in_error, all_unread_count: payload.all_unread_count, @@ -17,19 +17,19 @@ var MenuActions = { }, setFilterAll: function() { JarrDispatcher.dispatch({ - type: MenuActionTypes.MENU_FILTER, + type: ActionTypes.MENU_FILTER, filter: 'all', }); }, setFilterUnread: function() { JarrDispatcher.dispatch({ - type: MenuActionTypes.MENU_FILTER, + type: ActionTypes.MENU_FILTER, filter: 'unread', }); }, setFilterError: function() { JarrDispatcher.dispatch({ - type: MenuActionTypes.MENU_FILTER, + type: ActionTypes.MENU_FILTER, filter: 'error', }); }, diff --git a/src/web/js/actions/MiddlePanelActions.js b/src/web/js/actions/MiddlePanelActions.js index 7a944ecd..7c956e85 100644 --- a/src/web/js/actions/MiddlePanelActions.js +++ b/src/web/js/actions/MiddlePanelActions.js @@ -1,24 +1,25 @@ var JarrDispatcher = require('../dispatcher/JarrDispatcher'); -var MiddlePanelActionTypes = require('../constants/JarrConstants').MiddlePanelActionTypes; +var ActionTypes = require('../constants/JarrConstants'); 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; + return true; // FIXME disabling intelligent fetch for now, no caching better that bad one +// 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)) { @@ -46,59 +47,61 @@ var MiddlePanelActions = { jquery.getJSON('/middle_panel', filters, function(payload) { _last_fetched_with = filters; JarrDispatcher.dispatch({ - type: MiddlePanelActionTypes.RELOAD_MIDDLE_PANEL, + type: ActionTypes.RELOAD_MIDDLE_PANEL, articles: payload.articles, }); }); }, removeParentFilter: function() { reloadIfNecessaryAndDispatch({ - type: MiddlePanelActionTypes.PARENT_FILTER, + type: ActionTypes.PARENT_FILTER, filter_type: null, filter_id: null, }); }, setCategoryFilter: function(category_id) { reloadIfNecessaryAndDispatch({ - type: MiddlePanelActionTypes.PARENT_FILTER, + type: ActionTypes.PARENT_FILTER, filter_type: 'category_id', filter_id: category_id, }); }, setFeedFilter: function(feed_id) { reloadIfNecessaryAndDispatch({ - type: MiddlePanelActionTypes.PARENT_FILTER, + type: ActionTypes.PARENT_FILTER, filter_type: 'feed_id', filter_id: feed_id, }); }, setFilterAll: function() { reloadIfNecessaryAndDispatch({ - type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER, + type: ActionTypes.MIDDLE_PANEL_FILTER, filter: 'all', }); }, setFilterUnread: function() { reloadIfNecessaryAndDispatch({ - type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER, + type: ActionTypes.MIDDLE_PANEL_FILTER, filter: 'unread', }); }, setFilterLiked: function() { reloadIfNecessaryAndDispatch({ - type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER, + type: ActionTypes.MIDDLE_PANEL_FILTER, filter: 'liked', }); }, - changeRead: function(article_id, new_value){ + changeRead: function(category_id, feed_id, article_id, new_value){ jquery.ajax({type: 'PUT', contentType: 'application/json', data: JSON.stringify({readed: new_value}), url: "api/v2.0/article/" + article_id, success: function (result) { JarrDispatcher.dispatch({ - type: MiddlePanelActionTypes.CHANGE_ATTR, + type: ActionTypes.CHANGE_ATTR, article_id: article_id, + category_id: category_id, + feed_id: feed_id, attribute: 'read', value: new_value, }); @@ -108,15 +111,17 @@ var MiddlePanelActions = { }, }); }, - changeLike: function(article_id, new_value){ + changeLike: function(category_id, feed_id, article_id, new_value){ jquery.ajax({type: 'PUT', contentType: 'application/json', data: JSON.stringify({like: new_value}), url: "api/v2.0/article/" + article_id, success: function (result) { JarrDispatcher.dispatch({ - type: MiddlePanelActionTypes.CHANGE_ATTR, + type: ActionTypes.CHANGE_ATTR, article_id: article_id, + category_id: category_id, + feed_id: feed_id, attribute: 'liked', value: new_value, }); diff --git a/src/web/js/actions/RightPanelActions.js b/src/web/js/actions/RightPanelActions.js index 3cd549e5..7a7b935a 100644 --- a/src/web/js/actions/RightPanelActions.js +++ b/src/web/js/actions/RightPanelActions.js @@ -1,5 +1,5 @@ var JarrDispatcher = require('../dispatcher/JarrDispatcher'); -var RightActionTypes = require('../constants/JarrConstants').RightPanelActionTypes; +var ActionTypes = require('../constants/JarrConstants'); var jquery = require('jquery'); var RightPanelStore = require('../stores/RightPanelStore'); @@ -10,7 +10,7 @@ var RightPanelActions = { jquery.getJSON('api/v2.0/' + obj_type + '/' + obj_id, function(payload) { _last_fetched_with = filters; JarrDispatcher.dispatch({ - type: RightPanelActionTypes.LOAD_RIGHT_PANEL, + type: ActionTypes.LOAD_RIGHT_PANEL, articles: payload.articles, }); }); diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js index 49365a6a..741af5e9 100644 --- a/src/web/js/components/MiddlePanel.react.js +++ b/src/web/js/components/MiddlePanel.react.js @@ -29,7 +29,7 @@ var TableLine = React.createClass({ } else { icon = ; } - var title = ( + var title = ( {icon} {this.props.feed_title} ); var read = ();})} diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js index 422b8e5b..d195dc08 100644 --- a/src/web/js/components/RightPanel.react.js +++ b/src/web/js/components/RightPanel.react.js @@ -58,7 +58,6 @@ var RightPanel = React.createClass({ return
; }, componentDidMount: function() { - RightPanelActions.reload(); RightPanelStore.addChangeListener(this._onChange); }, componentWillUnmount: function() { diff --git a/src/web/js/constants/JarrConstants.js b/src/web/js/constants/JarrConstants.js index c7b419e4..ca5eacc7 100644 --- a/src/web/js/constants/JarrConstants.js +++ b/src/web/js/constants/JarrConstants.js @@ -11,19 +11,12 @@ var keyMirror = require('keymirror'); -module.exports = { - MenuActionTypes: keyMirror({ +module.exports = keyMirror({ RELOAD_MENU: null, PARENT_FILTER: null, MENU_FILTER: null, - }), - MiddlePanelActionTypes: keyMirror({ - PARENT_FILTER: null, + CHANGE_ATTR: null, RELOAD_MIDDLE_PANEL: null, MIDDLE_PANEL_FILTER: null, - CHANGE_ATTR: null, - }), - RightPanelActionTypes: keyMirror({ LOAD_RIGHT_PANEL: null, - }), -}; +}); diff --git a/src/web/js/stores/MenuStore.js b/src/web/js/stores/MenuStore.js index 6809d8b0..ecf32499 100644 --- a/src/web/js/stores/MenuStore.js +++ b/src/web/js/stores/MenuStore.js @@ -1,5 +1,5 @@ var JarrDispatcher = require('../dispatcher/JarrDispatcher'); -var MenuActionTypes = require('../constants/JarrConstants').MenuActionTypes; +var ActionTypes = require('../constants/JarrConstants'); var EventEmitter = require('events').EventEmitter; var CHANGE_EVENT = 'change_menu'; var assign = require('object-assign'); @@ -41,25 +41,50 @@ var MenuStore = assign({}, EventEmitter.prototype, { MenuStore.dispatchToken = JarrDispatcher.register(function(action) { switch(action.type) { - case MenuActionTypes.RELOAD_MENU: + case ActionTypes.RELOAD_MENU: MenuStore._datas['categories'] = action.categories; MenuStore._datas['feed_in_error'] = action.feed_in_error; MenuStore._datas['all_unread_count'] = action.all_unread_count; MenuStore.emitChange(); break; - case MenuActionTypes.PARENT_FILTER: + case ActionTypes.PARENT_FILTER: MenuStore.setActive(action.filter_type, action.filter_id); break; - case MenuActionTypes.MENU_FILTER: + case ActionTypes.MENU_FILTER: MenuStore.setFilter(action.filter); break; - case MenuActionTypes.MENU_FILTER: + case ActionTypes.MENU_FILTER: MenuStore.setFilter(action.filter); break; - case MenuActionTypes.MENU_FILTER: + case ActionTypes.MENU_FILTER: MenuStore.setFilter(action.filter); break; + case ActionTypes.CHANGE_ATTR: + if(action.attribute != 'read') { + return; + } + for(var i in MenuStore._datas.categories) { + if(MenuStore._datas.categories[i].id == action.category_id) { + for(var j in MenuStore._datas.categories[i].feeds) { + if(MenuStore._datas.categories[i].feeds[j].id == action.feed_id) { + if(action.value) { + MenuStore._datas.categories[i].feeds[j].unread -= 1; + } else { + MenuStore._datas.categories[i].feeds[j].unread += 1; + } + } + } + if(action.value) { + MenuStore._datas.categories[i].unread -= 1; + } else { + MenuStore._datas.categories[i].unread += 1; + } + MenuStore.emitChange(); + break; + } + } + break; default: // do nothing } diff --git a/src/web/js/stores/MiddlePanelStore.js b/src/web/js/stores/MiddlePanelStore.js index 201bebd1..12c2d6e8 100644 --- a/src/web/js/stores/MiddlePanelStore.js +++ b/src/web/js/stores/MiddlePanelStore.js @@ -1,6 +1,5 @@ var JarrDispatcher = require('../dispatcher/JarrDispatcher'); -var MiddlePanelActionTypes = require('../constants/JarrConstants').MiddlePanelActionTypes; -var MenuActionTypes = require('../constants/JarrConstants').MenuActionTypes; +var ActionTypes = require('../constants/JarrConstants'); var EventEmitter = require('events').EventEmitter; var CHANGE_EVENT = 'change_middle_panel'; var assign = require('object-assign'); @@ -69,22 +68,22 @@ var MiddlePanelStore = assign({}, EventEmitter.prototype, { MiddlePanelStore.dispatchToken = JarrDispatcher.register(function(action) { var changed = false; switch(action.type) { - case MiddlePanelActionTypes.RELOAD_MIDDLE_PANEL: + case ActionTypes.RELOAD_MIDDLE_PANEL: MiddlePanelStore.setArticles(action.articles); MiddlePanelStore.emitChange(); break; - case MiddlePanelActionTypes.PARENT_FILTER: + case ActionTypes.PARENT_FILTER: 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: + case ActionTypes.MIDDLE_PANEL_FILTER: changed = MiddlePanelStore.setFilter(action.filter); changed = MiddlePanelStore.setArticles(action.articles) || changed; if(changed) {MiddlePanelStore.emitChange();} break; - case MiddlePanelActionTypes.CHANGE_ATTR: + case ActionTypes.CHANGE_ATTR: var id = action.article_id; var attr = action.attribute; var val = action.value; @@ -92,7 +91,10 @@ MiddlePanelStore.dispatchToken = JarrDispatcher.register(function(action) { if(MiddlePanelStore._datas.articles[i].article_id == id) { if (MiddlePanelStore._datas.articles[i][attr] != val) { MiddlePanelStore._datas.articles[i][attr] = val; - MiddlePanelStore.emitChange(); + // avoiding redraw if not filter, display won't change anyway + if(MiddlePanelStore._datas.filter != 'all') { + MiddlePanelStore.emitChange(); + } } break; } diff --git a/src/web/js/stores/RightPanelStore.js b/src/web/js/stores/RightPanelStore.js index 0bca9f54..54df1c95 100644 --- a/src/web/js/stores/RightPanelStore.js +++ b/src/web/js/stores/RightPanelStore.js @@ -1,6 +1,5 @@ var JarrDispatcher = require('../dispatcher/JarrDispatcher'); -var RightPanelActionTypes = require('../constants/JarrConstants').RightPanelActionTypes; -var MenuActionTypes = require('../constants/JarrConstants').MenuActionTypes; +var ActionTypes = require('../constants/JarrConstants'); var EventEmitter = require('events').EventEmitter; var CHANGE_EVENT = 'change_middle_panel'; var assign = require('object-assign'); diff --git a/src/web/views/views.py b/src/web/views/views.py index 297cae28..e296c8ac 100644 --- a/src/web/views/views.py +++ b/src/web/views/views.py @@ -279,7 +279,8 @@ def get_middle_panel(): '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(**filters).order_by('-date') + articles = ArticleController(g.user.id).read(**filters)\ + .order_by(Article.date.desc()) 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, -- cgit