Merge pull request #103 from CatalystCode/handle-error

Show error page on dashboard load failure
CatalystCode · Nov 27, 2017 · e95695d · e95695d
2 parents 10acac9 + 5d250b2
commit e95695d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git 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
@@ -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 (
+      <div className="loadingPage">
+        <h1>An error occurred while loading the page: {this.state.error}</h1>
+      </div>
+    );
+  },
+
+  renderLoading() {
+    return (
+      <div className="loadingPage">
+        <h1>Loading {this.props.params.siteKey} watcher...</h1>
+      </div>
+    );
+  },
+
+  renderApp() {
     return (
-      this.state.bbox.length ? 
       <MuiThemeProvider>
-      <div id="app">
-        <Header id="header" flux={this.props.flux}
+        <div id="app">
+          <Header
+            id="header"
+            flux={this.props.flux}
             {...this.props.params}
             title={this.state.title}
             logo={this.state.logo}
             category={this.props.params.siteKey}
             language={this.state.language}
             supportedLanguages={this.state.supportedLanguages}
-            settings={this.state.settings} />
-        <div id="main">
-          <div id="content">
-            {this.props.children}
+            settings={this.state.settings}
+          />
+          <div id="main">
+            <div id="content">
+              {this.props.children}
+            </div>
           </div>
         </div>
-      </div>
-     </MuiThemeProvider> : 
-    <div className="loadingPage">
-      <h1>loading {this.props.params.siteKey} watcher...</h1>
-    </div>
-  )}
+      </MuiThemeProvider>
+    );
+  },
 });
diff --git a/src/stores/DataStore.js b/src/stores/DataStore.js
@@ -52,6 +52,7 @@ export const DataStore = Fluxxor.createStore({
             termFilters: new Set(),
             heatmapTileIds: [],
             fullTermList: new Map(),
+            error: null,
             bbox: [],
             zoomLevel: constants.HEATMAP_DEFAULT_ZOOM,
             maintopic: false,
@@ -91,6 +92,12 @@ export const DataStore = Fluxxor.createStore({
     },
 
     intializeSettings(graphqlResponse) {
+        if (graphqlResponse.error) {
+            this.dataStore.error = graphqlResponse.error;
+            this.emit("change");
+            return;
+        }
+
         const { terms, configuration, topics, dataSources, category, trustedSources } = graphqlResponse;
         const { datetimeSelection, timespanType } = this.dataStore;
         const { defaultLanguage, logo, title, targetBbox, supportedLanguages, defaultZoomLevel } = configuration;