Simplify analytics calls

17 files changed, 37 insertions, 89 deletions

diff --git a/src/config.js b/src/config.js
index aecba45be..0b377f62d 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,7 @@
 import electron from 'electron';
 import path from 'path';
+import isDevMode from 'electron-is-dev';
+
 import { asarPath } from './helpers/asar-helpers';
 
 const app = process.type === 'renderer' ? electron.remote.app : electron.app;
@@ -9,7 +11,7 @@ export const CHECK_INTERVAL = 1000 * 3600; // How often should we perform checks
 export const LOCAL_API = 'http://localhost:3000';
 export const DEV_API = 'https://dev.franzinfra.com';
 export const LIVE_API = 'https://api.franzinfra.com';
-export const GA_ID = 'UA-74126766-10';
+export const GA_ID = !isDevMode ? 'UA-74126766-10' : 'UA-74126766-12';
 
 export const DEFAULT_APP_SETTINGS = {
   autoLaunchInBackground: false,
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
index 762929dc6..e63f40c06 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
+import { ThemeProvider } from 'react-jss';
+import { theme } from '@meetfranz/theme';
 
 import AuthLayout from '../../components/auth/AuthLayout';
 import AppStore from '../../stores/AppStore';
@@ -21,30 +23,38 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer
     const {
       stores, actions, children, location,
     } = this.props;
-    const { app, features, globalError } = stores;
+    const {
+      app, features, globalError, settings,
+    } = stores;
 
     const isLoadingBaseFeatures = features.defaultFeaturesRequest.isExecuting
       && !features.defaultFeaturesRequest.wasExecuted;
 
+    const themeType = theme(settings.app.darkMode ? 'dark' : 'default');
+
     if (isLoadingBaseFeatures) {
       return (
-        <AppLoader />
+        <ThemeProvider theme={theme(themeType)}>
+          <AppLoader />
+        </ThemeProvider>
       );
     }
 
     return (
-      <AuthLayout
-        error={globalError.response}
-        pathname={location.pathname}
-        isOnline={app.isOnline}
-        isAPIHealthy={!app.healthCheckRequest.isError}
-        retryHealthCheck={actions.app.healthCheck}
-        isHealthCheckLoading={app.healthCheckRequest.isExecuting}
-        isFullScreen={app.isFullScreen}
-        darkMode={app.isSystemDarkModeEnabled}
-      >
-        {children}
-      </AuthLayout>
+      <ThemeProvider theme={theme(themeType)}>
+        <AuthLayout
+          error={globalError.response}
+          pathname={location.pathname}
+          isOnline={app.isOnline}
+          isAPIHealthy={!app.healthCheckRequest.isError}
+          retryHealthCheck={actions.app.healthCheck}
+          isHealthCheckLoading={app.healthCheckRequest.isExecuting}
+          isFullScreen={app.isFullScreen}
+          darkMode={app.isSystemDarkModeEnabled}
+        >
+          {children}
+        </AuthLayout>
+      </ThemeProvider>
     );
   }
 }
diff --git a/src/containers/auth/ImportScreen.js b/src/containers/auth/ImportScreen.js
index fc46f8b54..4a93891d6 100644
--- a/src/containers/auth/ImportScreen.js
+++ b/src/containers/auth/ImportScreen.js
@@ -3,13 +3,8 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Import from '../../components/auth/Import';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 export default @inject('stores', 'actions') @observer class ImportScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Import');
-  }
-
   render() {
     const { actions, stores } = this.props;
 
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
index 26bf97038..66afaf7e1 100644
--- a/src/containers/auth/InviteScreen.js
+++ b/src/containers/auth/InviteScreen.js
@@ -2,13 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Invite from '../../components/auth/Invite';
-import { gaPage } from '../../lib/analytics';
 
 export default @inject('stores', 'actions') @observer class InviteScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Invite');
-  }
-
   render() {
     const { actions } = this.props;
 
diff --git a/src/containers/auth/LoginScreen.js b/src/containers/auth/LoginScreen.js
index 865bd38f8..e5ee10785 100644
--- a/src/containers/auth/LoginScreen.js
+++ b/src/containers/auth/LoginScreen.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Login from '../../components/auth/Login';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -12,10 +11,6 @@ export default @inject('stores', 'actions') @observer class LoginScreen extends
     error: globalErrorPropType.isRequired,
   };
 
-  componentDidMount() {
-    gaPage('Auth/Login');
-  }
-
   render() {
     const { actions, stores, error } = this.props;
     return (
diff --git a/src/containers/auth/PasswordScreen.js b/src/containers/auth/PasswordScreen.js
index 236fd2031..5b238860e 100644
--- a/src/containers/auth/PasswordScreen.js
+++ b/src/containers/auth/PasswordScreen.js
@@ -3,13 +3,8 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Password from '../../components/auth/Password';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 export default @inject('stores', 'actions') @observer class PasswordScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Password Retrieve');
-  }
-
   render() {
     const { actions, stores } = this.props;
 
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index 34b512e15..8d179a170 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -6,7 +6,6 @@ import { RouterStore } from 'mobx-react-router';
 import Pricing from '../../components/auth/Pricing';
 import UserStore from '../../stores/UserStore';
 import PaymentStore from '../../stores/PaymentStore';
-import { gaPage } from '../../lib/analytics';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -15,10 +14,6 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
     error: globalErrorPropType.isRequired,
   };
 
-  componentDidMount() {
-    gaPage('Auth/Pricing');
-  }
-
   render() {
     const { actions, stores, error } = this.props;
 
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
index caf75de90..efc7ea4c1 100644
--- a/src/containers/auth/SignupScreen.js
+++ b/src/containers/auth/SignupScreen.js
@@ -4,7 +4,6 @@ import { inject, observer } from 'mobx-react';
 
 import Signup from '../../components/auth/Signup';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -13,10 +12,6 @@ export default @inject('stores', 'actions') @observer class SignupScreen extends
     error: globalErrorPropType.isRequired,
   };
 
-  componentDidMount() {
-    gaPage('Auth/Signup');
-  }
-
   render() {
     const { actions, stores, error } = this.props;
     return (
diff --git a/src/containers/auth/WelcomeScreen.js b/src/containers/auth/WelcomeScreen.js
index 2c120f81c..75182345a 100644
--- a/src/containers/auth/WelcomeScreen.js
+++ b/src/containers/auth/WelcomeScreen.js
@@ -5,13 +5,8 @@ import { inject, observer } from 'mobx-react';
 import Welcome from '../../components/auth/Welcome';
 import UserStore from '../../stores/UserStore';
 import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
-import { gaPage } from '../../lib/analytics';
 
 export default @inject('stores', 'actions') @observer class LoginScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Welcome');
-  }
-
   render() {
     const { user, recipePreviews } = this.props.stores;
 
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index d681d5226..ce1b9c333 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -6,7 +6,6 @@ import { inject, observer } from 'mobx-react';
 import PaymentStore from '../../stores/PaymentStore';
 import UserStore from '../../stores/UserStore';
 import AppStore from '../../stores/AppStore';
-import { gaPage } from '../../lib/analytics';
 
 import AccountDashboard from '../../components/settings/account/AccountDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
@@ -22,10 +21,6 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
     user.getUserInfoRequest.invalidate({ immediately: true });
   }
 
-  componentDidMount() {
-    gaPage('Settings/Account Dashboard');
-  }
-
   onCloseWindow() {
     const { user, payment } = this.props.stores;
     user.getUserInfoRequest.invalidate({ immediately: true });
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index d08f0a52e..870ca4ecd 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -9,7 +9,6 @@ import ServicesStore from '../../stores/ServicesStore';
 import SettingsStore from '../../stores/SettingsStore';
 import FeaturesStore from '../../stores/FeaturesStore';
 import Form from '../../lib/Form';
-import { gaPage } from '../../lib/analytics';
 
 import ServiceError from '../../components/settings/services/ServiceError';
 import EditServiceForm from '../../components/settings/services/EditServiceForm';
@@ -93,10 +92,6 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     intl: intlShape,
   };
 
-  componentDidMount() {
-    gaPage('Settings/Service/Edit');
-  }
-
   onSubmit(data) {
     const { action } = this.props.router.params;
     const { recipes, services } = this.props.stores;
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 992c49b09..97c1fa3b1 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -8,7 +8,6 @@ import SettingsStore from '../../stores/SettingsStore';
 import UserStore from '../../stores/UserStore';
 import Form from '../../lib/Form';
 import { APP_LOCALES, SPELLCHECKER_LOCALES } from '../../i18n/languages';
-import { gaPage } from '../../lib/analytics';
 import { DEFAULT_APP_SETTINGS } from '../../config';
 import { config as spellcheckerConfig } from '../../features/spellchecker';
 
@@ -75,10 +74,6 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
     intl: intlShape,
   };
 
-  componentDidMount() {
-    gaPage('Settings/App');
-  }
-
   onSubmit(settingsData) {
     const { app, settings, user } = this.props.actions;
 
diff --git a/src/containers/settings/EditUserScreen.js b/src/containers/settings/EditUserScreen.js
index 3d35effc5..bade928a0 100644
--- a/src/containers/settings/EditUserScreen.js
+++ b/src/containers/settings/EditUserScreen.js
@@ -9,7 +9,6 @@ import EditUserForm from '../../components/settings/user/EditUserForm';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 import { required, email, minLength } from '../../helpers/validation-helpers';
-import { gaPage } from '../../lib/analytics';
 
 const messages = defineMessages({
   firstname: {
@@ -57,10 +56,6 @@ export default @inject('stores', 'actions') @observer class EditUserScreen exten
     intl: intlShape,
   };
 
-  componentDidMount() {
-    gaPage('Settings/Account/Edit');
-  }
-
   componentWillUnmount() {
     this.props.actions.user.resetStatus();
   }
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
index cd36610e4..cc36849e8 100644
--- a/src/containers/settings/InviteScreen.js
+++ b/src/containers/settings/InviteScreen.js
@@ -5,13 +5,7 @@ import { inject, observer } from 'mobx-react';
 import Invite from '../../components/auth/Invite';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
-import { gaPage } from '../../lib/analytics';
-
 export default @inject('stores', 'actions') @observer class InviteScreen extends Component {
-  componentDidMount() {
-    gaPage('Settings/Invite');
-  }
-
   componentWillUnmount() {
     this.props.stores.user.inviteRequest.reset();
   }
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index b3d758c87..eda5ae54c 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -7,7 +7,6 @@ import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import RecipeStore from '../../stores/RecipesStore';
 import ServiceStore from '../../stores/ServicesStore';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
@@ -33,20 +32,15 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
   autorunDisposer = null;
 
   componentDidMount() {
-    gaPage('Settings/Recipe Dashboard/Featured');
-
     this.autorunDisposer = autorun(() => {
       const { filter } = this.props.params;
       const { currentFilter } = this.state;
 
       if (filter === 'all' && currentFilter !== 'all') {
-        gaPage('Settings/Recipe Dashboard/All');
         this.setState({ currentFilter: 'all' });
       } else if (filter === 'featured' && currentFilter !== 'featured') {
-        gaPage('Settings/Recipe Dashboard/Featured');
         this.setState({ currentFilter: 'featured' });
       } else if (filter === 'dev' && currentFilter !== 'dev') {
-        gaPage('Settings/Recipe Dashboard/Dev');
         this.setState({ currentFilter: 'dev' });
       }
     });
diff --git a/src/containers/settings/ServicesScreen.js b/src/containers/settings/ServicesScreen.js
index b70a5506e..a501bf530 100644
--- a/src/containers/settings/ServicesScreen.js
+++ b/src/containers/settings/ServicesScreen.js
@@ -6,16 +6,11 @@ import { RouterStore } from 'mobx-react-router';
 // import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import UserStore from '../../stores/UserStore';
 import ServiceStore from '../../stores/ServicesStore';
-import { gaPage } from '../../lib/analytics';
 
 import ServicesDashboard from '../../components/settings/services/ServicesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 export default @inject('stores', 'actions') @observer class ServicesScreen extends Component {
-  componentDidMount() {
-    gaPage('Settings/Service Dashboard');
-  }
-
   componentWillUnmount() {
     this.props.actions.service.resetFilter();
     this.props.actions.service.resetStatus();
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index b21d48a11..d90f32744 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -1,5 +1,7 @@
 import { remote, ipcRenderer, shell } from 'electron';
-import { action, computed, observable } from 'mobx';
+import {
+  action, computed, observable, reaction,
+} from 'mobx';
 import moment from 'moment';
 import key from 'keymaster';
 import { getDoNotDisturb } from '@meetfranz/electron-notification-state';
@@ -11,7 +13,7 @@ import Request from './lib/Request';
 import { CHECK_INTERVAL, DEFAULT_APP_SETTINGS } from '../config';
 import { isMac, isLinux, isWindows } from '../environment';
 import locales from '../i18n/translations';
-import { gaEvent } from '../lib/analytics';
+import { gaEvent, gaPage } from '../lib/analytics';
 import { onVisibilityChange } from '../helpers/visibility-helper';
 import { getLocale } from '../helpers/i18n-helpers';
 
@@ -184,6 +186,12 @@ export default class AppStore extends Store {
 
       debug('Window is visible/focused', isVisible);
     });
+
+    // analytics autorun
+    reaction(() => this.stores.router.location.pathname, (pathname) => {
+      gaPage(pathname);
+    });
+    console.log('router location', this.stores.router.location);
   }
 
   @computed get cacheSize() {