Fix results page error handling

climatescope · Nov 6, 2018 · e014f1b · e014f1b
1 parent 5cae568
commit e014f1b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 19 deletions.
diff --git a/app/assets/scripts/redux/geographies.js b/app/assets/scripts/redux/geographies.js
@@ -27,7 +27,7 @@ export function receiveGeographies (data, error = null) {
 
 export function fetchGeographies () {
   return fetchDispatchCacheFactory({
-    statePath: 'geographies.geographiesList',
+    statePath: 'geographies.list',
     url: `${baseurl}/api/results.json`,
     requestFn: requestGeographies,
     receiveFn: receiveGeographies
@@ -117,7 +117,7 @@ export function receiveGeographiesMeta (data, error = null) {
 
 export function fetchGeographiesMeta () {
   return fetchDispatchCacheFactory({
-    statePath: 'geographiesMeta.geographiesMetaList',
+    statePath: 'geographies.meta',
     url: `${baseurl}/api/geographies.json`,
     requestFn: requestGeographiesMeta,
     receiveFn: receiveGeographiesMeta,
@@ -171,6 +171,7 @@ const geographiesMetaReducerInitialState = {
 function geographiesMetaReducer (state = geographiesMetaReducerInitialState, action) {
   return baseAPIReducer(state, action, 'GEOGRAPHIES_META')
 }
+
 // /////////////////////////////////////////////////////////////////////////////
 // Combine reducers and export
 // /////////////////////////////////////////////////////////////////////////////

diff --git a/app/assets/scripts/views/geographies-page.js b/app/assets/scripts/views/geographies-page.js
@@ -75,7 +75,7 @@ class NavBar extends React.PureComponent {
   }
 
   render () {
-    const { isSticky, style, currentItem, geography } = this.props
+    const { isSticky, style, currentItem } = this.props
 
     const activeItem = (this.menuItems.find(i => i.id === currentItem) || { label: 'Sections' })
 
@@ -186,18 +186,9 @@ class Geography extends React.Component {
     return geo ? geo.bounds : []
   }
 
-  getChartData (name) {
+  getChartData (id) {
     const { receivedAt, getData } = this.props.geography
-
-    const chart = get(getData(), 'charts', []).find(o => o.meta.title === name)
-    const title = get(chart, ['meta', 'title'], '')
-    return memoizedComputeAreaChartData(chart, renewableTypes, `${title}-${receivedAt}`)
-  }
-
-  getPowerGenerarionChart () {
-    const { receivedAt, getData } = this.props.geography
-
-    const chart = get(getData(), 'charts', []).find(o => o.meta.title === 'Power generation')
+    const chart = get(getData(), 'charts', []).find(o => o.id === id)
     const title = get(chart, ['meta', 'title'], '')
     return memoizedComputeAreaChartData(chart, renewableTypes, `${title}-${receivedAt}`)
   }
@@ -210,8 +201,8 @@ class Geography extends React.Component {
       return <UhOh />
     }
 
-    const installedChart = this.getChartData('Installed capacity')
-    const powerGenChart = this.getChartData('Power generation')
+    const installedChart = this.getChartData('installedCapacity')
+    const powerGenChart = this.getChartData('powerGeneration')
 
     return (
       <App className='page--has-hero' pageTitle={geography.name || 'Geograpghy'} >

diff --git a/app/assets/scripts/views/results.js b/app/assets/scripts/views/results.js
@@ -100,9 +100,11 @@ class Results extends React.Component {
   }
 
   getRankedGeographies () {
-    const { getData } = this.props.geographiesList
+    const { getData, hasError } = this.props.geographiesList
     const { sliders, region } = this.state
 
+    if (hasError()) return []
+
     let tableData = getData([])
       // Filter by active region
       .filter(geography => {
@@ -210,6 +212,28 @@ class Results extends React.Component {
 
   render () {
     const { region } = this.state
+    const { hasError } = this.props.geographiesList
+
+    if (hasError()) {
+      return (
+        <App pageTitle='Results'>
+          <section className='inpage inpage--hub'>
+            <header className='inpage__header'>
+              <div className='inner'>
+                <div className='inpage__headline'><h1 className='inpage__title'>Results</h1></div>
+              </div>
+            </header>
+            <div className='inpage__body'>
+              <div className='inner'>
+                <div className='col col--main prose'>
+                  <p>Something went wrong. Try again later.</p>
+                </div>
+              </div>
+            </div>
+          </section>
+        </App>
+      )
+    }
 
     const rankedGeographies = this.getRankedGeographies()
     const highlightISO = rankedGeographies.map(g => g.iso)
@@ -268,7 +292,7 @@ function mapStateToProps (state, props) {
   const geographiesList = wrapApiResult(state.geographies.list)
 
   // Compute slider options
-  const { isReady, getData } = geographiesList
+  const { isReady, hasError, getData } = geographiesList
   let sliders = [
     // {
     //   id: 'fundamentals',
@@ -277,7 +301,7 @@ function mapStateToProps (state, props) {
     // }
   ]
 
-  if (isReady()) {
+  if (isReady() && !hasError()) {
     // All geographies have the same topics. Acess 1st one.
     const topics = getData()[0].topics
     sliders = topics.map(t => ({