From 46be9884f6863f3f77b494732795e5096af3e5c0 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Fri, 9 Nov 2018 13:40:27 -0500 Subject: [PATCH] Move tag activation logic to reducer --- src/actions/index.js | 8 ++++---- src/components/Dashboard.jsx | 18 +++++++++++------- src/components/TagListPanel.jsx | 21 ++------------------- src/js/timeline/timeline.js | 14 ++++---------- src/reducers/app.js | 31 +++++++++++++++++++++++++------ src/selectors/index.js | 12 ++++++------ 6 files changed, 52 insertions(+), 52 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 70c501d..ce01025 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -136,11 +136,11 @@ export function updateDistrict(district) { }; } -export const UPDATE_FILTERS = 'UPDATE_FILTERS'; -export function updateFilters(filters) { +export const UPDATE_TAGFILTERS = 'UPDATE_TIMEFILTERS'; +export function updateTagFilters(tag) { return { - type: UPDATE_FILTERS, - filters: filters + type: UPDATE_TAGFILTERS, + tag }; } diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index f16a91b..2a496a4 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -21,7 +21,8 @@ class Dashboard extends React.Component { this.handleHighlight = this.handleHighlight.bind(this); this.handleSelect = this.handleSelect.bind(this); this.handleToggle = this.handleToggle.bind(this); - this.handleFilter = this.handleFilter.bind(this); + this.handleTagFilter = this.handleTagFilter.bind(this); + this.handleTimeFilter = this.handleTimeFilter.bind(this); } componentDidMount() { @@ -67,8 +68,12 @@ class Dashboard extends React.Component { } } - handleFilter(filters) { - this.props.actions.updateFilters(filters); + handleTagFilter(tag) { + this.props.actions.updateTagFilters(tag); + } + + handleTimeFilter(timeRange) { + this.props.actions.updateTimeRange(timeRange); } handleToggle( key ) { @@ -139,7 +144,7 @@ class Dashboard extends React.Component { toolbarTab={this.props.ui.components.toolbarTab} isView2d={this.props.ui.flags.isView2d} - filter={this.handleFilter} + filter={this.handleTagFilter} toggle={ (key) => this.handleToggle(key) } actions={this.props.actions} /> @@ -152,7 +157,6 @@ class Dashboard extends React.Component { isFetchingEvents={this.props.ui.flags.isFetchingEvents} highlight={this.handleHighlight} - filter={this.handleFilter} toggle={this.handleToggle} getCategoryGroup={category => this.getCategoryGroup(category)} getCategoryGroupColor={category => this.getCategoryGroupColor(category)} @@ -170,7 +174,7 @@ class Dashboard extends React.Component { dom={this.props.ui.dom} select={this.handleSelect} - filter={this.handleFilter} + filter={this.handleTimeFilter} highlight={this.handleHighlight} toggle={() => this.handleToggle('TOGGLE_CARDSTACK')} getCategoryGroup={category => this.getCategoryGroup(category)} @@ -209,7 +213,7 @@ function mapStateToProps(state) { categories: selectors.getFilteredCategories(state), categoryGroups: selectors.getCategoryGroups(state), sites: selectors.getSites(state), - tags: selectors.getTags(state), + tags: selectors.getAllTags(state), notifications: state.domain.notifications, }), diff --git a/src/components/TagListPanel.jsx b/src/components/TagListPanel.jsx index 1308d43..da5a6a7 100644 --- a/src/components/TagListPanel.jsx +++ b/src/components/TagListPanel.jsx @@ -21,26 +21,9 @@ class TagListPanel extends React.Component { this.computeTree(nextProps.tags.children[nextProps.tagType]); } - traverseNodeAndCheckIt(node, depth, active) { - // do something to node - const tagFilter = this.newTagFilters.find(tagFilter => tagFilter.key === node.key) - tagFilter.active = (depth === 0) ? !node.active : active; - tagFilter.depth = depth; - depth = depth + 1; - - if (Object.keys(tagFilter.children).length > 0) { - Object.values(tagFilter.children).forEach((childNode) => { - this.traverseNodeAndCheckIt(childNode, depth, tagFilter.active); - }); - } - } - onClickCheckbox(tag) { - this.newTagFilters = this.props.tagFilters.slice(0); - let depth = 0; - if (tag.key && tag.children) this.traverseNodeAndCheckIt(tag, depth); - - this.props.filter({ tags: this.newTagFilters }); + tag.active = !tag.active + this.props.filter(tag); } createNodeComponent (node, depth) { diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js index 7226b28..662b0ab 100644 --- a/src/js/timeline/timeline.js +++ b/src/js/timeline/timeline.js @@ -56,7 +56,7 @@ export default function(app, ui) { let selected = []; let range = app.range; - const filter = app.filter; + const timeFilter = app.filter; const select = app.select; const getCategoryLabel = app.getCategoryLabel; const getCategoryGroupColor = app.getCategoryGroupColor; @@ -230,9 +230,7 @@ export default function(app, ui) { }) .on('end', () => { toggleTransition(true); - filter({ - range: scale.x.domain() - }); + timeFilter(scale.x.domain()); }); /* @@ -367,9 +365,7 @@ export default function(app, ui) { const domainF = d3.timeMinute.offset(newCentralTime, zoom.duration / 2); scale.x.domain([domain0, domainF]); - filter({ - range: scale.x.domain() - }); + timeFilter(scale.x.domain()); } /** @@ -392,9 +388,7 @@ export default function(app, ui) { } scale.x.domain([domain0, domainF]); - filter({ - range: scale.x.domain() - }); + timeFilter(scale.x.domain()); } function toggleTransition(isTransition) { diff --git a/src/reducers/app.js b/src/reducers/app.js index c252f82..d9f579b 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -3,7 +3,7 @@ import initial from '../store/initial.js'; import { UPDATE_HIGHLIGHTED, UPDATE_SELECTED, - UPDATE_FILTERS, + UPDATE_TAGFILTERS, UPDATE_TIMERANGE, RESET_ALLFILTERS, TOGGLE_LANGUAGE, @@ -22,15 +22,34 @@ function updateSelected(appState, action) { }); } -function updateFilters(appState, action) { // XXX +function updateTagFilters(appState, action) { + const tagFilters = appState.filters.tags.slice(0); + const nextActiveState = action.tag.active + + function traverseNode(node) { + const tagFilter = tagFilters.find(tF => tF.key === node.key); + node.active = nextActiveState; + if (!tagFilter) tagFilters.push(node); + + if (node && Object.keys(node.children).length > 0) { + Object.values(node.children).forEach((childNode) => { traverseNode(childNode); }); + } + } + + traverseNode(action.tag); + return Object.assign({}, appState, { - filters: Object.assign({}, appState.filters, action.filters) + filters: Object.assign({}, appState.filters, { + tags: tagFilters + }) }); } function updateTimeRange(appState, action) { // XXX return Object.assign({}, appState, { - filters: Object.assign({}, appState.filters, action.range), + filters: Object.assign({}, appState.filters, { + range: action.range + }), }); } @@ -70,8 +89,8 @@ function app(appState = initial.app, action) { return updateHighlighted(appState, action); case UPDATE_SELECTED: return updateSelected(appState, action); - case UPDATE_FILTERS: - return updateFilters(appState, action); + case UPDATE_TAGFILTERS: + return updateTagFilters(appState, action); case UPDATE_TIMERANGE: return updateTimeRange(appState, action); case RESET_ALLFILTERS: diff --git a/src/selectors/index.js b/src/selectors/index.js index f30edbd..cd0bb46 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -10,7 +10,7 @@ export const getSites = (state) => { if (process.env.features.USE_SITES) return state.domain.sites; return []; } -export const getTags = state => state.domain.tags; +export const getAllTags = state => state.domain.tags; export const getCategoriesFilter = state => state.app.filters.categories; export const getTagsFilter = state => state.app.filters.tags; @@ -105,20 +105,20 @@ export const getCategoryGroups = createSelector( } ) + /** * Given a tree of tags, return those tags as a list, where each node has been * aware of its depth, and given an 'active' flag */ export const getTagFilters = createSelector( - [getTags], + [getAllTags], (tags) => { - const allTags = []; + const allTagFilters = []; let depth = 0; function traverseNode(node, depth) { - // do something to node node.active = (!node.hasOwnProperty('active')) ? false : node.active; node.depth = depth; - allTags.push(node) + if (node.active) allTagFilters.push(node) depth = depth + 1; if (Object.keys(node.children).length > 0) { @@ -129,6 +129,6 @@ export const getTagFilters = createSelector( } if (tags.key && tags.children) traverseNode(tags, depth) - return allTags; + return allTagFilters; } )