From 0336cafd148221abd38db60c843f1e3f765f1ba0 Mon Sep 17 00:00:00 2001
From: Clemens Wolff <clewolff@microsoft.com>
Date: Tue, 7 Nov 2017 12:52:37 -0500
Subject: [PATCH 1/3] Split up render method

---
 src/routes/AppPage.js | 42 +++++++++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/routes/AppPage.js b/src/routes/AppPage.js
index f09dbba..1df934a 100644
--- a/src/routes/AppPage.js
+++ b/src/routes/AppPage.js
@@ -20,27 +20,43 @@ export const AppPage = createReactClass({
   },
 
   render() {
+    if (this.state.bbox.length) {
+      return this.renderApp();
+    }
+
+    return this.renderLoading();
+  },
+
+  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>
+    );
+  },
 });

From 521ea75cdb63f8bb3940166040ba379092507295 Mon Sep 17 00:00:00 2001
From: Clemens Wolff <clewolff@microsoft.com>
Date: Tue, 7 Nov 2017 12:59:18 -0500
Subject: [PATCH 2/3] Avoid multiple declarations per statement

---
 src/routes/AppPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/AppPage.js b/src/routes/AppPage.js
index 1df934a..6111880 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],

From 5d250b23e52f22a933881d36fb2b22025d023d36 Mon Sep 17 00:00:00 2001
From: Clemens Wolff <clewolff@microsoft.com>
Date: Tue, 7 Nov 2017 13:47:25 -0500
Subject: [PATCH 3/3] Render error page on dashboard load failure

See https://github.com/CatalystCode/project-fortis-pipeline/issues/201
---
 src/actions/Dashboard/index.js |  1 +
 src/routes/AppPage.js          | 12 ++++++++++++
 src/stores/DataStore.js        |  7 +++++++
 3 files changed, 20 insertions(+)

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 6111880..76049d0 100644
--- a/src/routes/AppPage.js
+++ b/src/routes/AppPage.js
@@ -24,9 +24,21 @@ export const AppPage = createReactClass({
       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">
diff --git a/src/stores/DataStore.js b/src/stores/DataStore.js
index 6091d40..68a62b3 100644
--- 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;