From 574a304b0a8ec8968a8ed035179ae617fc272d93 Mon Sep 17 00:00:00 2001
From: Dang Nguyen Nguyen <ndnguyen2003@gmail.com>
Date: Sun, 24 Sep 2023 19:30:53 -0700
Subject: [PATCH] added react-ga

---
 package-lock.json                        | 10 ++++++++++
 package.json                             |  1 +
 src/App.js                               |  4 +++-
 src/components/AboutPage/AboutPage.jsx   |  7 +++++--
 src/components/Home/Home.jsx             |  2 +-
 src/components/Map/Map.jsx               |  9 +++++++++
 src/components/UpdatePage/UpdatePage.jsx |  5 +++++
 7 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ffbe500..0230f52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "react": "^18.2.0",
         "react-calendar": "^4.6.0",
         "react-dom": "^18.2.0",
+        "react-ga": "^3.3.1",
         "react-icons": "^4.10.1",
         "react-leaflet": "^4.2.1",
         "react-resizable": "^3.0.5",
@@ -16509,6 +16510,15 @@
         }
       }
     },
+    "node_modules/react-ga": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz",
+      "integrity": "sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==",
+      "peerDependencies": {
+        "prop-types": "^15.6.0",
+        "react": "^15.6.2 || ^16.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
diff --git a/package.json b/package.json
index c95238f..b3d5626 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-calendar": "^4.6.0",
     "react-dom": "^18.2.0",
+    "react-ga": "^3.3.1",
     "react-icons": "^4.10.1",
     "react-leaflet": "^4.2.1",
     "react-resizable": "^3.0.5",
diff --git a/src/App.js b/src/App.js
index b627ec6..77fee29 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,7 +10,9 @@ import { ChakraProvider } from "@chakra-ui/react";
 import "leaflet/dist/leaflet.css";
 import { AuthContextProvider } from "./context/AuthContext";
 import AboutPage from "./components/AboutPage/AboutPage";
-//
+import ReactGA from "react-ga";
+
+ReactGA.initialize("UA-283774176-1");
 function App() {
   return (
     <AuthContextProvider>
diff --git a/src/components/AboutPage/AboutPage.jsx b/src/components/AboutPage/AboutPage.jsx
index f10cfec..5fa1f44 100644
--- a/src/components/AboutPage/AboutPage.jsx
+++ b/src/components/AboutPage/AboutPage.jsx
@@ -10,14 +10,17 @@ import "swiper/css/navigation";
 import logo from "../../assets/images/small_logo.png";
 import login_page from "../../assets/images/login_page.jpg";
 import axios from "axios";
+import ReactGA from "react-ga";
 
 export default function AboutPage() {
   const navigate = useNavigate();
   const [screenWidth, setScreenWidth] = useState(window.screen.width);
   const [data, setData] = useState([]);
   const [leaderboard, setLeaderboard] = useState([]);
-  console.log("leaderboard", leaderboard);
-  console.log("data", data);
+
+  useEffect(() => {
+    ReactGA.pageview(window.location.pathname);
+  }, []);
 
   window.onresize = () => {
     setScreenWidth(window.screen.width);
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 65f571e..d0e2872 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -196,7 +196,7 @@ export default function Home() {
     };
 
     getLeaderboard();
-  }, [user]);
+  }, [user, token]);
 
   // set token to auth
   useEffect(() => {
diff --git a/src/components/Map/Map.jsx b/src/components/Map/Map.jsx
index 683ef8d..d7101dc 100644
--- a/src/components/Map/Map.jsx
+++ b/src/components/Map/Map.jsx
@@ -22,6 +22,7 @@ import InfoModal from "../InfoModal/InfoModal";
 
 import DataContext from "../../context/DataContext";
 import { UserAuth } from "../../context/AuthContext";
+import ReactGA from "react-ga";
 
 import axios from "axios";
 
@@ -65,6 +66,10 @@ export default function Map({
     setShowDonut(false);
   };
 
+  useEffect(() => {
+    ReactGA.pageview(window.location.pathname);
+  }, []);
+
   useEffect(() => {
     const handleFocus = async () => {
       await handleMarkerSelect();
@@ -101,6 +106,10 @@ export default function Map({
               onOpen();
               setItemData(item);
               setFocusLocation(item.location);
+              ReactGA.event({
+                category: item.name,
+                action: "click on item",
+              });
             },
           }}
           icon={
diff --git a/src/components/UpdatePage/UpdatePage.jsx b/src/components/UpdatePage/UpdatePage.jsx
index 2896596..510c544 100644
--- a/src/components/UpdatePage/UpdatePage.jsx
+++ b/src/components/UpdatePage/UpdatePage.jsx
@@ -12,6 +12,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import { ChevronRightIcon, ArrowBackIcon } from "@chakra-ui/icons";
 import { SiInstagram } from "react-icons/si";
+import ReactGA from "react-ga";
 
 export default function UpdatePage() {
   const navigate = useNavigate();
@@ -21,6 +22,10 @@ export default function UpdatePage() {
     navigate("/");
   };
 
+  useEffect(() => {
+    ReactGA.pageview(window.location.pathname);
+  }, []);
+
   window.onresize = () => {
     setScreenWidth(window.screen.width);
   };