From ee8d1842262287de18b903235344705a40f2097f Mon Sep 17 00:00:00 2001 From: ashik-75 Date: Mon, 25 Sep 2023 16:58:43 +0600 Subject: [PATCH 1/2] add react consent and react-ga --- ui/index.html | 8 +-- ui/package.json | 2 + ui/src/App.tsx | 2 + ui/src/pages/Footer/CookieConsent/index.tsx | 72 +++++++++++++++++++++ ui/yarn.lock | 27 ++++++++ 5 files changed, 107 insertions(+), 4 deletions(-) create mode 100644 ui/src/pages/Footer/CookieConsent/index.tsx diff --git a/ui/index.html b/ui/index.html index 1f9241f1..39f30bd8 100644 --- a/ui/index.html +++ b/ui/index.html @@ -43,12 +43,12 @@ /> - + > --> - --> diff --git a/ui/package.json b/ui/package.json index 719a4eda..f62210d0 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/App.tsx b/ui/src/App.tsx index e9adb58a..e9f81ddf 100644 --- a/ui/src/App.tsx +++ b/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 = () => { + ); }; diff --git a/ui/src/pages/Footer/CookieConsent/index.tsx b/ui/src/pages/Footer/CookieConsent/index.tsx new file mode 100644 index 00000000..42e7f079 --- /dev/null +++ b/ui/src/pages/Footer/CookieConsent/index.tsx @@ -0,0 +1,72 @@ +import React, { useEffect } from "react"; +import CookiConsent, { + Cookies, + getCookieConsentValue, +} from "react-cookie-consent"; +import { Link } from "react-router-dom"; +import ReactGA from "react-ga4"; + +const CookieConsent: React.FC = () => { + const handleAcceptCookie = () => { + const GOOGLE_ANALYTICS_ID = "G-9K8N22TZZS"; + if (GOOGLE_ANALYTICS_ID) { + ReactGA.initialize(GOOGLE_ANALYTICS_ID); + ReactGA.send({ + hitType: "pageview", + page: window.location.pathname, + title: "Custom Title", + }); + } + }; + + const handleDeclineCookie = () => { + Cookies.remove("_ga"); + Cookies.remove("_gat"); + Cookies.remove("_gid"); + }; + + useEffect(() => { + const isConsent = getCookieConsentValue(); + if (isConsent === "true") { + handleAcceptCookie(); + } + }, []); + return ( + +
+ This website uses cookies to enhance the user experience. if you + are interested to know about our cookie policy then{" "} + + check out + {" "} + here +
+ + ); +}; + +export default CookieConsent; diff --git a/ui/yarn.lock b/ui/yarn.lock index caf95936..7a5a877e 100644 --- a/ui/yarn.lock +++ b/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" From 17ab2a1366ab3095bd63f051d0a4ad963ca1bb76 Mon Sep 17 00:00:00 2001 From: ashik-75 Date: Mon, 25 Sep 2023 17:14:47 +0600 Subject: [PATCH 2/2] update by hooks --- ui/src/components/Hoc/withPageTitle/utils/hooks.ts | 9 +++++---- ui/src/components/Hoc/withPageTitle/withPageTitle.tsx | 2 +- ui/src/pages/Footer/CookieConsent/index.tsx | 7 +++++-- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/ui/src/components/Hoc/withPageTitle/utils/hooks.ts b/ui/src/components/Hoc/withPageTitle/utils/hooks.ts index bff92759..d8909e62 100644 --- a/ui/src/components/Hoc/withPageTitle/utils/hooks.ts +++ b/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; diff --git a/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx index 16683c7d..fe16dfb6 100644 --- a/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx +++ b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx @@ -10,7 +10,7 @@ const withPageTitle = ( WrappedComponent: React.ComponentType ) => { const WithPageTitle = (props: T) => { - const [title, description, helpText, url] = usePageTitle(); + const { title, description, helpText, url } = usePageTitle(); return (
{ + 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: window.location.pathname, - title: "Custom Title", + page: url, + title, }); } };