react-app: Create analytics provider

refs #349
oursky · Aug 2, 2022 · c3296d0 · c3296d0
1 parent 5b55ae9
commit c3296d0
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 34 deletions.
diff --git a/react-app/src/navigation/AppRouter.tsx b/react-app/src/navigation/AppRouter.tsx
@@ -12,51 +12,54 @@ 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 AnalyticsProvider from "../providers/AnalyticsProvider";
 import AppRoutes from "./AppRoutes";
 
 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 />}
-          />
+      <AnalyticsProvider>
+        <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 />
+        )}
+      </AnalyticsProvider>
     </BrowserRouter>
   );
 };

diff --git a/react-app/src/providers/AnalyticsProvider.tsx b/react-app/src/providers/AnalyticsProvider.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+import * as ReactGA from "react-ga";
+import { useLocation } from "react-router-dom";
+import Config from "../config/Config";
+
+interface AnalyticsProviderProps {
+  children?: React.ReactNode;
+}
+
+const AnalyticsContext = React.createContext(null as any);
+
+const AnalyticsProvider: React.FC<AnalyticsProviderProps> = (props) => {
+  const { children } = props;
+  const [isInitialized, setIsInitialized] = useState<boolean>(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    ReactGA.pageview(location.pathname + location.search);
+  }, [isInitialized, location]);
+
+  useEffect(() => {
+    if (Config.googleAnalyticsId) {
+      ReactGA.initialize(Config.googleAnalyticsId);
+    }
+    setIsInitialized(true);
+  }, []);
+
+  return (
+    <AnalyticsContext.Provider value={null}>
+      {isInitialized && children}
+    </AnalyticsContext.Provider>
+  );
+};
+
+export default AnalyticsProvider;