diff --git a/src/actions/index.js b/src/actions/index.js index 8d7a462..3dd6078 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -101,6 +101,7 @@ export function fetchDomain () { if (Object.values(result).some(resp => resp.hasOwnProperty('error'))) { throw new Error('Some URLs returned negative. If you are in development, check the server is running') } + dispatch(toggleFetchingDomain()) return result }) .catch(err => { @@ -192,6 +193,20 @@ export function toggleFilter (filter, value) { } } +export const SET_LOADING = 'SET_LOADING' +export function setLoading () { + return { + type: SET_LOADING + } +} + +export const SET_NOT_LOADING = 'SET_NOT_LOADING' +export function setNotLoading () { + return { + type: SET_NOT_LOADING + } +} + export const UPDATE_TIMERANGE = 'UPDATE_TIMERANGE' export function updateTimeRange (timerange) { return { diff --git a/src/components/Layout.js b/src/components/Layout.js index 9811584..863b36e 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -219,6 +219,7 @@ class Dashboard extends React.Component { )} diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index 0ac6351..c2aab56 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -1,7 +1,9 @@ import React from 'react' +import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import * as d3 from 'd3' import * as selectors from '../selectors' +import { setLoading, setNotLoading } from '../actions' import hash from 'object-hash' import copy from '../common/data/copy.json' @@ -376,6 +378,8 @@ class Timeline extends React.Component { onSelect={this.props.methods.onSelect} dims={dims} features={this.props.features} + setLoading={this.props.actions.setLoading} + setNotLoading={this.props.actions.setNotLoading} /> @@ -409,4 +413,13 @@ function mapStateToProps (state) { } } -export default connect(mapStateToProps)(Timeline) +function mapDispatchToProps (dispatch) { + return { + actions: bindActionCreators({ setLoading, setNotLoading }, dispatch) + } +} + +export default connect( + mapStateToProps, + mapDispatchToProps +)(Timeline) diff --git a/src/components/presentational/Timeline/Events.js b/src/components/presentational/Timeline/Events.js index f1b6e46..b9008c9 100644 --- a/src/components/presentational/Timeline/Events.js +++ b/src/components/presentational/Timeline/Events.js @@ -69,7 +69,9 @@ const TimelineEvents = ({ onSelect, transitionDuration, dims, - features + features, + setLoading, + setNotLoading }) => { const narIds = narrative ? narrative.steps.map(s => s.id) : [] diff --git a/src/reducers/app.js b/src/reducers/app.js index 24d42a7..0de7e37 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -20,7 +20,9 @@ import { TOGGLE_NOTIFICATIONS, TOGGLE_COVER, FETCH_ERROR, - FETCH_SOURCE_ERROR + FETCH_SOURCE_ERROR, + SET_LOADING, + SET_NOT_LOADING } from '../actions' function updateHighlighted (appState, action) { @@ -212,6 +214,20 @@ function fetchSourceError (appState, action) { } } +function setLoading (appState) { + return { + ...appState, + loading: true + } +} + +function setNotLoading (appState) { + return { + ...appState, + loading: false + } +} + function app (appState = initial.app, action) { switch (action.type) { case UPDATE_HIGHLIGHTED: @@ -254,6 +270,10 @@ function app (appState = initial.app, action) { return fetchError(appState, action) case FETCH_SOURCE_ERROR: return fetchSourceError(appState, action) + case SET_LOADING: + return setLoading(appState) + case SET_NOT_LOADING: + return setNotLoading(appState) default: return appState } diff --git a/src/store/initial.js b/src/store/initial.js index 978940a..30c822b 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -93,7 +93,8 @@ const initial = { title: 'project title', subtitle: 'project subtitle', description: 'A description of the project goes here.\n\nThis description may contain markdown.\n\n# This is a large title, for example.\n\n## Whereas this is a slightly smaller title.\n\nCheck out docs/custom-covers.md in the [Timemap GitHub repo](https://github.com/forensic-architecture/timemap) for more information around how to specify custom covers.' - } + }, + loading: false }, /*