diff --git a/src/actions/Dashboard/index.js b/src/actions/Dashboard/index.js index 3474e1e..34b8451 100644 --- a/src/actions/Dashboard/index.js +++ b/src/actions/Dashboard/index.js @@ -113,6 +113,7 @@ const methods = { self.dispatch(constants.DASHBOARD.INITIALIZE, results); } else { console.error(`[${error}] occured while fetching edges or site defintion`); + self.dispatch(constants.DASHBOARD.INITIALIZE, { error }); } }); }, diff --git a/src/routes/AppPage.js b/src/routes/AppPage.js index f09dbba..76049d0 100644 --- a/src/routes/AppPage.js +++ b/src/routes/AppPage.js @@ -5,8 +5,8 @@ import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import Fluxxor from 'fluxxor'; import Header from '../components/Header'; -const FluxMixin = Fluxxor.FluxMixin(React), - StoreWatchMixin = Fluxxor.StoreWatchMixin("DataStore"); +const FluxMixin = Fluxxor.FluxMixin(React); +const StoreWatchMixin = Fluxxor.StoreWatchMixin("DataStore"); export const AppPage = createReactClass({ mixins: [FluxMixin, StoreWatchMixin], @@ -20,27 +20,55 @@ export const AppPage = createReactClass({ }, render() { + if (this.state.bbox.length) { + return this.renderApp(); + } + + if (this.state.error) { + return this.renderError(); + } + + return this.renderLoading(); + }, + + renderError() { + return ( +
+

An error occurred while loading the page: {this.state.error}

+
+ ); + }, + + renderLoading() { + return ( +
+

Loading {this.props.params.siteKey} watcher...

+
+ ); + }, + + renderApp() { return ( - this.state.bbox.length ? -
-