Add more analytics

src/Application.js

@@ -0,0 +1,82 @@
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import isMobile from 'ismobilejs';
+import {CSSTransition, TransitionGroup} from 'react-transition-group';
+import {Redirect, Route, Switch} from 'react-router-dom';
+import Header from './imports/components/Header';
+import ScrollToTop from './imports/components/ScrollToTop';
+import Intro from './pages/Intro';
+import MobileHome from './mobilePages/Journey/Home';
+import Home from './pages/Journey/Home';
+import MobileServices from './mobilePages/Journey/Services';
+import Services from './pages/Journey/Services';
+import MobileImpact from './mobilePages/Journey/Impact';
+import Impact from './pages/Journey/Impact';
+import MobileCaseStudies from './mobilePages/Journey/CaseStudies';
+import CaseStudies from './pages/Journey/CaseStudies';
+import MobileTeam from './mobilePages/Journey/Team';
+import Team from './pages/Journey/Team';
+import MobileConsultation from './mobilePages/Journey/Consultation';
+import Consultation from './pages/Journey/Consultation';
+import BetterYet from './pages/Projects/BetterYet';
+import LPMA from './pages/Projects/LPMA';
+import Hub from './pages/Projects/Hub';
+import {trackPage} from './imports/analytics';
+
+export default class Application extends React.Component {
+  componentDidUpdate(prevProps) {
+    const {location: {prevPathname}} = prevProps;
+    const {location} = this.props;
+    const {pathname} = location;
+    if (prevPathname !== pathname) {
+      trackPage(pathname);
+    }
+  }
+
+  render() {
+    const {location} = this.props;
+    return (
+      <Fragment>
+        {(location.pathname !== '/'
+          && location.pathname !== '/betteryet'
+          && location.pathname !== '/lpma'
+          && location.pathname !== '/hub'
+          && ((isMobile.phone && location.pathname !== '/home')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/services')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/our-work')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/team')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/consult')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/impact')
+            || (!isMobile.phone))) && <Header />}
+        <ScrollToTop>
+          <TransitionGroup>
+            <CSSTransition key={location.key} classNames="fade" timeout={450}>
+              <Switch location={location}>
+                <Route exact path="/" component={Intro} />
+                <Route exact path="/home" component={isMobile.phone ? MobileHome : Home} />
+                <Route exact path="/services" component={isMobile.phone ? MobileServices : Services} />
+                <Route exact path="/impact" component={isMobile.phone ? MobileImpact : Impact} />
+                <Route exact path="/our-work" component={isMobile.phone ? MobileCaseStudies : CaseStudies} />
+                <Route exact path="/team" component={isMobile.phone ? MobileTeam : Team} />
+                <Route exact path="/consult" component={isMobile.phone ? MobileConsultation : Consultation} />
+                <Route exact path="/betteryet" component={BetterYet} />
+                <Route exact path="/lpma" component={LPMA} />
+                <Route exact path="/hub" component={Hub} />
+                <Route path="*" render={() => <Redirect to="/" />} />
+              </Switch>
+            </CSSTransition>
+          </TransitionGroup>
+        </ScrollToTop>
+      </Fragment>
+    );
+  }
+}
+
+Application.propTypes = {
+  location: PropTypes.object.isRequired,
+};

src/app.js

@@ -1,39 +1,17 @@
 import React, {Component, Fragment} from 'react';
-import {
-  BrowserRouter, Route, Switch, Redirect,
-} from 'react-router-dom';
-import {TransitionGroup, CSSTransition} from 'react-transition-group';
-import ScrollToTop from 'components/ScrollToTop';
+import {BrowserRouter, Route} from 'react-router-dom';
 import DeviceOrientation, {Orientation} from 'components/Orientation';
 import LoaderLine from 'components/Loader/LoaderLine';
-import Header from 'components/Header';
 import isMobile from 'ismobilejs';
 import 'normalize.css';
 import 'styles/main.styl';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 
-import Intro from './pages/Intro';
-import Home from './pages/Journey/Home';
-import MobileHome from './mobilePages/Journey/Home';
-import Services from './pages/Journey/Services';
-import MobileServices from './mobilePages/Journey/Services';
-import Impact from './pages/Journey/Impact';
-import MobileImpact from './mobilePages/Journey/Impact';
-import CaseStudies from './pages/Journey/CaseStudies';
-import MobileCaseStudies from './mobilePages/Journey/CaseStudies';
-import Team from './pages/Journey/Team';
-import MobileTeam from './mobilePages/Journey/Team';
-import Consultation from './pages/Journey/Consultation';
-import MobileConsultation from './mobilePages/Journey/Consultation';
-
-import BetterYet from './pages/Projects/BetterYet';
-import LPMA from './pages/Projects/LPMA';
-import Hub from './pages/Projects/Hub';
-
 import Landscape from './pages/Landscape';
 
 import './index.styl';
+import Application from './Application';
 
 AOS.init({
   disable: false,
@@ -89,53 +67,14 @@ class App extends Component {
 
   renderRoutes() {
     const {ready} = this.state;
-
-    if (!ready) return null;
+    if (!ready) {
+      return false;
+    }
 
     return (
       <BrowserRouter>
-        <Route render={({location}) => (
-          <Fragment>
-            {(location.pathname !== '/'
-              && location.pathname !== '/betteryet'
-              && location.pathname !== '/lpma'
-              && location.pathname !== '/hub'
-              && ((isMobile.phone && location.pathname !== '/home')
-              || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/services')
-              || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/our-work')
-                || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/team')
-                || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/consult')
-                || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/impact')
-              || (!isMobile.phone))) && <Header />}
-            <ScrollToTop>
-              <TransitionGroup>
-                <CSSTransition key={location.key} classNames="fade" timeout={450}>
-                  <Switch location={location}>
-                    <Route exact path="/" component={Intro} />
-                    <Route exact path="/home" component={isMobile.phone ? MobileHome : Home} />
-                    <Route exact path="/services" component={isMobile.phone ? MobileServices : Services} />
-                    <Route exact path="/impact" component={isMobile.phone ? MobileImpact : Impact} />
-                    <Route exact path="/our-work" component={isMobile.phone ? MobileCaseStudies : CaseStudies} />
-                    <Route exact path="/team" component={isMobile.phone ? MobileTeam : Team} />
-                    <Route exact path="/consult" component={isMobile.phone ? MobileConsultation : Consultation} />
-                    <Route exact path="/betteryet" component={BetterYet} />
-                    <Route exact path="/lpma" component={LPMA} />
-                    <Route exact path="/hub" component={Hub} />
-                    <Route path="*" render={() => <Redirect to="/" />} />
-                  </Switch>
-                </CSSTransition>
-              </TransitionGroup>
-            </ScrollToTop>
-          </Fragment>
-        )}
-        />
+        <Route component={Application} />
       </BrowserRouter>
-
     );
   }
 

src/imports/analytics/index.js

@@ -58,3 +58,7 @@ export const trackEvent = (eventName, props = {}) => {
     ...props
   });
 };
+
+export const trackPage = (pageName, props = {}) => {
+  window.analytics.page(pageName, props);
+};

src/imports/components/interactions/FullPageScroll.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactFullpage from '@fullpage/react-fullpage';
+
+export default class FullPageScroll extends React.Component {
+  render() {
+    const {children} = this.props;
+    return (
+      <ReactFullpage
+        licenseKey="OPEN-SOURCE-GPLV3-LICENSE"
+        navigation
+        slidesNavigation
+        controlArrows={false}
+        render={() => (
+          <ReactFullpage.Wrapper>
+            {children}
+          </ReactFullpage.Wrapper>
+        )}
+      />
+    );
+  }
+}
+
+FullPageScroll.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/imports/utils/sendContactMessageToSlack.js

@@ -0,0 +1,21 @@
+import request from 'utils/request';
+
+const WEBHOOK_URL = 'https://hooks.slack.com/services/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';
+const DEV_WEBHOOK_URL = 'https://hooks.slack.com/services/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';
+
+const sendContactMessageToSlack = ({name, email, message}) => {
+  const formData = JSON.stringify({
+    attachments: [
+      {
+        color: '#000000',
+        pretext: 'New Contact Us form request',
+        author_name: `From: ${name}`,
+        text: `*Email:* ${email}\n*Message:* _${message}_`,
+      }
+    ]
+  });
+
+  return request.post(process.env.NODE_ENV === 'development' ? DEV_WEBHOOK_URL : WEBHOOK_URL, formData);
+};
+
+export default sendContactMessageToSlack;

src/mobilePages/Journey/CaseStudies/index.js

@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
-import ReactFullpage from '@fullpage/react-fullpage';
 
 import MobileHeader from 'components/MobileHeader';
 import MobileFooter from 'components/MobileFooter';
+import FullPageScroll from 'components/interactions/FullPageScroll';
 
 import CaseStudy from './Sections/CaseStudy';
 
@@ -16,44 +16,36 @@ class MobileCaseStudies extends Component {
         <h1 className="sticky-heading">
           Our Work
         </h1>
-        <ReactFullpage
-          licenseKey="OPEN-SOURCE-GPLV3-LICENSE"
-          navigation
-          slidesNavigation
-          controlArrows={false}
-          render={() => (
-            <ReactFullpage.Wrapper>
-              <div className="section">
-                <CaseStudy
-                  projectName="BetterYet"
-                  projectDescription="Loyalty for Small Businesses"
-                  to="/betteryet"
-                  image="/images/mobile/betteryet-mobile-thumbnail.png"
-                />
-              </div>
-              <div className="section">
-                <CaseStudy
-                  projectName="HUB X"
-                  projectDescription="Community app"
-                  to="/hub"
-                  image="/images/mobile/hub-mobile-thumbnail.png"
-                />
-              </div>
-              <div className="section">
-                <CaseStudy
-                  desktop
-                  projectName="LPMA"
-                  projectDescription="Property management system"
-                  to="/lpma"
-                  image="/images/mobile/lpma-mobile-thumbnail.png"
-                />
-              </div>
-              <div className="section footer-section">
-                <MobileFooter />
-              </div>
-            </ReactFullpage.Wrapper>
-          )}
-        />
+        <FullPageScroll>
+          <div className="section">
+            <CaseStudy
+              projectName="BetterYet"
+              projectDescription="Loyalty for Small Businesses"
+              to="/betteryet"
+              image="/images/mobile/betteryet-mobile-thumbnail.png"
+            />
+          </div>
+          <div className="section">
+            <CaseStudy
+              projectName="HUB X"
+              projectDescription="Community app"
+              to="/hub"
+              image="/images/mobile/hub-mobile-thumbnail.png"
+            />
+          </div>
+          <div className="section">
+            <CaseStudy
+              desktop
+              projectName="LPMA"
+              projectDescription="Property management system"
+              to="/lpma"
+              image="/images/mobile/lpma-mobile-thumbnail.png"
+            />
+          </div>
+          <div className="section footer-section">
+            <MobileFooter />
+          </div>
+        </FullPageScroll>
       </div>
     );
   }

src/mobilePages/Journey/Consultation/Sections/ConsultForm/index.js

@@ -1,13 +1,10 @@
 import React, {Component} from 'react';
-import request from 'utils/request';
 import {NotificationContainer, NotificationManager} from 'react-notifications';
 
 import 'react-notifications/lib/notifications.css';
 
 import './index.styl';
-
-const WEBHOOK_URL = 'https://hooks.slack.com/services/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';
-const DEV_WEBHOOK_URL = 'https://hooks.slack.com/services/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';
+import sendContactMessageToSlack from 'utils/sendContactMessageToSlack';
 
 class Intro extends Component {
   constructor(props) {
@@ -24,22 +21,9 @@ class Intro extends Component {
   handleSubmit(e) {
     e.preventDefault();
 
-    const {
-      name, email, message
-    } = this.state;
-
-    const formData = JSON.stringify({
-      attachments: [
-        {
-          color: '#000000',
-          pretext: 'New Contact Us form request',
-          author_name: `From: ${name}`,
-          text: `*Email:* ${email}\n*Message:* _${message}_`,
-        }
-      ]
-    });
+    const {name, email, message} = this.state;
 
-    request.post(process.env.NODE_ENV === 'development' ? DEV_WEBHOOK_URL : WEBHOOK_URL, formData)
+    sendContactMessageToSlack({name, email, message})
       .then(() => {
         this.setState({
           name: '',