{
test(' should handle toggle clicks correctly', async () => {
const toggleSpy = jest.fn();
const toggleMapSpy = jest.fn();
- const executeGA = jest.fn();
const props = {
blockDashedName: 'block-a',
@@ -52,7 +51,6 @@ test(' should handle toggle clicks correctly', async () => {
completedChallenges: mockCompleted,
intro: mockIntroNodes[0],
isExpanded: false,
- executeGA: executeGA,
toggleBlock: toggleSpy,
toggleMapModal: toggleMapSpy
};
diff --git a/client/src/components/YearEndGift/YearEndDonationForm.js b/client/src/components/YearEndGift/YearEndDonationForm.js
index 8f48c38695..53fefdad19 100644
--- a/client/src/components/YearEndGift/YearEndDonationForm.js
+++ b/client/src/components/YearEndGift/YearEndDonationForm.js
@@ -26,10 +26,9 @@ const numToCommas = num =>
num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
const propTypes = {
- handleProcessing: PropTypes.func,
+ showCloseBtn: PropTypes.func,
defaultTheme: PropTypes.string,
isDonating: PropTypes.bool,
- executeGA: PropTypes.func,
stripe: PropTypes.shape({
createToken: PropTypes.func.isRequired
})
@@ -48,7 +47,6 @@ class YearEndDonationForm extends Component {
this.handleSelectAmount = this.handleSelectAmount.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
- this.handlePaypalSubmission = this.handlePaypalSubmission.bind(this);
}
componentDidMount() {
@@ -91,13 +89,14 @@ class YearEndDonationForm extends Component {
renderDonationOptions() {
const { donationAmount, stripe } = this.state;
- const { handleProcessing, defaultTheme } = this.props;
+
+ const { showCloseBtn, defaultTheme } = this.props;
return (
diff --git a/client/src/components/layouts/Certification.js b/client/src/components/layouts/Certification.js
index 9756ec4de1..fc113724d9 100644
--- a/client/src/components/layouts/Certification.js
+++ b/client/src/components/layouts/Certification.js
@@ -2,7 +2,8 @@ import React, { Fragment, Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import { fetchUser, isSignedInSelector, executeGA } from '../../redux';
+import ga from '../../analytics';
+import { fetchUser, isSignedInSelector } from '../../redux';
import { createSelector } from 'reselect';
const mapStateToProps = createSelector(
@@ -12,7 +13,7 @@ const mapStateToProps = createSelector(
})
);
-const mapDispatchToProps = { fetchUser, executeGA };
+const mapDispatchToProps = { fetchUser };
class CertificationLayout extends Component {
componentDidMount() {
@@ -20,7 +21,7 @@ class CertificationLayout extends Component {
if (!isSignedIn) {
fetchUser();
}
- this.props.executeGA({ type: 'page', data: pathname });
+ ga.pageview(pathname);
}
render() {
return {this.props.children};
@@ -30,7 +31,6 @@ class CertificationLayout extends Component {
CertificationLayout.displayName = 'CertificationLayout';
CertificationLayout.propTypes = {
children: PropTypes.any,
- executeGA: PropTypes.func,
fetchUser: PropTypes.func.isRequired,
isSignedIn: PropTypes.bool,
pathname: PropTypes.string.isRequired
diff --git a/client/src/components/layouts/Default.js b/client/src/components/layouts/Default.js
index 382b931d7e..3fe129b2e6 100644
--- a/client/src/components/layouts/Default.js
+++ b/client/src/components/layouts/Default.js
@@ -6,13 +6,13 @@ import { createSelector } from 'reselect';
import Helmet from 'react-helmet';
import fontawesome from '@fortawesome/fontawesome';
+import ga from '../../analytics';
import {
fetchUser,
isSignedInSelector,
onlineStatusChange,
isOnlineSelector,
- userSelector,
- executeGA
+ userSelector
} from '../../redux';
import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
@@ -68,7 +68,6 @@ const metaKeywords = [
const propTypes = {
children: PropTypes.node.isRequired,
- executeGA: PropTypes.func,
fetchUser: PropTypes.func.isRequired,
flashMessage: PropTypes.shape({
id: PropTypes.string,
@@ -102,27 +101,27 @@ const mapStateToProps = createSelector(
const mapDispatchToProps = dispatch =>
bindActionCreators(
- { fetchUser, removeFlashMessage, onlineStatusChange, executeGA },
+ { fetchUser, removeFlashMessage, onlineStatusChange },
dispatch
);
class DefaultLayout extends Component {
componentDidMount() {
- const { isSignedIn, fetchUser, pathname, executeGA } = this.props;
+ const { isSignedIn, fetchUser, pathname } = this.props;
if (!isSignedIn) {
fetchUser();
}
- executeGA({ type: 'page', data: pathname });
+ ga.pageview(pathname);
window.addEventListener('online', this.updateOnlineStatus);
window.addEventListener('offline', this.updateOnlineStatus);
}
componentDidUpdate(prevProps) {
- const { pathname, executeGA } = this.props;
+ const { pathname } = this.props;
const { pathname: prevPathname } = prevProps;
if (pathname !== prevPathname) {
- executeGA({ type: 'page', data: pathname });
+ ga.pageview(pathname);
}
}
diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js
index 7000debfb4..f2464d302b 100644
--- a/client/src/pages/donate.js
+++ b/client/src/pages/donate.js
@@ -1,7 +1,6 @@
import React, { Component, Fragment } from 'react';
import Helmet from 'react-helmet';
import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
@@ -10,11 +9,10 @@ import { stripePublicKey } from '../../config/env.json';
import { Spacer, Loader } from '../components/helpers';
import DonateForm from '../components/Donation/DonateForm';
import DonateText from '../components/Donation/DonateText';
-import { signInLoadingSelector, userSelector, executeGA } from '../redux';
+import { signInLoadingSelector, userSelector } from '../redux';
import { stripeScriptLoader } from '../utils/scriptLoaders';
const propTypes = {
- executeGA: PropTypes.func,
isDonating: PropTypes.bool,
showLoading: PropTypes.bool.isRequired
};
@@ -28,14 +26,6 @@ const mapStateToProps = createSelector(
})
);
-const mapDispatchToProps = dispatch =>
- bindActionCreators(
- {
- executeGA
- },
- dispatch
- );
-
export class DonatePage extends Component {
constructor(...props) {
super(...props);
@@ -43,19 +33,11 @@ export class DonatePage extends Component {
stripe: null,
enableSettings: false
};
- this.handleProcessing = this.handleProcessing.bind(this);
+
this.handleStripeLoad = this.handleStripeLoad.bind(this);
}
componentDidMount() {
- this.props.executeGA({
- type: 'event',
- data: {
- category: 'Donation',
- action: `Displayed donate page`,
- nonInteraction: true
- }
- });
if (window.Stripe) {
this.handleStripeLoad();
} else if (document.querySelector('#stripe-js')) {
@@ -74,18 +56,6 @@ export class DonatePage extends Component {
}
}
- handleProcessing(duration, amount) {
- this.props.executeGA({
- type: 'event',
- data: {
- category: 'donation',
- action: 'donate page stripe form submission',
- label: duration,
- value: amount
- }
- });
- }
-
handleStripeLoad() {
// Create Stripe instance once Stripe.js loads
console.info('stripe has loaded');
@@ -118,7 +88,6 @@ export class DonatePage extends Component {
@@ -136,7 +105,4 @@ export class DonatePage extends Component {
DonatePage.displayName = 'DonatePage';
DonatePage.propTypes = propTypes;
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(DonatePage);
+export default connect(mapStateToProps)(DonatePage);
diff --git a/client/src/pages/year-end-gift.js b/client/src/pages/year-end-gift.js
index 2a19cd8c4e..05f4477410 100644
--- a/client/src/pages/year-end-gift.js
+++ b/client/src/pages/year-end-gift.js
@@ -1,48 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
import Helmet from 'react-helmet';
import { Grid } from '@freecodecamp/react-bootstrap';
-import { connect } from 'react-redux';
-import { executeGA } from '../redux';
-import { bindActionCreators } from 'redux';
-import PropTypes from 'prop-types';
import { Spacer, FullWidthRow } from '../components/helpers';
import YearEndDonationForm from '../components/YearEndGift/YearEndDonationForm';
-const mapDispatchToProps = dispatch =>
- bindActionCreators(
- {
- executeGA
- },
- dispatch
- );
-
-const propTypes = {
- executeGA: PropTypes.func
-};
-
-function YearEndGiftPage({ executeGA }) {
- useEffect(() => {
- executeGA({
- type: 'event',
- data: {
- category: 'Donation',
- action: `Displayed year end gift page`,
- nonInteraction: true
- }
- });
- }, [executeGA]);
- const handleProcessing = (duration, amount) => {
- executeGA({
- type: 'event',
- data: {
- category: 'donation',
- action: 'year-end-gift strip form submission',
- label: duration,
- value: amount
- }
- });
- };
+function YearEndGiftPage() {
return (
<>
@@ -50,11 +13,7 @@ function YearEndGiftPage({ executeGA }) {
-
+
@@ -65,9 +24,5 @@ function YearEndGiftPage({ executeGA }) {
}
YearEndGiftPage.displayName = 'YearEndGiftPage';
-YearEndGiftPage.propTypes = propTypes;
-export default connect(
- null,
- mapDispatchToProps
-)(YearEndGiftPage);
+export default YearEndGiftPage;
diff --git a/client/src/redux/ga-saga.js b/client/src/redux/ga-saga.js
deleted file mode 100644
index b2545b98c0..0000000000
--- a/client/src/redux/ga-saga.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { takeEvery } from 'redux-saga/effects';
-import ga from '../analytics';
-
-function* callGaType({ payload: { type, data } }) {
- const GaTypes = { event: ga.event, page: ga.pageview, modal: ga.modalview };
- GaTypes[type](data);
-}
-
-export function createGaSaga(types) {
- return [takeEvery(types.executeGA, callGaType)];
-}
diff --git a/client/src/redux/index.js b/client/src/redux/index.js
index 439d5f18fa..b67bf24b37 100644
--- a/client/src/redux/index.js
+++ b/client/src/redux/index.js
@@ -11,7 +11,6 @@ import { createReportUserSaga } from './report-user-saga';
import { createShowCertSaga } from './show-cert-saga';
import { createNightModeSaga } from './night-mode-saga';
import { createDonationSaga } from './donation-saga';
-import { createGaSaga } from './ga-saga';
import hardGoToEpic from './hard-go-to-epic';
import failedUpdatesEpic from './failed-updates-epic';
@@ -66,7 +65,6 @@ export const types = createTypes(
'onlineStatusChange',
'resetUserData',
'tryToShowDonationModal',
- 'executeGA',
'submitComplete',
'updateComplete',
'updateCurrentChallengeId',
@@ -86,7 +84,6 @@ export const sagas = [
...createAcceptTermsSaga(types),
...createAppMountSaga(types),
...createDonationSaga(types),
- ...createGaSaga(types),
...createFetchUserSaga(types),
...createShowCertSaga(types),
...createReportUserSaga(types),
@@ -98,9 +95,6 @@ export const appMount = createAction(types.appMount);
export const tryToShowDonationModal = createAction(
types.tryToShowDonationModal
);
-
-export const executeGA = createAction(types.executeGA);
-
export const allowBlockDonationRequests = createAction(
types.allowBlockDonationRequests
);
diff --git a/client/src/templates/Challenges/components/CompletionModal.js b/client/src/templates/Challenges/components/CompletionModal.js
index d0c9286e07..663ed6fc3e 100644
--- a/client/src/templates/Challenges/components/CompletionModal.js
+++ b/client/src/templates/Challenges/components/CompletionModal.js
@@ -6,8 +6,10 @@ import { createSelector } from 'reselect';
import { Button, Modal } from '@freecodecamp/react-bootstrap';
import { useStaticQuery, graphql } from 'gatsby';
+import ga from '../../../analytics';
import Login from '../../../components/Header/components/Login';
import CompletionModalBody from './CompletionModalBody';
+
import { dasherize } from '../../../../../utils/slugs';
import './completion-modal.css';
@@ -23,7 +25,7 @@ import {
lastBlockChalSubmitted
} from '../redux';
-import { isSignedInSelector, executeGA } from '../../../redux';
+import { isSignedInSelector } from '../../../redux';
const mapStateToProps = createSelector(
challengeFilesSelector,
@@ -58,8 +60,7 @@ const mapDispatchToProps = function(dispatch) {
},
lastBlockChalSubmitted: () => {
dispatch(lastBlockChalSubmitted());
- },
- executeGA
+ }
};
return () => dispatchers;
};
@@ -69,7 +70,6 @@ const propTypes = {
close: PropTypes.func.isRequired,
completedChallengesIds: PropTypes.array,
currentBlockIds: PropTypes.array,
- executeGA: PropTypes.func,
files: PropTypes.object.isRequired,
id: PropTypes.string,
isOpen: PropTypes.bool,
@@ -190,7 +190,7 @@ export class CompletionModalInner extends Component {
const { completedPercent } = this.state;
if (isOpen) {
- executeGA({ type: 'modal', data: '/completion-modal' });
+ ga.modalview('/completion-modal');
}
const dashedName = dasherize(title);
return (
diff --git a/client/src/templates/Challenges/components/HelpModal.js b/client/src/templates/Challenges/components/HelpModal.js
index 6580ddc2fd..18b819a473 100644
--- a/client/src/templates/Challenges/components/HelpModal.js
+++ b/client/src/templates/Challenges/components/HelpModal.js
@@ -4,22 +4,21 @@ import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import ga from '../../../analytics';
import { createQuestion, closeModal, isHelpModalOpenSelector } from '../redux';
-import { executeGA } from '../../../redux';
import './help-modal.css';
const mapStateToProps = state => ({ isOpen: isHelpModalOpenSelector(state) });
const mapDispatchToProps = dispatch =>
bindActionCreators(
- { createQuestion, executeGA, closeHelpModal: () => closeModal('help') },
+ { createQuestion, closeHelpModal: () => closeModal('help') },
dispatch
);
const propTypes = {
closeHelpModal: PropTypes.func.isRequired,
createQuestion: PropTypes.func.isRequired,
- executeGA: PropTypes.func,
isOpen: PropTypes.bool
};
@@ -28,9 +27,9 @@ const RSA =
export class HelpModal extends Component {
render() {
- const { isOpen, closeHelpModal, createQuestion, executeGA } = this.props;
+ const { isOpen, closeHelpModal, createQuestion } = this.props;
if (isOpen) {
- executeGA({ type: 'modal', data: '/help-modal' });
+ ga.modalview('/help-modal');
}
return (
diff --git a/client/src/templates/Challenges/components/ResetModal.js b/client/src/templates/Challenges/components/ResetModal.js
index b6d55ceeed..cc80a78917 100644
--- a/client/src/templates/Challenges/components/ResetModal.js
+++ b/client/src/templates/Challenges/components/ResetModal.js
@@ -5,14 +5,13 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import ga from '../../../analytics';
import { isResetModalOpenSelector, closeModal, resetChallenge } from '../redux';
-import { executeGA } from '../../../redux';
import './reset-modal.css';
const propTypes = {
close: PropTypes.func.isRequired,
- executeGA: PropTypes.func,
isOpen: PropTypes.bool.isRequired,
reset: PropTypes.func.isRequired
};
@@ -26,11 +25,7 @@ const mapStateToProps = createSelector(
const mapDispatchToProps = dispatch =>
bindActionCreators(
- {
- close: () => closeModal('reset'),
- executeGA,
- reset: () => resetChallenge()
- },
+ { close: () => closeModal('reset'), reset: () => resetChallenge() },
dispatch
);
@@ -40,7 +35,7 @@ function withActions(...fns) {
function ResetModal({ reset, close, isOpen }) {
if (isOpen) {
- executeGA({ type: 'modal', data: '/reset-modal' });
+ ga.modalview('/reset-modal');
}
return (
({ isOpen: isVideoModalOpenSelector(state) });
const mapDispatchToProps = dispatch =>
- bindActionCreators(
- { closeVideoModal: () => closeModal('video'), executeGA },
- dispatch
- );
+ bindActionCreators({ closeVideoModal: () => closeModal('video') }, dispatch);
const propTypes = {
closeVideoModal: PropTypes.func.isRequired,
- executeGA: propTypes.func,
isOpen: PropTypes.bool,
videoUrl: PropTypes.string
};
export class VideoModal extends Component {
render() {
- const { isOpen, closeVideoModal, videoUrl, executeGA } = this.props;
+ const { isOpen, closeVideoModal, videoUrl } = this.props;
if (isOpen) {
- executeGA({ type: 'modal', data: '/completion-modal' });
+ ga.modalview('/video-modal');
}
return (