From a39af029a3b29155c337d7d91708cce4687e945a Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 3 Jan 2019 15:04:42 +0000 Subject: [PATCH] WIP: refactor Toolbar.jsx --- src/components/Dashboard.jsx | 17 +++++++------ src/components/NarrativeCard.js | 21 ++++++++++------ src/components/Toolbar.jsx | 44 ++++++++++++++------------------- src/js/utilities.js | 19 +++++++++++++- src/reducers/app.js | 44 +++++++++++++++++++-------------- src/scss/narrativecard.scss | 3 +++ 6 files changed, 88 insertions(+), 60 deletions(-) diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 066cffd..7f20417 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -16,6 +16,8 @@ import Notification from './Notification.jsx'; import { parseDate } from '../js/utilities'; +import { injectNarrative } from '../js/utilities' + class Dashboard extends React.Component { constructor(props) { super(props); @@ -87,12 +89,13 @@ class Dashboard extends React.Component { return (
this.getCategoryColor(category) }} /> - {(this.props.app.narrative !== null) - ? - : '' - } + state, + // injectNarrative(0), mapDispatchToProps, )(Dashboard); diff --git a/src/components/NarrativeCard.js b/src/components/NarrativeCard.js index 67a6bbc..4526164 100644 --- a/src/components/NarrativeCard.js +++ b/src/components/NarrativeCard.js @@ -24,6 +24,8 @@ class NarrativeCard extends React.Component { } componentDidMount() { + if (!this.props.narrative) return + const step = this.props.narrative.steps[this.state.step]; this.props.onSelect([step]); } @@ -45,7 +47,7 @@ class NarrativeCard extends React.Component { renderClose() { return ( @@ -94,12 +88,12 @@ class Toolbar extends React.Component { return ''; } - renderToolbarTab(tabNum, label) { - const isActive = (this.state.tabNum === tabNum); + renderToolbarTab(_selected, label) { + const isActive = (this.state._selected === _selected); let classes = (isActive) ? 'toolbar-tab active' : 'toolbar-tab'; return ( -
{ this.toggleTab(tabNum); }}> +
{ this.selectTab(_selected); }}> timeline
{label}
@@ -126,12 +120,11 @@ class Toolbar extends React.Component { } renderToolbarPanels() { - let classes = (this.state.tabNum !== -1) ? 'toolbar-panels' : 'toolbar-panels folded'; - + let classes = (this.state._selected >= 0) ? 'toolbar-panels' : 'toolbar-panels folded'; return (
{this.renderClosePanel()} - + {this.renderToolbarNarrativePanel()} {this.renderToolbarTagPanel()} @@ -142,12 +135,12 @@ class Toolbar extends React.Component { renderToolbarNavs() { if (this.props.narratives) { return this.props.narratives.map((nar, idx) => { - const isActive = (idx === this.state.tab); + const isActive = (idx === this.state._selected); let classes = (isActive) ? 'toolbar-tab active' : 'toolbar-tab'; return ( -
{ this.toggleTab(idx); }}> +
{ this.selectTab(idx); }}>
{nar.label}
); @@ -176,7 +169,8 @@ class Toolbar extends React.Component { } render() { - const isNarrative = isNotNullNorUndefined(this.props.narrative); + const { isNarrative } = this.props + return (
{this.renderToolbarTabs()} diff --git a/src/js/utilities.js b/src/js/utilities.js index 4ba3755..0da7f7b 100644 --- a/src/js/utilities.js +++ b/src/js/utilities.js @@ -77,7 +77,7 @@ export function formatter(datetime) { * Debugging function: put in place of a mapStateToProps function to * view that source modal by default */ -function injectSource(id) { +export function injectSource(id) { return state => ({ ...state, app: { @@ -87,3 +87,20 @@ function injectSource(id) { }) } +/** + * Debugging function: put in place of a mapStateToProps function to + * view that narrative modal by default + */ +export function injectNarrative(idx) { + return state => { + console.log(state.domain.narratives) + return { + ...state, + app: { + ...state.app, + narrative: state.domain.narratives.length ? state.domain.narratives[idx] : null + } + } + } +} + diff --git a/src/reducers/app.js b/src/reducers/app.js index c8a8ea6..3725fce 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -33,25 +33,33 @@ function updateSelected(appState, action) { } function updateNarrative(appState, action) { - if (action.narrative === null) { - return Object.assign({}, appState, { - narrative: action.narrative, - }); - } else { - const dates = action.narrative.steps.map(n => parseDate(n.timestamp).getTime()) - let minDate = Math.min(...dates); - let maxDate = Math.max(...dates); - // Add some margin to the datetime extent - minDate = minDate - ((maxDate - minDate) / 20); - maxDate = maxDate + ((maxDate - minDate) / 20); - - return Object.assign({}, appState, { - narrative: action.narrative, - filters: Object.assign({}, appState.filters, { - timerange: [new Date(minDate), new Date(maxDate)] - }), - }); + console.log(action.narrative) + return { + ...appState, + narrative: action.narrative } + // if (action.narrative === null) { + // console.log(action.narrative) + // return Object.assign({}, appState, { + // narrative: action.narrative, + // }); + // } else { + // const dates = action.narrative.steps.map(n => parseDate(n.timestamp).getTime()) + // let minDate = Math.min(...dates); + // let maxDate = Math.max(...dates); + // // Add some margin to the datetime extent + // minDate = minDate - ((maxDate - minDate) / 20); + // maxDate = maxDate + ((maxDate - minDate) / 20); + // + // const output = Object.assign({}, appState, { + // narrative: action.narrative, + // filters: Object.assign({}, appState.filters, { + // timerange: [new Date(minDate), new Date(maxDate)] + // }), + // }); + // console.log(output) + // return output + // } } function updateTagFilters(appState, action) { diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss index ace0435..2987204 100644 --- a/src/scss/narrativecard.scss +++ b/src/scss/narrativecard.scss @@ -5,7 +5,10 @@ NARRATIVE INFO position: fixed; top: 10px; left: 10px; + // height: auto; + min-height: 500px; height: auto; + max-height: 500px; width: 370px; box-sizing: border-box; padding: 15px;