Feature: abstract caching helper to request level to make code simpler

app/javascript/components/map/map.js

@@ -15,20 +15,15 @@ import actions from './map-actions';
 import reducers, { initialState } from './map-reducers';
 import { getLayers } from './map-selectors';
 
-const mapStateToProps = (
-  { map, countryData, widgets, cache },
-  { widgetKey }
-) => {
+const mapStateToProps = ({ map, countryData, widgets }, { widgetKey }) => {
   const widget = widgets[widgetKey];
   const widgetSettings = widget && widget.settings;
   const activeLayers = widgetSettings && widgetSettings.layers;
 
   return {
     ...map,
     ...countryData.geostore,
-    loading:
-      map.loading || cache.cacheListLoading || countryData.isGeostoreLoading,
-    cacheLoading: cache.cacheListLoading,
+    loading: map.loading || countryData.isGeostoreLoading,
     settings: { ...map.settings, ...widgetSettings },
     layers: getLayers({ layers: activeLayers, layerSpec: map.layerSpec }),
     layersKeys: activeLayers
@@ -42,25 +37,15 @@ class MapContainer extends PureComponent {
   }
 
   componentDidMount() {
-    const { layersKeys } = this.props;
+    const { layersKeys, getLayerSpec } = this.props;
+    getLayerSpec();
     this.buildMap();
     this.setLayers(layersKeys);
   }
 
   componentWillReceiveProps(nextProps) {
-    const {
-      bounds,
-      layersKeys,
-      settings,
-      options,
-      geojson,
-      getLayerSpec,
-      cacheLoading
-    } = nextProps;
+    const { bounds, layersKeys, settings, options, geojson } = nextProps;
     const { zoom } = options;
-    if (cacheLoading !== this.props.cacheLoading) {
-      getLayerSpec();
-    }
     // sync geostore with map
     if (!isEmpty(bounds) && !isEqual(bounds, this.props.bounds)) {
       this.boundMap(bounds);
@@ -198,8 +183,7 @@ MapContainer.propTypes = {
   options: PropTypes.object,
   getLayerSpec: PropTypes.func.isRequired,
   setMapZoom: PropTypes.func.isRequired,
-  geojson: PropTypes.object,
-  cacheLoading: PropTypes.bool
+  geojson: PropTypes.object
 };
 
 export { reducers, initialState, actions };

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

@@ -3,7 +3,6 @@ import React, { PureComponent } from 'react';
 import Widgets from 'components/widgets';
 import CountryDataProvider from 'providers/country-data-provider';
 import WhitelistsProvider from 'providers/whitelists-provider';
-import CacheProvider from 'providers/cache-provider';
 import Share from 'components/modals/share';
 import ModalMeta from 'components/modals/meta';
 
@@ -18,7 +17,6 @@ class Embed extends PureComponent {
         </div>
         <Share />
         <ModalMeta />
-        <CacheProvider />
         <CountryDataProvider />
         <WhitelistsProvider />
       </div>

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

@@ -1,6 +1,7 @@
 export const initialState = {
-  loading: true,
+  loading: false,
   error: false,
+  data: {},
   config: {
     sentences: {
       initial:
@@ -11,9 +12,7 @@ export const initialState = {
         'In 2010, {location} had {extent} of natural forest, extending over {percentage} of its land area. In {year}, it lost {loss} of natural forest, equivalent to {emission} of CO₂ of emissions.'
     }
   },
-  data: {},
   settings: {
-    indicator: 'gadm28',
     threshold: 30
   }
 };

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

@@ -16,7 +16,7 @@ import HeaderComponent from './header-component';
 
 const actions = { ...ownActions, ...shareActions };
 
-const mapStateToProps = ({ countryData, location, header, widgets, cache }) => {
+const mapStateToProps = ({ countryData, location, header, widgets }) => {
   const {
     isCountriesLoading,
     isRegionsLoading,
@@ -37,12 +37,10 @@ const mapStateToProps = ({ countryData, location, header, widgets, cache }) => {
   }/tree_cover_stats_2016${country ? `_${country}` : ''}.xlsx`;
   const locationOptions = { ...countryData };
   const locationNames = getAdminsSelected({ ...countryData, ...location });
-  const cacheLoading = cache.cacheListLoading;
 
   return {
     ...header,
     loading: countryDataLoading || header.loading,
-    cacheLoading,
     downloadLink,
     forestAtlasLink,
     externalLinks,
@@ -121,12 +119,14 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 };
 
 class HeaderContainer extends PureComponent {
+  componentWillMount() {
+    const { payload, settings, getHeaderData } = this.props;
+    getHeaderData({ ...payload, ...settings });
+  }
+
   componentWillReceiveProps(nextProps) {
-    const { cacheLoading, payload, settings, getHeaderData } = nextProps;
-    if (
-      cacheLoading !== this.props.cacheLoading ||
-      !isEqual(payload, this.props.payload)
-    ) {
+    const { payload, settings, getHeaderData } = nextProps;
+    if (!isEqual(payload, this.props.payload)) {
       getHeaderData({ ...payload, ...settings });
     }
   }
@@ -141,8 +141,7 @@ class HeaderContainer extends PureComponent {
 HeaderContainer.propTypes = {
   payload: PropTypes.object.isRequired,
   getHeaderData: PropTypes.func.isRequired,
-  settings: PropTypes.object.isRequired,
-  cacheLoading: PropTypes.bool
+  settings: PropTypes.object.isRequired
 };
 
 export { actions, reducers, initialState };

app/javascript/pages/dashboards/index.js

@@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import { handleActionTrack } from 'utils/analytics';
-import { cacheMiddleware } from 'utils/request';
 
 import 'react-tippy/dist/tippy.css';
 import 'styles/styles.scss';
@@ -19,8 +18,7 @@ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const middlewares = applyMiddleware(
   thunk,
   router.middleware,
-  handleActionTrack,
-  cacheMiddleware
+  handleActionTrack
 );
 const store = createStore(
   reducers,

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import Sticky from 'react-stickynode';
 import { SCREEN_M, SCREEN_MOBILE } from 'utils/constants';
 
-import CacheProvider from 'providers/cache-provider';
 import CountryDataProvider from 'providers/country-data-provider';
 import WhitelistsProvider from 'providers/whitelists-provider';
 
@@ -83,7 +82,6 @@ class Page extends PureComponent {
         <Share />
         <ModalMeta />
         {widgetAnchor && <ScrollTo target={widgetAnchor} />}
-        <CacheProvider />
         <CountryDataProvider />
         <WhitelistsProvider />
         <Meta

app/javascript/pages/dashboards/page/page.js

@@ -11,7 +11,7 @@ import Component from './page-component';
 
 const actions = { ...mapActions };
 
-const mapStateToProps = ({ cache, countryData, whitelists, location, map }) => {
+const mapStateToProps = ({ countryData, whitelists, location, map }) => {
   const category = (location.query && location.query.category) || 'summary';
   const { regionWhitelist, countryWhitelist } = whitelists;
   const widgetHash =
@@ -31,7 +31,6 @@ const mapStateToProps = ({ cache, countryData, whitelists, location, map }) => {
   return {
     showMapMobile: map.showMapMobile,
     links: getLinks({ categories: CATEGORIES, ...location, category }),
-    isCacheListLoading: cache.cacheListLoading,
     isGeostoreLoading: countryData.isGeostoreLoading,
     category,
     widgets,

app/javascript/pages/dashboards/reducers.js

@@ -13,7 +13,6 @@ import * as MapComponent from 'components/map';
 import * as WidgetsComponent from 'components/widgets';
 
 // Providers
-import * as cacheProviderComponent from 'providers/cache-provider';
 import * as countryDataProviderComponent from 'providers/country-data-provider';
 import * as whitelistsProviderComponent from 'providers/whitelists-provider';
 
@@ -28,7 +27,6 @@ const componentsReducers = {
 
 // Provider Reducers
 const providersReducers = {
-  cache: handleActions(cacheProviderComponent),
   countryData: handleActions(countryDataProviderComponent),
   whitelists: handleActions(whitelistsProviderComponent)
 };

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

@@ -5,47 +5,52 @@ import PropTypes from 'prop-types';
 import * as actions from './country-data-provider-actions';
 import reducers, { initialState } from './country-data-provider-reducers';
 
-const mapStateToProps = ({ location, cache }) => ({
-  location: location.payload,
-  cacheLoading: cache.cacheListLoading
+const mapStateToProps = ({ location }) => ({
+  location: location.payload
 });
 
 class CountryDataProvider extends PureComponent {
-  componentWillReceiveProps(nextProps) {
-    const {
-      cacheLoading,
-      location: { country, region, subRegion }
-    } = nextProps;
+  componentDidMount() {
     const {
+      location: { country, region, subRegion },
       getCountries,
       getRegions,
       getSubRegions,
       getGeostore,
-      getCountryLinks,
-      setGeostore
+      getCountryLinks
+    } = this.props;
+    getCountries();
+
+    if (country) {
+      getCountryLinks();
+      getRegions(country);
+      getGeostore(country, region, subRegion);
+    }
+    if (region) {
+      getSubRegions(country, region);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { location: { country, region, subRegion } } = nextProps;
+    const {
+      getRegions,
+      getSubRegions,
+      getGeostore,
+      setGeostore,
+      getCountryLinks
     } = this.props;
     const hasCountryChanged =
       country !== this.props.location.country && country;
     const hasRegionChanged = region !== this.props.location.region;
     const hasSubRegionChanged = subRegion !== this.props.location.subRegion;
 
-    if (cacheLoading !== this.props.cacheLoading) {
-      getCountries();
-      if (country) {
-        getRegions(country);
-        getGeostore(country, region, subRegion);
-      }
-      if (region) {
-        getSubRegions(country, region);
-      }
-      getCountryLinks();
-    }
-
     if (!country && country !== this.props.location.country) {
       setGeostore({});
     }
 
     if (hasCountryChanged) {
+      getCountryLinks();
       getRegions(country);
       if (region) {
         getSubRegions(country, region);
@@ -72,7 +77,6 @@ class CountryDataProvider extends PureComponent {
 
 CountryDataProvider.propTypes = {
   location: PropTypes.object.isRequired,
-  cacheLoading: PropTypes.bool.isRequired,
   getCountries: PropTypes.func.isRequired,
   getRegions: PropTypes.func.isRequired,
   getSubRegions: PropTypes.func.isRequired,