From 83aa32ac3e534f4a5da6510ee977c21292000b8b Mon Sep 17 00:00:00 2001 From: Alex Panov Date: Mon, 29 Oct 2018 16:06:20 -0400 Subject: [PATCH 1/5] Track page changes --- src/Application.js | 82 ++++++++++++++++++++++++++++++++++++++++++++++ src/app.js | 73 ++++------------------------------------- 2 files changed, 88 insertions(+), 67 deletions(-) create mode 100644 src/Application.js diff --git a/src/Application.js b/src/Application.js new file mode 100644 index 0000000..070ba51 --- /dev/null +++ b/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 ( + + {(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))) &&
} + + + + + + + + + + + + + + + } /> + + + + + + ); + } +} + +Application.propTypes = { + location: PropTypes.object.isRequired, +}; diff --git a/src/app.js b/src/app.js index 2ff16d9..a1c7ec4 100644 --- a/src/app.js +++ b/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 ( - ( - - {(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))) &&
} - - - - - - - - - - - - - - - } /> - - - - - - )} - /> + - ); } From fd6baa46dadc953c42fe20516be800b23407c3c7 Mon Sep 17 00:00:00 2001 From: Alex Panov Date: Mon, 29 Oct 2018 16:06:40 -0400 Subject: [PATCH 2/5] Add `trackPage` analytics method --- src/imports/analytics/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/imports/analytics/index.js b/src/imports/analytics/index.js index 32ad76f..e7ccd56 100644 --- a/src/imports/analytics/index.js +++ b/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); +}; From 64cb1c58718ba3b2d929e77452b45a5d69d05378 Mon Sep 17 00:00:00 2001 From: Alex Panov Date: Mon, 29 Oct 2018 16:06:56 -0400 Subject: [PATCH 3/5] Extract a `` component --- .../components/ConsultationForm.js | 85 +++++++++++++++++ src/pages/Journey/Consultation/index.js | 93 +++---------------- .../Consultation/sendContactMessageToSlack.js | 21 +++++ 3 files changed, 117 insertions(+), 82 deletions(-) create mode 100644 src/pages/Journey/Consultation/components/ConsultationForm.js create mode 100644 src/pages/Journey/Consultation/sendContactMessageToSlack.js diff --git a/src/pages/Journey/Consultation/components/ConsultationForm.js b/src/pages/Journey/Consultation/components/ConsultationForm.js new file mode 100644 index 0000000..c735812 --- /dev/null +++ b/src/pages/Journey/Consultation/components/ConsultationForm.js @@ -0,0 +1,85 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Input from 'components/Input'; +import TextArea from 'components/TextArea'; +import Button from 'components/interactions/Button'; +import {trackEvent} from 'analytics'; + +const EMPTY_VALUES = { + name: '', + email: '', + message: '', +}; + +export default class ConsultationForm extends React.Component { + state = { + ...EMPTY_VALUES, + submitting: false, + pristine: true + }; + + onFormInputChange(e) { + const {pristine} = this.state; + if (pristine) { + this.setState({pristine: false}, () => trackEvent('Consult form touched')); + } + this.setState({[e.target.name]: e.target.value}); + } + + onSubmit(e) { + e.preventDefault(); + + const {onSubmit} = this.props; + this.setState({submitting: true}); + + onSubmit(this.state) + .then(() => this.setState(EMPTY_VALUES)) + .then(() => trackEvent('Consult form submitted')) + .finally(() => this.setState({submitting: false})); + } + + render() { + const { + name, email, message, submitting + } = this.state; + return ( +
this.onSubmit(e)}> + this.onFormInputChange(e)} + /> + this.onFormInputChange(e)} + /> +
+