Skip to content

Commit

Permalink
add hotjar
Browse files Browse the repository at this point in the history
  • Loading branch information
@annarhughes
annarhughes committed Oct 24, 2023
1 parent 2b76fe4 commit 0aec55f
Show file tree
Hide file tree
Showing 4 changed files with 316 additions and 93 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"react-device-detect": "^1.14.0",
"react-dom": "17.0.2",
"react-firebase-hooks": "^2.2.0",
"react-hotjar": "^6.1.0",
"react-html-parser": "^2.0.2",
"react-player": "^2.6.2",
"react-redux": "^7.2.1",
Expand Down
198 changes: 105 additions & 93 deletions src/pages/_app.js
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,57 @@
import {
Box, Button, makeStyles, Typography,
} from '@material-ui/core';
import CssBaseline from '@material-ui/core/CssBaseline';
import LinkUi from '@material-ui/core/Link';
import { ThemeProvider } from '@material-ui/core/styles';
import 'firebaseui/dist/firebaseui.css';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import { useRouter } from 'next/router';
import PropTypes from 'prop-types';
import React, { useEffect, useRef, useState } from 'react';
import CookieConsent from 'react-cookie-consent';
import { useAuthState } from 'react-firebase-hooks/auth';
import { Provider } from 'react-redux';
import Head from '../components/Head';
import Header from '../components/Header';
import Loading from '../components/Loading';
import firebase from '../config/firebase';
import analyticsEvent from '../shared/analyticsEvent';
import { axiosGet } from '../shared/axios';
import isBrowser from '../shared/browserCheck';
import useWindowDimensions from '../shared/dimensions';
import { useStore } from '../store/store';
import theme from '../styles/theme';
import { Box, Button, makeStyles, Typography } from "@material-ui/core";

Check failure on line 1 in src/pages/_app.js

View workflow job for this annotation

GitHub Actions / Frontend test and build 

Expected a line break after this opening brace

Check failure on line 1 in src/pages/_app.js

View workflow job for this annotation

GitHub Actions / Frontend test and build 

Expected a line break before this closing brace

Check failure on line 1 in src/pages/_app.js

View workflow job for this annotation

GitHub Actions / Frontend test and build 

Strings must use singlequote
import CssBaseline from "@material-ui/core/CssBaseline";

Check failure on line 2 in src/pages/_app.js

View workflow job for this annotation

GitHub Actions / Frontend test and build 

Strings must use singlequote
import LinkUi from "@material-ui/core/Link";

Check failure on line 3 in src/pages/_app.js

View workflow job for this annotation

GitHub Actions / Frontend test and build 

Strings must use singlequote
import { ThemeProvider } from "@material-ui/core/styles";

Check failure on line 4 in src/pages/_app.js

View workflow job for this annotation

GitHub Actions / Frontend test and build 

Strings must use singlequote
import "firebaseui/dist/firebaseui.css";

Check failure on line 5 in src/pages/_app.js

View workflow job for this annotation

GitHub Actions / Frontend test and build 

Strings must use singlequote
import dynamic from "next/dynamic";

Check failure on line 6 in src/pages/_app.js

View workflow job for this annotation

GitHub Actions / Frontend test and build 

Strings must use singlequote
import Link from "next/link";

Check failure on line 7 in src/pages/_app.js

View workflow job for this annotation

GitHub Actions / Frontend test and build 

Strings must use singlequote
import { useRouter } from "next/router";

Check failure on line 8 in src/pages/_app.js

View workflow job for this annotation

GitHub Actions / Frontend test and build 

Strings must use singlequote
import PropTypes from "prop-types";
import React, { useEffect, useRef, useState } from "react";
import CookieConsent, { getCookieConsentValue } from "react-cookie-consent";
import { useAuthState } from "react-firebase-hooks/auth";
import { hotjar } from "react-hotjar";
import { Provider } from "react-redux";
import Head from "../components/Head";
import Header from "../components/Header";
import Loading from "../components/Loading";
import firebase from "../config/firebase";
import analyticsEvent from "../shared/analyticsEvent";
import { axiosGet } from "../shared/axios";
import isBrowser from "../shared/browserCheck";
import useWindowDimensions from "../shared/dimensions";
import { useStore } from "../store/store";
import "../styles/hotjarNPS.css";
import theme from "../styles/theme";

const Footer = dynamic(
() => import('../components/Footer'),
{ ssr: false },
);
const Footer = dynamic(() => import("../components/Footer"), { ssr: false });

const useStyles = makeStyles({
screenContainer: {

margin: 0,
[theme.breakpoints.up('sm')]: {
height: '100vh',
[theme.breakpoints.up("sm")]: {
height: "100vh",
},
},

desktopScreenContainer: {

},
desktopScreenContainer: {},
backgroundBlue: {
background: 'url(\'/backgroundBlue.png\')',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
background: "url('/backgroundBlue.png')",
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
},
backgroundPeach: {
background: 'url(\'/backgroundPeach.png\')',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
background: "url('/backgroundPeach.png')",
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
},
cookieContainer: {
position: 'static !important',
display: 'flex',
flexWrap: 'wrap',
position: "static !important",
display: "flex",
flexWrap: "wrap",
},
cookieButtonContainer: {
display: 'flex',

display: "flex",
},
cookieButton: {
margin: 5,
Expand All @@ -68,9 +61,9 @@ const useStyles = makeStyles({
height: 40,
},
cookieContent: {
display: 'flex',
justifyContent: 'space-between',
width: '100%',
display: "flex",
justifyContent: "space-between",
width: "100%",
},
});

Expand All @@ -80,14 +73,14 @@ function App({ Component, pageProps }) {
const { height, width } = useWindowDimensions();
const [user] = isBrowser ? useAuthState(firebase.auth()) : [{}];
const [isLoading, setIsLoading] = useState(false);
const [background, setBackground] = useState('Peach');
const [background, setBackground] = useState("Peach");

const containerRef = useRef();
const scrollTopRef = useRef();

useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
Expand All @@ -98,19 +91,24 @@ function App({ Component, pageProps }) {
// or if the router changes (i.e the user navigates)
const checkTermsAcceptance = async (u) => {
const idToken = await u.getIdToken();
const serverUser = await axiosGet('/profile',
{
headers: {
authorization: `Bearer ${idToken}`,
},
});
const serverUser = await axiosGet("/profile", {
headers: {
authorization: `Bearer ${idToken}`,
},
});
return serverUser.termsAccepted;
};
if (user && user.emailVerified) {
checkTermsAcceptance(user).then((termsAccepted) => {
// If there is a verified user but they haven't accepted the terms, reroute them to sign-in
if (!termsAccepted) {
router.push('/sign-in');
router.push("/sign-in");
}
if (
process.env.NEXT_PUBLIC_ENV === "production" &&
getCookieConsentValue("ConsentToCookie") === "true"
) {
hotjar.identify("USER_ID", { userProperty: user.id });
}
});
} else if (user && !user.emailVerified) {
Expand All @@ -120,37 +118,41 @@ function App({ Component, pageProps }) {
}, [user]);

useEffect(() => {
router.events.on('routeChangeStart', () => {
router.events.on("routeChangeStart", () => {
setIsLoading(true);
});
router.events.on('routeChangeComplete', () => {
analyticsEvent('page_view');
router.events.on("routeChangeComplete", () => {
analyticsEvent("page_view");
setIsLoading(false);
});
router.events.on('routeChangeError', () => {
router.events.on("routeChangeError", () => {
setIsLoading(false);
});

if (process.env.NEXT_PUBLIC_ENV === "production") {
hotjar.initialize(Number(process.env.NEXT_PUBLIC_HOTJAR_ID), 6);
}
}, []);

useEffect(() => {
const routesWithoutBackgrounds = ['/settings', '/saved', '/themes/[slug]'];
const routesWithBlueBackgrounds = ['/resources/[resourceSlug]/items/[itemId]'];
const routesWithoutBackgrounds = ["/settings", "/saved", "/themes/[slug]"];
const routesWithBlueBackgrounds = [
"/resources/[resourceSlug]/items/[itemId]",
];
if (routesWithoutBackgrounds.includes(router.pathname)) {
setBackground('None');
setBackground("None");
} else if (routesWithBlueBackgrounds.includes(router.pathname)) {
setBackground('Blue');
setBackground("Blue");
} else {
setBackground('Peach');
setBackground("Peach");
}
}, [router]);

const store = useStore(pageProps.initialReduxState);

return (
<>
<Head
title="Your Story Matters"
/>
<Head title="Your Story Matters" />
<Provider store={store}>
<ThemeProvider theme={theme}>
<CssBaseline />
Expand All @@ -161,8 +163,16 @@ function App({ Component, pageProps }) {
alignItems="center"
justifyContent="center"
>
<Box height={height} width={width} overflow="hidden" boxShadow={3} position="relative" ref={containerRef} display="flex" flexDirection="column">

<Box
height={height}
width={width}
overflow="hidden"
boxShadow={3}
position="relative"
ref={containerRef}
display="flex"
flexDirection="column"
>
<Box>
<CookieConsent
location="bottom"
Expand All @@ -189,12 +199,18 @@ function App({ Component, pageProps }) {
>
<Box color="primary.light">
<Typography color="textPrimary">
We use cookies on YSM for a number of reasons that include making
our sites secure, robust and analysing how our site is being used,
which allows us to create more diverse content.
{' '}
We use cookies on YSM for a number of reasons that include
making our sites secure, robust and analysing how our site
is being used, which allows us to create more diverse
content.{" "}
<Link href="/info/cookies" passHref>
<LinkUi component="a" color="inherit" underline="always">Learn More.</LinkUi>
<LinkUi
component="a"
color="inherit"
underline="always"
>
Learn More.
</LinkUi>
</Link>
</Typography>
<Typography color="textPrimary">
Expand All @@ -209,12 +225,13 @@ function App({ Component, pageProps }) {
/>
</CookieConsent>
</Box>
{process.env.NEXT_PUBLIC_ENV === 'staging'
? (
<Box bgcolor="error.main" p={2}>
<Typography align="center" color="textPrimary">You are currently viewing the staging environment.</Typography>
</Box>
) : null }
{process.env.NEXT_PUBLIC_ENV === "staging" ? (
<Box bgcolor="error.main" p={2}>
<Typography align="center" color="textPrimary">
You are currently viewing the staging environment.
</Typography>
</Box>
) : null}
<Header menuContainer={containerRef} />

<Box
Expand All @@ -225,19 +242,14 @@ function App({ Component, pageProps }) {
className={classes[`background${background}`]}
>
<Box ref={scrollTopRef} />
{
isLoading ? <Loading />
: (
<Component
{...pageProps}
container={containerRef}
/>
)
}
{isLoading ? (
<Loading />
) : (
<Component {...pageProps} container={containerRef} />
)}
</Box>

<Footer />

</Box>
</Box>
</ThemeProvider>
Expand Down
Loading

0 comments on commit 0aec55f

Please sign in to comment.