add click events

CommunityFocus · Nov 18, 2023 · 8fad9a7 · 8fad9a7
1 parent a6f3e77
commit 8fad9a7
Show file tree

Hide file tree

Showing 18 changed files with 300 additions and 72 deletions.
diff --git a/src/components/Contributors/ContributorsPage.tsx b/src/components/Contributors/ContributorsPage.tsx
@@ -1,5 +1,4 @@
-import { useContext, useEffect } from "react";
-import ReactGA from "react-ga4";
+import { useContext } from "react";
 import { ThemeContext } from "styled-components";
 import ConnectionState from "../ConnectionState/ConnectionState";
 import Footer from "../Footer/Footer";
@@ -8,7 +7,6 @@ import { GlobalStyle } from "../Room/Room.styled";
 import { theme } from "../../../common/theme";
 import { Center } from "../LandingPage/LandingPage.styled";
 import ContributorsWidget from "./ContributorsWidget";
-import UsernameContext from "../Username/UsernameContext";
 
 const ContributorsPage = (props: {
 	globalUsersConnected: number;
@@ -18,19 +16,10 @@ const ContributorsPage = (props: {
 	const { globalUsersConnected, isBreak, isConnected } = props;
 
 	const { themeGroup } = useContext(ThemeContext);
-	const { userName } = useContext(UsernameContext);
 
 	const { workBackground, breakBackground } =
 		theme[themeGroup as keyof typeof theme];
 
-	useEffect(() => {
-		ReactGA.send({
-			hitType: "pageview",
-			page: `/contributors`,
-			userID: userName,
-		});
-	}, []);
-
 	return (
 		<>
 			<Header isBreak={isBreak} />

diff --git a/src/components/Contributors/ContributorsWidget.tsx b/src/components/Contributors/ContributorsWidget.tsx
@@ -1,4 +1,5 @@
 import axios from "axios";
+import ReactGA from "react-ga4";
 import { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { ThemeContext } from "styled-components";
@@ -107,7 +108,16 @@ const ContributorsWidget = (props: { isHomePage: boolean }): JSX.Element => {
 		<ContributorsWidgetContainer>
 			<ContributorsTitle
 				color={workGrey}
-				onClick={(): void => navigateToContributors()}
+				onClick={(): void => {
+					navigateToContributors();
+
+					// react ga
+					ReactGA.event({
+						category: "Contributors",
+						action: "Click",
+						label: "Contributors",
+					});
+				}}
 			>
 				{!isHomePage || contributors.length > 0
 					? "Project Contributors"
@@ -159,6 +169,13 @@ const ContributorsWidget = (props: { isHomePage: boolean }): JSX.Element => {
 							key={contributor.login}
 							onClick={(): void => {
 								window.open(contributor.url, "_blank");
+
+								// react ga
+								ReactGA.event({
+									category: "Contributors",
+									action: "Click",
+									label: contributor.login,
+								});
 							}}
 						>
 							<ContributorImg

diff --git a/src/components/Controls/TimerControls.tsx b/src/components/Controls/TimerControls.tsx
@@ -1,5 +1,6 @@
 import { FaRegPauseCircle, FaRegPlayCircle } from "react-icons/fa";
 import { LuTimerReset } from "react-icons/lu";
+import ReactGA from "react-ga4";
 
 import {
 	StyledAddTimerIcon,
@@ -42,15 +43,31 @@ const TimerControls = ({
 				(isTimerPaused ? (
 					<FaRegPlayCircle
 						size={30}
-						onClick={pauseTimer}
+						onClick={(): void => {
+							pauseTimer();
+
+							// react ga
+							ReactGA.event({
+								category: "Timer",
+								action: "Resume Timer",
+							});
+						}}
 						data-tooltip-id="my-tooltip"
 						data-tooltip-content="Resume the Timer"
 						data-tooltip-place="top"
 					/>
 				) : (
 					<FaRegPauseCircle
 						size={30}
-						onClick={pauseTimer}
+						onClick={(): void => {
+							pauseTimer();
+
+							// react ga
+							ReactGA.event({
+								category: "Timer",
+								action: "Pause Timer",
+							});
+						}}
 						data-tooltip-id="my-tooltip"
 						data-tooltip-content="Pause the Timer"
 						data-tooltip-place="top"
@@ -59,14 +76,30 @@ const TimerControls = ({
 
 			<LuTimerReset
 				type="button"
-				onClick={resetTimer}
+				onClick={(): void => {
+					resetTimer();
+
+					// react ga
+					ReactGA.event({
+						category: "Timer",
+						action: "Reset Timer",
+					});
+				}}
 				size={30}
 				data-tooltip-id="my-tooltip"
 				data-tooltip-content="Reset the Timer to the original previously set time"
 				data-tooltip-place="top"
 			/>
 			<StyledShareIcon
-				onClick={shareRoom}
+				onClick={(): void => {
+					shareRoom();
+
+					// react ga
+					ReactGA.event({
+						category: "Timer",
+						action: "Share Timer",
+					});
+				}}
 				size={30}
 				data-tooltip-id="my-tooltip"
 				data-tooltip-content="Share the timer with friends!"
@@ -75,7 +108,15 @@ const TimerControls = ({
 
 			<StyledAddTimerIcon
 				type="button"
-				onClick={(): void => setIsTimerAddModalOpen(true)}
+				onClick={(): void => {
+					setIsTimerAddModalOpen(true);
+
+					// react ga
+					ReactGA.event({
+						category: "Timer",
+						action: "Add Timer",
+					});
+				}}
 				size="30px"
 				data-tooltip-id="my-tooltip"
 				data-tooltip-content="Add or remove a timer to the roon"
@@ -101,6 +142,12 @@ const TimerControls = ({
 							"minimode",
 							"resizable,width=480=height=575"
 						);
+
+						// react ga
+						ReactGA.event({
+							category: "Timer",
+							action: "Open in a popup window",
+						});
 					}}
 					size="30px"
 					data-tooltip-id="my-tooltip"

diff --git a/src/components/DefaultRoom/DefaultRoom.tsx b/src/components/DefaultRoom/DefaultRoom.tsx
@@ -9,7 +9,6 @@ import { StyledDiv, StyledText } from "./DefaultRoom.styled";
 import { GlobalStyle } from "../Room/Room.styled";
 import ConnectionState from "../ConnectionState/ConnectionState";
 import { StyledButton } from "../Button/Button";
-import UsernameContext from "../Username/UsernameContext";
 
 const DefaultRoom = (props: {
 	globalUsersConnected: number;
@@ -20,7 +19,6 @@ const DefaultRoom = (props: {
 	const Navigate = useNavigate();
 
 	const { themeGroup } = useContext(ThemeContext);
-	const { userName } = useContext(UsernameContext);
 
 	const { workBackground, breakBackground, workGrey } =
 		theme[themeGroup as keyof typeof theme];
@@ -29,14 +27,6 @@ const DefaultRoom = (props: {
 		document.title = "Community Focus";
 	}, []);
 
-	useEffect(() => {
-		ReactGA.send({
-			hitType: "pageview",
-			page: `/default`,
-			userID: userName,
-		});
-	}, []);
-
 	return (
 		<>
 			<Header isBreak={isBreak} />
@@ -52,6 +42,13 @@ const DefaultRoom = (props: {
 					type="button"
 					onClick={(): void => {
 						Navigate("/");
+
+						// react ga
+						ReactGA.event({
+							category: "Default Room",
+							action: "Click",
+							label: "Go Back",
+						});
 					}}
 				>
 					Go Back

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,5 +1,6 @@
 import { ThemeContext } from "styled-components";
 import { useContext } from "react";
+import ReactGA from "react-ga4";
 import Dropdown from "react-dropdown";
 import LogoTitle from "../Logo/LogoTitle";
 import WelcomeMessage from "../WelcomeMessage/WelcomeMessage";
@@ -48,6 +49,13 @@ const Header = ({ isBreak }: HeaderProps): JSX.Element => {
 					color={workGrey}
 					onClick={(): void => {
 						setIsUsernameModalOpen(!isUsernamModalOpen);
+
+						// react ga
+						ReactGA.event({
+							category: "Username",
+							action: "Click",
+							label: "Username Modal Open",
+						});
 					}}
 				/>
 				<ModalComponent

diff --git a/src/components/LandingPage/LandingPage.tsx b/src/components/LandingPage/LandingPage.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
-import axios from "axios";
 import ReactGA from "react-ga4";
+import axios from "axios";
 import { useContext, useEffect, useState } from "react";
 import { ThemeContext } from "styled-components";
 import { HiOutlineRefresh } from "react-icons/hi";
@@ -26,7 +26,6 @@ import validRoomname from "../../helpers/validRoomname";
 import { StyledImg } from "../Logo/LogoTitle.styled";
 import ContributorsWidget from "../Contributors/ContributorsWidget";
 import { ContributorsWidgetPosition } from "../Contributors/ContributorsWidget.styled";
-import UsernameContext from "../Username/UsernameContext";
 
 const LandingPage = (props: {
 	globalUsersConnected: number;
@@ -36,7 +35,6 @@ const LandingPage = (props: {
 	const { globalUsersConnected, isBreak, isConnected } = props;
 	const [slugName, setSlugName] = useState<string>("");
 	const [isActivated, setIsActivated] = useState<boolean>(false);
-	const { userName } = useContext(UsernameContext);
 
 	const navigate = useNavigate();
 
@@ -70,14 +68,6 @@ const LandingPage = (props: {
 		document.title = "Community Focus";
 	}, []);
 
-	useEffect(() => {
-		ReactGA.send({
-			hitType: "pageview",
-			page: `landingPage`,
-			userID: userName,
-		});
-	}, []);
-
 	return (
 		<>
 			<Header isBreak={isBreak} />
@@ -127,6 +117,13 @@ const LandingPage = (props: {
 								setTimeout(() => {
 									setIsActivated(false);
 								}, 500);
+
+								// react ga
+								ReactGA.event({
+									category: "Landing Page",
+									action: "Click",
+									label: "Refresh Room Name",
+								});
 							}}
 							style={{
 								cursor: "pointer",
@@ -142,6 +139,13 @@ const LandingPage = (props: {
 						type="button"
 						onClick={(): void => {
 							navigateToRoom();
+
+							// react ga
+							ReactGA.event({
+								category: "Landing Page",
+								action: "Click",
+								label: "Join a room",
+							});
 						}}
 						disabled={validRoomname(slugName) !== false}
 						data-tooltip-id="my-tooltip"
@@ -161,6 +165,13 @@ const LandingPage = (props: {
 							}}
 							onClick={(): void => {
 								navigateToContributors();
+
+								// react ga
+								ReactGA.event({
+									category: "Landing Page",
+									action: "Click",
+									label: "Contributors",
+								});
 							}}
 							onKeyDown={(
 								event: React.KeyboardEvent<HTMLInputElement>
@@ -176,22 +187,36 @@ const LandingPage = (props: {
 						<BsDiscord
 							size={20}
 							style={{ cursor: "pointer", margin: "0 0 0 5px" }}
-							onClick={(): Window | null =>
-								window.open(
+							onClick={(): Window | null => {
+								// react ga
+								ReactGA.event({
+									category: "Landing Page",
+									action: "Click",
+									label: "Discord",
+								});
+
+								return window.open(
 									"https://leonnoel.com/100devs/",
 									"_blank"
-								)
-							}
+								);
+							}}
 						/>
 						<AiFillGithub
 							size={20}
 							style={{ cursor: "pointer", margin: "0 0 0 5px" }}
-							onClick={(): Window | null =>
-								window.open(
+							onClick={(): Window | null => {
+								// react ga
+								ReactGA.event({
+									category: "Landing Page",
+									action: "Click",
+									label: "Github",
+								});
+
+								return window.open(
 									"https://github.com/CommunityFocus/",
 									"_blank"
-								)
-							}
+								);
+							}}
 						/>
 					</StyledShareText>
 				</StyledBottomText>