Feature/code split reducers

app/javascript/analytics/dashboards.js

@@ -0,0 +1,32 @@
+export default {
+  selectDashboardCategory: {
+    category: 'Dashboards page',
+    action: 'View',
+    label: '[category]'
+  },
+  viewWidgetOnMap: {
+    category: 'Dashboards page',
+    action: 'User views a widget on the map',
+    label: '[widget]'
+  },
+  downloadDashboardPage: {
+    category: 'Dashboards page',
+    action: 'Download page',
+    label: '[country]'
+  },
+  visitMainMapFromDashboard: {
+    category: 'Dashboards page',
+    action: 'User clicks through to main map',
+    label: '[layers]'
+  },
+  changeWidgetSettings: {
+    category: 'Widget Settings',
+    action: 'User changes the widget settings',
+    label: '[widget]'
+  },
+  openWidgetSettings: {
+    category: 'Widget Settings',
+    action: 'User opens settings menu',
+    label: '[widget]'
+  }
+};

app/javascript/app/analytics.js

@@ -1,96 +1,34 @@
-import * as shareActions from 'components/modals/share/share-actions';
-import * as modalActions from 'components/modals/meta/meta-actions';
-import * as buttonActions from 'components/ui/button/button-actions';
-import * as widgetActions from 'components/widgets/actions';
-import { DASHBOARDS } from 'router';
+import ReactGA from 'react-ga';
 
-const allActions = {
-  ...shareActions,
-  ...buttonActions,
-  ...modalActions,
-  ...widgetActions
+import mapEvents from 'analytics/map';
+import sharedEvents from 'analytics/shared';
+import dashboardsEvents from 'analytics/dashboards';
+
+const { ANALYTICS_PROPERTY_ID } = process.env;
+let gaInitialized = false;
+
+export const initGA = () => {
+  if (ANALYTICS_PROPERTY_ID) {
+    if (!gaInitialized) {
+      ReactGA.initialize(ANALYTICS_PROPERTY_ID);
+      gaInitialized = true;
+    }
+  }
 };
-const actions = Object.keys(allActions).reduce(
-  (state, action) => ({
-    ...state,
-    [action]: allActions[action].toString()
-  }),
-  {}
-);
 
-export const ANALYTICS_EVENTS = [
-  {
-    name: actions.setShareData,
-    category: 'Country Page',
-    action: 'Share page',
-    label: payload => payload.country,
-    condition: payload => payload.title === 'Share this Dashboard'
-  },
-  {
-    name: DASHBOARDS,
-    category: 'Country Page',
-    action: 'View',
-    label: payload => payload && payload.query && payload.query.category
-  },
-  {
-    name: actions.buttonClicked,
-    category: 'Country Page',
-    action: 'User views a widget on the map',
-    label: payload => payload.widget,
-    condition: payload => payload.widget
-  },
-  {
-    name: actions.setModalMetaData,
-    category: 'Country Page',
-    action: 'Info',
-    label: payload => payload.title
-  },
-  {
-    name: actions.setShareData,
-    category: 'Country Page',
-    action: 'Share Widget',
-    label: payload => payload.subtitle,
-    condition: payload => payload.title === 'Share this widget'
-  },
-  {
-    name: actions.buttonClicked,
-    category: 'Country Page',
-    action: 'Download page',
-    label: payload => payload.country,
-    condition: payload => payload.title === 'download'
-  },
-  {
-    name: actions.buttonClicked,
-    category: 'Country Page',
-    action: 'User clicks through to main map',
-    label: payload => payload.layers,
-    condition: payload => payload.title === 'view-full-map'
-  },
-  {
-    name: actions.buttonClicked,
-    category: 'Country Page',
-    action: payload => `Share on ${payload.socialNetwork}`,
-    label: payload => payload.socialText,
-    condition: payload => payload.socialNetwork
-  },
-  {
-    name: actions.setShareCopied,
-    category: 'Country Page',
-    action: 'Copies embed code',
-    label: payload => payload.subtitle
-  },
-  {
-    name: actions.settingsItemSelected,
-    category: 'Country Widget Settings',
-    action: payload => `Change ${Object.keys(payload.value)[0]}`,
-    label: payload =>
-      `${payload.value[Object.keys(payload.value)[0]]} | ${payload.widget}`
-  },
-  {
-    name: actions.buttonClicked,
-    category: 'Country Page',
-    action: 'User opens settings menu',
-    label: payload => payload.label,
-    condition: payload => payload.event === 'open-settings'
+const events = {
+  ...mapEvents,
+  ...dashboardsEvents,
+  ...sharedEvents
+};
+
+export const handlePageTrack = location => {
+  initGA();
+  if (gaInitialized) {
+    ReactGA.set({ page: location.pathname });
+    ReactGA.pageview(window.location.href);
   }
-];
+};
+
+export const track = (key, data) =>
+  ReactGA && events[key] && ReactGA.event({ ...events[key], ...data });

app/javascript/app/index.js

@@ -1,20 +1,17 @@
 import 'babel-polyfill';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { PersistGate } from 'redux-persist/integration/react';
 import { HelmetProvider } from 'react-helmet-async';
 
 import configureStore from './store';
 import Root from './layouts/root';
 
-const { store, persistor } = configureStore();
+const store = configureStore();
 
 const App = () => (
   <Provider store={store}>
     <HelmetProvider>
-      <PersistGate loading={null} persistor={persistor}>
-        <Root />
-      </PersistGate>
+      <Root />
     </HelmetProvider>
   </Provider>
 );

app/javascript/app/layouts/root/component.jsx

@@ -32,6 +32,7 @@ class App extends PureComponent {
     const { route, loggedIn, metadata, isGFW, isTrase } = this.props;
     const { component, embed } = route;
     const isMapPage = component === 'map';
+
     return (
       <MediaQuery minWidth={SCREEN_M}>
         {isDesktop => (

app/javascript/app/layouts/root/selectors.js

@@ -4,12 +4,14 @@ import upperFirst from 'lodash/upperFirst';
 
 import { buildFullLocationName } from 'utils/format';
 
-const selectLoggedIn = state => !isEmpty(state.myGfw.data) || null;
+const selectLoggedIn = state => state.myGfw && !isEmpty(state.myGfw.data);
 const selectLocation = state => state.location && state.location.payload;
+const selectedCountries = state =>
+  state.countryData && state.countryData.countries;
+const selectedRegions = state => state.countryData && state.countryData.regions;
+const selectedSubRegion = state =>
+  state.countryData && state.countryData.subRegions;
 const selectQuery = state => state.location && state.location.query;
-const selectedCountries = state => state.countryData.countries;
-const selectedRegions = state => state.countryData.regions;
-const selectedSubRegion = state => state.countryData.subRegions;
 const selectPageLocation = state =>
   state.location && state.location.routesMap[state.location.type];
 
@@ -38,9 +40,9 @@ export const getMetadata = createSelector(
 
     if (!type) return metadata;
     if (
-      (adm0 && !adm0s.length) ||
-      (adm1 && !adm1s.length) ||
-      (adm2 && !adm2s.length)
+      (adm0 && (!adm0s || !adm0s.length)) ||
+      (adm1 && (!adm1s || !adm1s.length)) ||
+      (adm2 && (!adm2s || !adm2s.length))
     ) {
       return null;
     }

app/javascript/app/registry.js

@@ -0,0 +1,35 @@
+import { handleModule } from 'redux-tools';
+
+// As seen in http://nicolasgallagher.com/redux-modules-and-code-splitting/
+class ReducerRegistry {
+  constructor() {
+    this._emitChange = null;
+    this._reducers = {};
+  }
+
+  getReducers() {
+    return { ...this._reducers };
+  }
+
+  registerModule(name, module) {
+    const reducer = handleModule(module);
+    this._reducers = { ...this._reducers, [name]: reducer };
+    if (this._emitChange) {
+      this._emitChange(this.getReducers());
+    }
+  }
+
+  register(name, reducer) {
+    this._reducers = { ...this._reducers, [name]: reducer };
+    if (this._emitChange) {
+      this._emitChange(this.getReducers());
+    }
+  }
+
+  setChangeListener(listener) {
+    this._emitChange = listener;
+  }
+}
+
+const reducerRegistry = new ReducerRegistry();
+export default reducerRegistry;

app/javascript/app/router.js

@@ -1,8 +1,8 @@
 import { connectRoutes, NOT_FOUND, redirect } from 'redux-first-router';
 import createHistory from 'history/createBrowserHistory';
-import { handlePageTrack } from 'utils/analytics';
 import { decodeUrlForState, encodeStateForUrl } from 'utils/stateToUrl';
 import compact from 'lodash/compact';
+import { handlePageTrack } from './analytics';
 import { getNewMapRedirect } from './utils';
 
 const history = createHistory();