Feature/improve page load with cache

app/javascript/components/map/map-actions.js

@@ -8,26 +8,21 @@ const setMapOptions = createAction('setMapOptions');
 const setMapZoom = createAction('setMapZoom');
 const setShowMapMobile = createAction('setShowMapMobile');
 
-const getLayerSpec = createThunkAction(
-  'getLayerSpec',
-  () => (dispatch, state) => {
-    if (!state().map.setLayersLoading) {
-      dispatch(setLayerSpecLoading({ loading: true, error: false }));
-      fetchLayerSpec()
-        .then(response => {
-          const layerSpec = {};
-          (response.data.rows || []).forEach(layer => {
-            layerSpec[layer.slug] = layer;
-          });
-          dispatch(setLayerSpec(layerSpec));
-        })
-        .catch(error => {
-          console.info(error);
-          dispatch(setLayerSpecLoading({ loading: false, error: true }));
-        });
-    }
-  }
-);
+const getLayerSpec = createThunkAction('getLayerSpec', () => dispatch => {
+  dispatch(setLayerSpecLoading({ loading: true, error: false }));
+  fetchLayerSpec()
+    .then(response => {
+      const layerSpec = {};
+      (response.data.rows || []).forEach(layer => {
+        layerSpec[layer.slug] = layer;
+      });
+      dispatch(setLayerSpec(layerSpec));
+    })
+    .catch(error => {
+      console.info(error);
+      dispatch(setLayerSpecLoading({ loading: false, error: true }));
+    });
+});
 
 export default {
   setLayerSpecLoading,

app/javascript/components/map/map-reducers.js

@@ -1,5 +1,5 @@
 export const initialState = {
-  loading: false,
+  loading: true,
   error: false,
   layerSpec: {},
   options: {

app/javascript/components/widgets/widgets.js

@@ -12,7 +12,7 @@ import {
 } from './selectors';
 
 const mapStateToProps = (
-  { location, countryData, whitelists, widgets, cache },
+  { location, countryData, whitelists, widgets },
   ownProps
 ) => {
   const { activeWidget } = ownProps;
@@ -33,8 +33,7 @@ const mapStateToProps = (
     isRegionsLoading ||
     isSubRegionsLoading ||
     countryWhitelistLoading ||
-    regionWhitelistLoading ||
-    cache.cacheListLoading;
+    regionWhitelistLoading;
 
   const { query, payload } = location;
   const { region } = payload;

app/javascript/pages/dashboards/header/header-actions.js

@@ -13,44 +13,42 @@ export const setHeaderData = createAction('setHeaderData');
 
 export const getHeaderData = createThunkAction(
   'getHeaderData',
-  params => (dispatch, state) => {
-    if (!state().header.loading) {
-      dispatch(setHeaderLoading({ loading: true, error: false }));
-      axios
-        .all([
-          getExtent(params),
-          getLoss(params),
-          getLoss({ ...params, forestType: 'plantations' })
-        ])
-        .then(
-          axios.spread((totalExtent, totalLoss, plantationsLoss) => {
-            const extent = totalExtent.data.data;
-            const loss = totalLoss.data.data;
-            const plantations = plantationsLoss.data.data;
-            const groupedLoss = loss && groupBy(loss, 'year');
-            const latestYear = max(Object.keys(groupedLoss));
-            const summedLoss = sumBy(groupedLoss[latestYear], 'area');
-            const summedEmissions = sumBy(groupedLoss[latestYear], 'emissions');
-            const data = {
-              totalArea: (extent[0] && extent[0].total_area) || 0,
-              extent: (extent[0] && extent[0].value) || 0,
-              totalLoss: {
-                area: summedLoss,
-                year: latestYear,
-                emissions: summedEmissions
-              },
-              plantationsLoss:
-                plantations && plantations.length
-                  ? reverse(sortBy(plantations, 'year'))[0]
-                  : {}
-            };
-            dispatch(setHeaderData(data));
-          })
-        )
-        .catch(error => {
-          dispatch(setHeaderLoading({ loading: false, error: true }));
-          console.info(error);
-        });
-    }
+  params => dispatch => {
+    dispatch(setHeaderLoading({ loading: true, error: false }));
+    axios
+      .all([
+        getExtent(params),
+        getLoss(params),
+        getLoss({ ...params, forestType: 'plantations' })
+      ])
+      .then(
+        axios.spread((totalExtent, totalLoss, plantationsLoss) => {
+          const extent = totalExtent.data.data;
+          const loss = totalLoss.data.data;
+          const plantations = plantationsLoss.data.data;
+          const groupedLoss = loss && groupBy(loss, 'year');
+          const latestYear = max(Object.keys(groupedLoss));
+          const summedLoss = sumBy(groupedLoss[latestYear], 'area');
+          const summedEmissions = sumBy(groupedLoss[latestYear], 'emissions');
+          const data = {
+            totalArea: (extent[0] && extent[0].total_area) || 0,
+            extent: (extent[0] && extent[0].value) || 0,
+            totalLoss: {
+              area: summedLoss,
+              year: latestYear,
+              emissions: summedEmissions
+            },
+            plantationsLoss:
+              plantations && plantations.length
+                ? reverse(sortBy(plantations, 'year'))[0]
+                : {}
+          };
+          dispatch(setHeaderData(data));
+        })
+      )
+      .catch(error => {
+        dispatch(setHeaderLoading({ loading: false, error: true }));
+        console.info(error);
+      });
   }
 );

app/javascript/pages/dashboards/header/header-component.js

@@ -68,24 +68,27 @@ class Header extends PureComponent {
           <div className="columns small-12 large-6">
             <div className="select-container">
               {!payload.country && <h3>{payload.type || 'Global'}</h3>}
-              <Dropdown
-                theme="theme-dropdown-dark"
-                placeholder="Select a country"
-                noItemsFound="No country found"
-                noSelectedValue="Select a country"
-                value={locationNames.country}
-                options={locationOptions.countries}
-                onChange={country => handleCountryChange(country, query)}
-                searchable
-                disabled={loading}
-                tooltip={{
-                  text: 'Choose the country you want to explore',
-                  delay: 1000
-                }}
-                arrowPosition="left"
-                clearable
-              />
+              {locationOptions.countries && (
+                <Dropdown
+                  theme="theme-dropdown-dark"
+                  placeholder="Select a country"
+                  noItemsFound="No country found"
+                  noSelectedValue="Select a country"
+                  value={locationNames.country}
+                  options={locationOptions.countries}
+                  onChange={country => handleCountryChange(country, query)}
+                  searchable
+                  disabled={loading}
+                  tooltip={{
+                    text: 'Choose the country you want to explore',
+                    delay: 1000
+                  }}
+                  arrowPosition="left"
+                  clearable
+                />
+              )}
               {payload.country &&
+                locationOptions.countries &&
                 locationOptions.regions &&
                 locationOptions.regions.length > 1 && (
                   <Dropdown
@@ -109,6 +112,7 @@ class Header extends PureComponent {
                   />
                 )}
               {payload.region &&
+                locationOptions.regions &&
                 locationNames.region &&
                 locationNames.region.value &&
                 locationOptions.subRegions &&

app/javascript/pages/dashboards/header/header-reducers.js

@@ -1,5 +1,5 @@
 export const initialState = {
-  loading: false,
+  loading: true,
   error: false,
   config: {
     sentences: {

app/javascript/pages/dashboards/header/header.js

@@ -37,7 +37,7 @@ const mapStateToProps = ({ countryData, location, header, widgets, cache }) => {
 
   return {
     ...header,
-    loading: countryDataLoading || header.loading || cacheLoading,
+    loading: countryDataLoading || header.loading,
     cacheLoading,
     forestAtlasLink,
     externalLinks,

app/javascript/providers/country-data-provider/country-data-provider-actions.js

@@ -31,32 +31,30 @@ export const setCountryLinks = createAction('setCountryLinks');
 
 export const getCountries = createThunkAction(
   'getCountries',
-  () => (dispatch, state) => {
-    if (!state().countryData.isCountriesLoading) {
-      dispatch(setCountriesLoading(true));
-      axios
-        .all([getCountriesProvider(), getFAOCountriesProvider()])
-        .then(
-          axios.spread((gadm28Countries, faoCountries) => {
-            const allCountries = uniqBy(
-              [...gadm28Countries.data.rows, ...faoCountries.data.rows],
-              'iso'
-            );
-            const countries = uniqBy(
-              allCountries.filter(c => c.iso !== 'XCA'),
-              'iso'
-            );
-            dispatch(setGadmCountries(gadm28Countries.data.rows));
-            dispatch(setFAOCountries(faoCountries.data.rows));
-            dispatch(setCountries(countries));
-            dispatch(setCountriesLoading(false));
-          })
-        )
-        .catch(error => {
+  () => dispatch => {
+    dispatch(setCountriesLoading(true));
+    axios
+      .all([getCountriesProvider(), getFAOCountriesProvider()])
+      .then(
+        axios.spread((gadm28Countries, faoCountries) => {
+          const allCountries = uniqBy(
+            [...gadm28Countries.data.rows, ...faoCountries.data.rows],
+            'iso'
+          );
+          const countries = uniqBy(
+            allCountries.filter(c => c.iso !== 'XCA'),
+            'iso'
+          );
+          dispatch(setGadmCountries(gadm28Countries.data.rows));
+          dispatch(setFAOCountries(faoCountries.data.rows));
+          dispatch(setCountries(countries));
           dispatch(setCountriesLoading(false));
-          console.info(error);
-        });
-    }
+        })
+      )
+      .catch(error => {
+        dispatch(setCountriesLoading(false));
+        console.info(error);
+      });
   }
 );
 

app/javascript/providers/country-data-provider/country-data-provider-reducers.js

@@ -1,7 +1,7 @@
 import { sortByKey } from 'utils/data';
 
 export const initialState = {
-  isCountriesLoading: false,
+  isCountriesLoading: true,
   isRegionsLoading: false,
   isSubRegionsLoading: false,
   isGeostoreLoading: false,