add analytics events

src/components/BottomBar.tsx

@@ -1,7 +1,20 @@
 import { Typography, Link } from "@mui/material";
 import "./BottomBar.css";
+import FirebaseAnalytics from "../services/FirebaseAnalytics";
+import { logEvent } from "firebase/analytics";
+import { useLocation } from "react-router-dom";
+import { useCallback } from "react";
 
 function BottomBar() {
+  const location = useLocation();
+
+  useCallback(() => {
+    logEvent(FirebaseAnalytics, "page_view", {
+      page_path: `${location.pathname}`,
+      page_title: document.title,
+    });
+  }, [location]);
+
   return (
     <Typography align="center">
       <Link href="https://dudko.dev" underline="none">

src/components/auth/Action.tsx

@@ -14,6 +14,8 @@ import { Alert, Snackbar } from "@mui/material";
 import { FirebaseError } from "firebase/app";
 import "./Action.css";
 import { useNavigate, useSearchParams } from "react-router-dom";
+import FirebaseAnalytics from "../../services/FirebaseAnalytics";
+import { logEvent } from "firebase/analytics";
 
 const modes = ["resetEmail", "resetPassword", "verifyEmail"] as const;
 
@@ -62,6 +64,7 @@ export default function Action() {
       })
       .finally(() => {
         setActionIsRunning(false);
+        logEvent(FirebaseAnalytics, "reset_password");
       });
   };
 
@@ -102,6 +105,7 @@ export default function Action() {
       })
       .finally(() => {
         setActionIsRunning(false);
+        logEvent(FirebaseAnalytics, "reset_password_confirm");
       });
   };
 
@@ -147,6 +151,7 @@ export default function Action() {
       })
       .finally(() => {
         setActionIsRunning(false);
+        logEvent(FirebaseAnalytics, "verify_email");
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mode, oobCode]);

src/components/auth/SignIn.tsx

@@ -17,6 +17,8 @@ import SignInWithButton, {
   enabledProviders,
 } from "./SignInWithButton";
 import { useNavigate } from "react-router-dom";
+import FirebaseAnalytics from "../../services/FirebaseAnalytics";
+import { logEvent } from "firebase/analytics";
 
 export default function SignIn() {
   const [errorMessage, setErrorMessage] = useState("");
@@ -77,6 +79,7 @@ export default function SignIn() {
       })
       .finally(() => {
         setSignInIsRunning(false);
+        logEvent(FirebaseAnalytics, "login", { auth_provider: "email" });
       });
   };
 

src/components/auth/SignInWithButton.tsx

@@ -11,23 +11,26 @@ import FirebaseAuth from "../../services/FirebaseAuth";
 import "./SignInWithButton.css";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import FirebaseAnalytics from "../../services/FirebaseAnalytics";
+import { logEvent } from "firebase/analytics";
 
 export enum SignInProviders {
   apple = "apple",
   google = "google",
   github = "github",
 }
 
-export const enabledProviders: SignInProviders[] = [
-];
+export const enabledProviders: SignInProviders[] = [];
 
 function SignInWithButton(
   props: {
     provider?: SignInProviders;
     errorHandler?: (err: any) => void;
+    disableButton?: boolean;
   } = {
       provider: SignInProviders.apple,
       errorHandler: (err: any) => { },
+      disableButton: false,
     }
 ) {
   const [signInIsRunning, setSignInIsRunning] = useState(false);
@@ -57,6 +60,8 @@ function SignInWithButton(
         if (!user.user.emailVerified) {
           await sendEmailVerification(user.user, {
             url: `${window.location.origin}`,
+          }).then(() => {
+            logEvent(FirebaseAnalytics, "send_verification_email");
           });
         }
         loggedIn = true;
@@ -67,6 +72,9 @@ function SignInWithButton(
       .finally(() => {
         setSignInIsRunning(false);
         if (loggedIn) navigate("/");
+        logEvent(FirebaseAnalytics, "login", {
+          auth_provider: provider.providerId,
+        });
       });
   };
 
@@ -90,7 +98,7 @@ function SignInWithButton(
       sx={{ mt: 3, mb: 2 }}
       style={{ fontFamily: "FontAwersome" }}
       onClick={signInFun}
-      disabled={signInIsRunning}
+      disabled={signInIsRunning || props.disableButton}
     >
       {getSymbol()}
     </Button>

src/components/auth/SignUp.tsx

@@ -17,6 +17,8 @@ import SignInWithButton, {
   enabledProviders,
 } from "./SignInWithButton";
 import { useNavigate } from "react-router-dom";
+import FirebaseAnalytics from "../../services/FirebaseAnalytics";
+import { logEvent } from "firebase/analytics";
 
 export default function SignUp() {
   const [errorMessage, setErrorMessage] = useState("");
@@ -61,6 +63,8 @@ export default function SignUp() {
       .then((user) =>
         sendEmailVerification(user.user, {
           url: `${window.location.origin}`,
+        }).then(() => {
+          logEvent(FirebaseAnalytics, "send_verification_email");
         })
       )
       .then(() => {
@@ -76,6 +80,7 @@ export default function SignUp() {
       })
       .finally(() => {
         setSignUpIsRunning(false);
+        logEvent(FirebaseAnalytics, "sign_up");
       });
   };
 
@@ -165,6 +170,7 @@ export default function SignUp() {
                       });
                     }
                   }}
+                  disableButton={signUpIsRunning || !acceptPolicies}
                 ></SignInWithButton>
               </Grid>
             ))}

src/services/FirebaseAnalytics.tsx

@@ -0,0 +1,6 @@
+import { getAnalytics } from "firebase/analytics";
+import FirebaseApp from "./FirebaseApp";
+
+const FirebaseAnalytics = getAnalytics(FirebaseApp);
+
+export default FirebaseAnalytics;