react-app: Create RouterAnalytics component

refs oursky#349

react-app/src/navigation/AppRouter.tsx

@@ -12,51 +12,55 @@ import AppScaffold from "../components/AppScaffold/AppScaffold";
 import ProposalDetailRouter from "../components/ProposalDetailScreen/ProposalDetailRouter";
 import ValidatorDetailScreen from "../components/ValidatorDetailScreen/ValidatorDetailScreen";
 import ValidatorScreen from "../components/ValidatorScreen/ValidatorScreen";
+import Config from "../config/Config";
 import AppRoutes from "./AppRoutes";
+import RouterAnalytics from "./RouterAnalytics";
 
 const AppRouter: React.FC = () => {
   const wallet = useWallet();
   return (
     <BrowserRouter>
-      <Routes>
-        <Route element={<AppScaffold />}>
-          <Route path={AppRoutes.Overview} element={<OverviewScreen />} />
-          <Route path={AppRoutes.Dummy} element={<DummyScreen />} />
-          <Route path={AppRoutes.Proposals} element={<ProposalScreen />} />
-          <Route path={AppRoutes.Validators} element={<ValidatorScreen />} />
-          <Route
-            path={AppRoutes.NewProposal}
-            element={<CreateProposalScreen />}
-          />
-          <Route
-            path={`${AppRoutes.ProposalDetail}/*`}
-            element={<ProposalDetailRouter />}
-          />
+      <RouterAnalytics id={Config.googleAnalyticsId}>
+        <Routes>
+          <Route element={<AppScaffold />}>
+            <Route path={AppRoutes.Overview} element={<OverviewScreen />} />
+            <Route path={AppRoutes.Dummy} element={<DummyScreen />} />
+            <Route path={AppRoutes.Proposals} element={<ProposalScreen />} />
+            <Route path={AppRoutes.Validators} element={<ValidatorScreen />} />
+            <Route
+              path={AppRoutes.NewProposal}
+              element={<CreateProposalScreen />}
+            />
+            <Route
+              path={`${AppRoutes.ProposalDetail}/*`}
+              element={<ProposalDetailRouter />}
+            />
+            <Route
+              path={`${AppRoutes.ValidatorDetail}/*`}
+              element={<ValidatorDetailScreen />}
+            />
+            <Route path={AppRoutes.Portfolio} element={<PortfolioScreen />} />
+            <Route
+              path={AppRoutes.OtherPortfolio}
+              element={<PortfolioScreen />}
+            />
+          </Route>
+
           <Route
-            path={`${AppRoutes.ValidatorDetail}/*`}
-            element={<ValidatorDetailScreen />}
+            path={AppRoutes.NotFound}
+            element={<ErrorView type={ErrorType.NotFound} />}
           />
-          <Route path={AppRoutes.Portfolio} element={<PortfolioScreen />} />
           <Route
-            path={AppRoutes.OtherPortfolio}
-            element={<PortfolioScreen />}
+            path={AppRoutes.ErrorInvalidAddress}
+            element={<ErrorView type={ErrorType.InvalidAddress} />}
           />
-        </Route>
-
-        <Route
-          path={AppRoutes.NotFound}
-          element={<ErrorView type={ErrorType.NotFound} />}
-        />
-        <Route
-          path={AppRoutes.ErrorInvalidAddress}
-          element={<ErrorView type={ErrorType.InvalidAddress} />}
-        />
-        <Route path="*" element={<Navigate to={AppRoutes.NotFound} />} />
-      </Routes>
+          <Route path="*" element={<Navigate to={AppRoutes.NotFound} />} />
+        </Routes>
 
-      {wallet.status === ConnectionStatus.Connecting && (
-        <WalletConnectingScreen />
-      )}
+        {wallet.status === ConnectionStatus.Connecting && (
+          <WalletConnectingScreen />
+        )}
+      </RouterAnalytics>
     </BrowserRouter>
   );
 };

react-app/src/navigation/RouterAnalytics.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+import * as ReactGA from "react-ga";
+import { useLocation } from "react-router-dom";
+import { useEffectOnce } from "../hooks/useEffectOnce";
+
+interface RouterAnalyticsProps {
+  id: string | null;
+  children: React.ReactNode;
+}
+
+const RouterAnalytics: React.FC<RouterAnalyticsProps> = (props) => {
+  const { id, children } = props;
+  const location = useLocation();
+  const [isInitialized, setIsInitialized] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    ReactGA.pageview(location.pathname + location.search);
+  }, [location, isInitialized]);
+
+  useEffectOnce(
+    () => {
+      if (id) {
+        ReactGA.initialize(id);
+      }
+      setIsInitialized(true);
+    },
+    () => true
+  );
+
+  return <>{children}</>;
+};
+
+export default RouterAnalytics;