add react consent and react-ga

ui/index.html

@@ -43,20 +43,20 @@
 		/>
 
 		<!-- Google tag (gtag.js) -->
-		<script
+		<!-- <script
 			async
 			src="https://www.googletagmanager.com/gtag/js?id=G-9K8N22TZZS"
-		></script>
+		></script> -->
 		<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script>
-		<script>
+		<!-- <script>
 			window.dataLayer = window.dataLayer || [];
 			function gtag() {
 				dataLayer.push(arguments);
 			}
 			gtag("js", new Date());
 
 			gtag("config", "G-9K8N22TZZS");
-		</script>
+		</script> -->
 
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/logo.svg" />

ui/package.json

@@ -32,8 +32,10 @@
 		"lucide-react": "^0.262.0",
 		"marked": "^7.0.1",
 		"react": "^18.2.0",
+		"react-cookie-consent": "^8.0.1",
 		"react-dom": "^18.2.0",
 		"react-error-boundary": "^4.0.10",
+		"react-ga4": "^2.1.0",
 		"react-head": "^3.4.2",
 		"react-markdown": "6",
 		"react-router-dom": "^6.11.1",

ui/src/App.tsx

@@ -5,6 +5,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import RoutesWithPageTitle from "pages/Routes";
 import Sidebar from "components/Layouts/Sidebar";
 import FloatingHeader from "components/Layouts/FloatingHeader";
+import CookieConsent from "pages/Footer/CookieConsent";
 
 const { Content } = Layout;
 
@@ -26,6 +27,7 @@ const App: React.FC = () => {
 					</Layout>
 				</Layout>
 			</ConfigProvider>
+			<CookieConsent />
 		</ErrorBoundary>
 	);
 };

ui/src/components/Hoc/withPageTitle/utils/hooks.ts

@@ -11,12 +11,13 @@ const usePageTitle = () => {
 	};
 
 	const { title, description, id } = page;
-	return [
+
+	return {
 		title,
 		description,
-		HELP[id] || "",
-		`https://binarytree.dev${pathname}`,
-	];
+		helpText: HELP[id] || "",
+		url: `https://binarytree.dev${pathname}`,
+	};
 };
 
 export default usePageTitle;

ui/src/components/Hoc/withPageTitle/withPageTitle.tsx

@@ -10,7 +10,7 @@ const withPageTitle = <T extends object>(
 	WrappedComponent: React.ComponentType<T>
 ) => {
 	const WithPageTitle = (props: T) => {
-		const [title, description, helpText, url] = usePageTitle();
+		const { title, description, helpText, url } = usePageTitle();
 
 		return (
 			<div

ui/src/pages/Footer/CookieConsent/index.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from "react";
+import CookiConsent, {
+	Cookies,
+	getCookieConsentValue,
+} from "react-cookie-consent";
+import { Link } from "react-router-dom";
+import ReactGA from "react-ga4";
+import usePageTitle from "components/Hoc/withPageTitle/utils/hooks";
+
+const CookieConsent: React.FC = () => {
+	const { title, url } = usePageTitle();
+
+	const handleAcceptCookie = () => {
+		const GOOGLE_ANALYTICS_ID = "G-9K8N22TZZS";
+		if (GOOGLE_ANALYTICS_ID) {
+			ReactGA.initialize(GOOGLE_ANALYTICS_ID);
+			ReactGA.send({
+				hitType: "pageview",
+				page: url,
+				title,
+			});
+		}
+	};
+
+	const handleDeclineCookie = () => {
+		Cookies.remove("_ga");
+		Cookies.remove("_gat");
+		Cookies.remove("_gid");
+	};
+
+	useEffect(() => {
+		const isConsent = getCookieConsentValue();
+		if (isConsent === "true") {
+			handleAcceptCookie();
+		}
+	}, []);
+	return (
+		<CookiConsent
+			onAccept={handleAcceptCookie}
+			onDecline={handleDeclineCookie}
+			enableDeclineButton
+			flipButtons={true}
+			style={{
+				maxWidth: "350px",
+				margin: "20px",
+				borderRadius: "10px",
+				fontSize: "17px",
+			}}
+			buttonStyle={{
+				padding: "8px 20px",
+				fontSize: "17px",
+				borderRadius: "2px",
+			}}
+			declineButtonStyle={{
+				padding: "8px 20px",
+				fontSize: "17px",
+				borderRadius: "2px",
+			}}
+			declineButtonClasses=""
+			declineButtonText="Decline"
+			buttonText="Accept"
+		>
+			<div>
+				This website uses cookies to enhance the user experience. if you
+				are interested to know about our cookie policy then{" "}
+				<Link to={"/cookie-policy"} style={{ color: "white" }}>
+					check out
+				</Link>{" "}
+				here
+			</div>
+		</CookiConsent>
+	);
+};
+
+export default CookieConsent;

ui/yarn.lock

@@ -3128,8 +3128,10 @@ __metadata:
     lucide-react: ^0.262.0
     marked: ^7.0.1
     react: ^18.2.0
+    react-cookie-consent: ^8.0.1
     react-dom: ^18.2.0
     react-error-boundary: ^4.0.10
+    react-ga4: ^2.1.0
     react-head: ^3.4.2
     react-markdown: 6
     react-router-dom: ^6.11.1
@@ -5622,6 +5624,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-cookie@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "js-cookie@npm:2.2.1"
+  checksum: 9b1fb980a1c5e624fd4b28ea4867bb30c71e04c4484bb3a42766344c533faa684de9498e443425479ec68609e96e27b60614bfe354877c449c631529b6d932f2
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -8207,6 +8216,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-cookie-consent@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "react-cookie-consent@npm:8.0.1"
+  dependencies:
+    js-cookie: ^2.2.1
+  peerDependencies:
+    react: ">=16"
+  checksum: c99f3e40e3091c439956498158b5b8906cce170763836d6fade98a06ce667eca25aaf3bc407e10a6fb72fc44e5178a2ebf14cbbe4e1b5684a74b7d7f484bd359
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^18.2.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
@@ -8230,6 +8250,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-ga4@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "react-ga4@npm:2.1.0"
+  checksum: f7fb41141418d4ad14756f1126a1e9958db37d4d84ae6cd798043dc03a390b6dba74d69311af0349f0b9580a43bda8930138194ccc29c4100efe446e2d6eb057
+  languageName: node
+  linkType: hard
+
 "react-head@npm:^3.4.2":
   version: 3.4.2
   resolution: "react-head@npm:3.4.2"