feat: final check on develop now time to deploy

apps/campus/package.json

@@ -58,7 +58,7 @@
     "react-bootstrap": "1.6.4",
     "react-datepicker": "3.8.0",
     "react-dom": "17.0.2",
-    "react-ga": "3.3.0",
+    "react-ga4": "^2.1.0",
     "react-helmet": "6.1.0",
     "react-i18next": "11.15.6",
     "react-router-dom": "^6.7.0",

apps/forum/package.json

@@ -66,7 +66,7 @@
     "i18next": "19.9.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-ga": "3.3.0",
+    "react-ga4": "^2.1.0",
     "react-helmet": "6.1.0",
     "react-i18next": "11.15.6",
     "react-infinite-scroll-component": "^6.1.0",

apps/forum/src/components/form/ConfirmModal.tsx

@@ -9,23 +9,31 @@ type Props = {
   cancelAction: () => void;
 };
 
-export const ConfirmModal = ({ questionText, confirmText, cancelText, confirmAction, cancelAction }: Props) => {
+export const ConfirmModal = ({
+  questionText,
+  confirmText,
+  cancelText,
+  confirmAction,
+  cancelAction,
+}: Props) => {
   return (
     <Modal>
-      <div>
+      <div className="rounded-md bg-light-bgMain dark:bg-dark-bgMain border border-light-text3 dark:border-dark-text border-2">
         <div className="relative p-6 flex-auto">
-          <h3 className="text-2xl">{questionText}</h3>
+          <h3 className="text-2xl text-light-text1 dark:text-dark-text1">
+            {questionText}
+          </h3>
         </div>
         <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
           <button
-            className="text-white bg-light-main active:bg-yellow-700 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
+            className="text-white dark:text-dark-text1 bg-light-main active:bg-yellow-700 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
             type="button"
             onClick={confirmAction}
           >
             {confirmText}
           </button>
           <button
-            className="text-light-main background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
+            className="text-light-main dark:text-dark-main background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
             type="button"
             onClick={cancelAction}
           >
@@ -35,4 +43,4 @@ export const ConfirmModal = ({ questionText, confirmText, cancelText, confirmAct
       </div>
     </Modal>
   );
-}
+};

apps/forum/src/root.component.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { configAuth } from "wasedatime-ui";
-
+import ReactGA from "react-ga4";
 import App from "@app/components/App";
 import { ThemeProvider } from "@app/utils/theme-context";
 import { RecoilRoot } from "recoil";
@@ -24,6 +24,8 @@ const apiConfig = {
 };
 API.configure(apiConfig);
 
+ReactGA.initialize(import.meta.env.VITE_GA_ID, {});
+
 export default function Root(props) {
   return (
     <section className="h-screen">

apps/root/package.json

@@ -78,7 +78,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-error-boundary": "3.1.4",
-    "react-ga": "3.3.0",
+    "react-ga4": "^2.1.0",
     "react-helmet": "6.1.0",
     "react-i18next": "13.0.1",
     "react-responsive": "9.0.0-beta.10",

apps/root/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, lazy, Suspense, useContext } from "react"
 
 import { Hub } from "@aws-amplify/core"
 import { LoadingSpinner } from "wasedatime-ui"
-import ReactGA from "react-ga"
+import ReactGA from "react-ga4"
 import { Helmet } from "react-helmet"
 import { useTranslation } from "react-i18next"
 import { BrowserRouter, Routes, Route } from "react-router-dom"

apps/root/src/components/Home.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from "react"
 import { useNavigate } from "react-router-dom"
 
 import { WrapperWithBackground, Header, Logo, media } from "wasedatime-ui"
-import ReactGA from "react-ga"
+import ReactGA from "react-ga4"
 import { WithTranslation, withTranslation } from "react-i18next"
 import { navigateToUrl } from "single-spa"
 import styled from "styled-components"

apps/root/src/components/aboutUs/AboutUs.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useContext, lazy, Suspense } from "react"
 
 import { Wrapper, Header, LoadingSpinner, media } from "wasedatime-ui"
-import ReactGA from "react-ga"
+import ReactGA from "react-ga4"
 import { Helmet } from "react-helmet"
 import { useTranslation } from "react-i18next"
 import styled from "styled-components"
@@ -32,11 +32,14 @@ const AboutUsFlex = styled.div`
 `
 
 const AboutUsMenu = styled.div`
-  ${media("tablet",`text-align: center;`)}
-  ${media("phone",`
+  ${media("tablet", `text-align: center;`)}
+  ${media(
+    "phone",
+    `
     text-align: center;
     font-size:3.5vw;
-    `)}
+    `
+  )}
 `
 
 const AboutUs = () => {

apps/root/src/components/frame/Nav.tsx

@@ -9,7 +9,7 @@ import React, {
 
 import { SignInModal, sizes } from "wasedatime-ui"
 import { createBrowserHistory } from "history"
-import ReactGA from "react-ga"
+import ReactGA from "react-ga4"
 import { useTranslation } from "react-i18next"
 import MediaQuery from "react-responsive"
 import { navigateToUrl } from "single-spa"
@@ -54,14 +54,19 @@ const Nav = () => {
       i18n.changeLanguage(localStorage.getItem("wasedatime-lng"))
     }
 
-    const page = window.location.pathname + window.location.search
-    ReactGA.set({ page })
-    ReactGA.pageview(page)
+    const page_path = window.location.pathname + window.location.search
+    ReactGA.send({
+      hitType: "pageview",
+      page_path: page_path,
+    })
 
     return history.listen(({ location, action }) => {
       if (action === "POP") {
-        ReactGA.set({ page: location.pathname })
-        ReactGA.pageview(location.pathname)
+        const new_page_path = location.pathname + location.search
+        ReactGA.send({
+          hitType: "pageview",
+          page_path: new_page_path,
+        })
       }
     })
   }, [])
@@ -97,7 +102,6 @@ const Nav = () => {
       icon: <FeedsIcon />,
       iconHovered: <FeedsIconHovered />,
     },
-
   ]
 
   return (

apps/root/src/components/home/HomeModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Modal, sizes } from "wasedatime-ui"
-import ReactGA from "react-ga"
+import ReactGA from "react-ga4"
 import { WithTranslation, withTranslation } from "react-i18next"
 import MediaQuery from "react-responsive"
 

apps/root/src/utils/theme-context.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, createContext } from "react"
 
-import ReactGA from "react-ga"
+import ReactGA from "react-ga4"
 
 import { gaAppendActionWithTheme, gaChangeTheme } from "@app/ga/eventActions"
 import { gaTheme } from "@app/ga/eventCategories"

apps/root/src/wasedatime-root-config.ts

@@ -2,7 +2,7 @@ import React from "react"
 
 import { configAuth } from "wasedatime-ui"
 import ReactDOM from "react-dom"
-import ReactGA from "react-ga"
+import ReactGA from "react-ga4"
 import { navigateToUrl, registerApplication, start } from "single-spa"
 import {
   constructApplications,
@@ -38,10 +38,7 @@ start()
 
 configAuth()
 
-ReactGA.initialize(import.meta.env.VITE_GA_ID, {
-  debug: false,
-  titleCase: false,
-})
+ReactGA.initialize(import.meta.env.VITE_GA_ID, {})
 
 ReactDOM.render(React.createElement("span"), document.getElementById("loading"))
 ReactDOM.render(React.createElement(Nav), document.getElementById("nav"))

apps/syllabus/package.json

@@ -70,7 +70,7 @@
     "react": "17.0.2",
     "react-copy-to-clipboard": "5.1.0",
     "react-dom": "17.0.2",
-    "react-ga": "3.3.0",
+    "react-ga4": "^2.1.0",
     "react-helmet": "6.1.0",
     "react-i18next": "11.17.0",
     "react-minimal-pie-chart": "8.3.0",