From f044a451b9c3cfc524a1094e42d353725e9073d0 Mon Sep 17 00:00:00 2001
From: Suhail Kakar <suhail.zahed@gmail.com>
Date: Tue, 23 Apr 2024 03:22:38 +0530
Subject: [PATCH 1/3] fix sending track multiple times

---
 packages/www/components/ApiKeys/index.tsx     |  6 +++++-
 packages/www/components/Header/index.tsx      | 14 ++++++++++---
 packages/www/components/Sidebar/index.tsx     | 12 +++++++++--
 .../MultistreamTargetsTable/index.tsx         |  6 +++++-
 .../www/components/StreamDetails/Record.tsx   |  7 ++++++-
 .../StreamDetails/StreamPlayerBox/index.tsx   | 21 ++++++++++++++++---
 .../StreamDetails/StreamSetupBox.tsx          |  6 +++++-
 .../www/components/UsageSummary/index.tsx     |  6 +++++-
 packages/www/hooks/use-june.tsx               |  1 -
 .../www/pages/dashboard/billing/index.tsx     |  6 +++++-
 packages/www/pages/register.tsx               |  8 +++++--
 11 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/packages/www/components/ApiKeys/index.tsx b/packages/www/components/ApiKeys/index.tsx
index 725137f6f5..351f652c43 100644
--- a/packages/www/components/ApiKeys/index.tsx
+++ b/packages/www/components/ApiKeys/index.tsx
@@ -40,6 +40,10 @@ const ApiKeysTable = ({
     [userId]
   );
 
+  const trackEvent = useCallback(() => {
+    if (June) June.track(events.developer.apiKeyCreate);
+  }, [June]);
+
   return (
     <>
       <Table
@@ -53,7 +57,7 @@ const ApiKeysTable = ({
         emptyState={makeEmptyState(createDialogState)}
         selectAction={makeSelectAction("Delete", deleteDialogState.onOn)}
         createAction={makeCreateAction("Create API Key", () => {
-          June.track(events.developer.apiKeyCreate);
+          trackEvent();
           return createDialogState.onOn();
         })}
       />
diff --git a/packages/www/components/Header/index.tsx b/packages/www/components/Header/index.tsx
index 70c7ac7194..ef916e40a6 100644
--- a/packages/www/components/Header/index.tsx
+++ b/packages/www/components/Header/index.tsx
@@ -18,7 +18,7 @@ import SupportIcon from "../../public/img/icons/support.svg";
 import DocumentationIcon from "../../public/img/icons/documentation.svg";
 import PolygonIcon from "../../public/img/icons/polygonWithoutBorderBottom.svg";
 import CheckedIcon from "../../public/img/icons/checked.svg";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useCallback } from "react";
 import { useApi, useHubspotForm } from "hooks";
 import { useJune, events } from "hooks/use-june";
 
@@ -69,6 +69,14 @@ const Header = ({ breadcrumbs = [] }) => {
     }
   }, [user]);
 
+  const trackEvent = useCallback(() => {
+    if (June) June.track(events.all.documentation);
+  }, [June]);
+
+  const trackFeedbackEvent = useCallback(() => {
+    if (June) June.track(events.all.feedback);
+  }, [June]);
+
   return (
     <Box
       id="test123"
@@ -113,7 +121,7 @@ const Header = ({ breadcrumbs = [] }) => {
                 as={A}
                 target="_blank"
                 size={2}
-                onClick={() => June.track(events.all.documentation)}
+                onClick={() => trackEvent()}
                 css={{
                   cursor: "default",
                   color: "$hiContrast",
@@ -134,7 +142,7 @@ const Header = ({ breadcrumbs = [] }) => {
             <Button
               ghost
               as={DropdownMenuTrigger}
-              onClick={() => June.track(events.all.feedback)}
+              onClick={() => trackFeedbackEvent()}
               size={2}
               css={{
                 mr: "$2",
diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx
index b93c0be9e8..2f33c0320f 100644
--- a/packages/www/components/Sidebar/index.tsx
+++ b/packages/www/components/Sidebar/index.tsx
@@ -31,6 +31,7 @@ import Router from "next/router";
 import { RocketIcon, ChatBubbleIcon, LoopIcon } from "@radix-ui/react-icons";
 import Contact from "../Contact";
 import { useJune, events } from "hooks/use-june";
+import { useCallback, useEffect } from "react";
 
 export const NavLink = styled(A, {
   fontSize: 14,
@@ -73,9 +74,16 @@ export type SidebarId =
 
 const Sidebar = ({ id }: { id: SidebarId }) => {
   const { user, logout } = useApi();
-  const June = useJune();
 
-  June?.track(`sidebar ${id}`);
+  const june = useJune();
+
+  const trackSidebarEvent = useCallback(() => {
+    if (june) june.track(`sidebar ${id} new`);
+  }, [june]);
+
+  useEffect(() => {
+    trackSidebarEvent();
+  }, [trackSidebarEvent]);
 
   return (
     <Box
diff --git a/packages/www/components/StreamDetails/MultistreamTargetsTable/index.tsx b/packages/www/components/StreamDetails/MultistreamTargetsTable/index.tsx
index adf2b6a2ee..91056652fe 100644
--- a/packages/www/components/StreamDetails/MultistreamTargetsTable/index.tsx
+++ b/packages/www/components/StreamDetails/MultistreamTargetsTable/index.tsx
@@ -77,8 +77,12 @@ const MultistreamTargetsTable = ({
     [state.tableId, stream, streamHealth, invalidateTargetId, targetRefs]
   );
 
+  const trackEvent = useCallback(() => {
+    if (June) June.track(events.stream.multistreamTarget);
+  }, [June]);
+
   const onCreateClick = () => {
-    June.track(events.stream.multistreamTarget);
+    trackEvent();
     return saveDialogState.onOn();
   };
 
diff --git a/packages/www/components/StreamDetails/Record.tsx b/packages/www/components/StreamDetails/Record.tsx
index 6066872a4b..e2b96e51ca 100644
--- a/packages/www/components/StreamDetails/Record.tsx
+++ b/packages/www/components/StreamDetails/Record.tsx
@@ -8,6 +8,7 @@ import { useToggleState } from "hooks/use-toggle-state";
 import { useApi } from "../../hooks";
 import ErrorDialog from "../ErrorDialog";
 import { useJune, events } from "hooks/use-june";
+import { useCallback } from "react";
 
 const Record = ({ stream, invalidate, isSwitch = true }) => {
   const { patchStream } = useApi();
@@ -15,8 +16,12 @@ const Record = ({ stream, invalidate, isSwitch = true }) => {
   const errorRecordDialogState = useToggleState();
   const June = useJune();
 
+  const trackEvent = useCallback(() => {
+    if (June) June.track(events.stream.recordingToggle);
+  }, [June]);
+
   const onCheckedChange = async () => {
-    June.track(events.stream.recordingToggle);
+    trackEvent();
     if (stream.isActive) {
       errorRecordDialogState.onOn();
     } else if (!stream.record) {
diff --git a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
index 59b462546f..3bb859f39e 100644
--- a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
+++ b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
@@ -11,7 +11,14 @@ import { Share2Icon } from "@radix-ui/react-icons";
 import { Stream } from "@livepeer.studio/api";
 import AssetSharePopup from "../../AssetDetails/AssetSharePopup";
 
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { FaKey, FaVideo } from "react-icons/fa";
 import { FiVideo } from "react-icons/fi";
 import StreamSetupBox from "../StreamSetupBox";
@@ -62,6 +69,14 @@ const StreamPlayerBox = ({
     }
   }, [isBroadcastLive]);
 
+  const trackEventEmbed = useCallback(() => {
+    if (June) June.track(events.stream.embed);
+  }, [June]);
+
+  const trackEventGoLive = useCallback(() => {
+    if (June) June.track(events.stream.goLive);
+  }, [June]);
+
   return (
     <Box
       css={{
@@ -125,7 +140,7 @@ const StreamPlayerBox = ({
               </Button>
             }
             onEmbedVideoClick={() => {
-              June.track(events.stream.embed);
+              trackEventEmbed();
               return onEmbedVideoClick();
             }}
           />
@@ -143,7 +158,7 @@ const StreamPlayerBox = ({
               disabled={isStreamActiveFromExternal}
               onClick={() =>
                 setIsBroadcastLive((prev) => {
-                  prev && June.track(events.stream.goLive);
+                  prev && trackEventGoLive();
                   return !prev;
                 })
               }>
diff --git a/packages/www/components/StreamDetails/StreamSetupBox.tsx b/packages/www/components/StreamDetails/StreamSetupBox.tsx
index dc908abc41..9415dce7e3 100644
--- a/packages/www/components/StreamDetails/StreamSetupBox.tsx
+++ b/packages/www/components/StreamDetails/StreamSetupBox.tsx
@@ -27,6 +27,10 @@ const StreamSetupBox = ({
 
   const June = useJune();
 
+  const trackEvent = useCallback(() => {
+    if (June) June.track(events.stream.keyCopy);
+  }, [June]);
+
   return (
     <>
       <Flex
@@ -84,7 +88,7 @@ const StreamSetupBox = ({
           <Text
             variant="neutral"
             css={{ fontSize: "$2", mt: "$2" }}
-            onClick={() => June.track(events.stream.keyCopy)}>
+            onClick={() => trackEvent()}>
             <ClipButton
               value={
                 activeTab === "Streaming Software"
diff --git a/packages/www/components/UsageSummary/index.tsx b/packages/www/components/UsageSummary/index.tsx
index a961103026..0b71a1161e 100644
--- a/packages/www/components/UsageSummary/index.tsx
+++ b/packages/www/components/UsageSummary/index.tsx
@@ -209,6 +209,10 @@ const UsageSummary = () => {
 
   const June = useJune();
 
+  const trackEvent = useCallback(() => {
+    if (June) June.track(events.landing.billingCta);
+  }, [June]);
+
   return (
     <>
       <Flex
@@ -304,7 +308,7 @@ const UsageSummary = () => {
           <A
             variant="primary"
             css={{ display: "flex", alignItems: "center" }}
-            onClick={() => June.track(events.landing.billingCta)}>
+            onClick={() => trackEvent()}>
             View billing <ArrowRightIcon />
           </A>
         </Link>
diff --git a/packages/www/hooks/use-june.tsx b/packages/www/hooks/use-june.tsx
index ac57177877..eb10f219b2 100644
--- a/packages/www/hooks/use-june.tsx
+++ b/packages/www/hooks/use-june.tsx
@@ -49,7 +49,6 @@ export function useJune() {
       let response = AnalyticsBrowser.load({
         writeKey: "3VINzqYVjfOxFyIr",
       });
-      console.log("response", response);
       setAnalytics(response);
     };
     loadAnalytics();
diff --git a/packages/www/pages/dashboard/billing/index.tsx b/packages/www/pages/dashboard/billing/index.tsx
index 36d9d571e2..ff4fadf198 100644
--- a/packages/www/pages/dashboard/billing/index.tsx
+++ b/packages/www/pages/dashboard/billing/index.tsx
@@ -181,6 +181,10 @@ const Billing = () => {
     }
   }, [user]);
 
+  const trackEvent = useCallback(() => {
+    if (June) June.track(events.billing.usageDetails);
+  }, [June]);
+
   if (!user) {
     return <Layout />;
   }
@@ -354,7 +358,7 @@ const Billing = () => {
             <A
               variant="primary"
               css={{ display: "flex", alignItems: "center" }}
-              onClick={() => June.track(events.billing.usageDetails)}>
+              onClick={() => trackEvent()}>
               View Usage Details <ArrowRightIcon />
             </A>
           </Link>
diff --git a/packages/www/pages/register.tsx b/packages/www/pages/register.tsx
index 4ec222f270..20f7354a42 100644
--- a/packages/www/pages/register.tsx
+++ b/packages/www/pages/register.tsx
@@ -10,7 +10,7 @@ import {
   Container,
   Link as A,
 } from "@livepeer/design-system";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/router";
 import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
 import { Register as Content } from "content";
@@ -56,6 +56,10 @@ const RegisterPage = () => {
     }
   }, [user]);
 
+  const trackEvent = useCallback(() => {
+    if (June) June.track(events.onboarding.register);
+  }, [June]);
+
   const onSubmit = async ({
     email,
     password,
@@ -87,7 +91,7 @@ const RegisterPage = () => {
       recaptchaToken,
     });
 
-    June.track(events.onboarding.register);
+    trackEvent();
 
     // Don't need to worry about the success case, we'll redirect
     if (res.errors) {

From 6ce57249cd36a79999bd271ac03aeb38138101a3 Mon Sep 17 00:00:00 2001
From: Suhail Kakar <suhail.zahed@gmail.com>
Date: Tue, 23 Apr 2024 03:33:42 +0530
Subject: [PATCH 2/3] add missing imports

---
 packages/www/components/Sidebar/index.tsx         |  6 +++---
 .../components/StreamDetails/StreamSetupBox.tsx   |  1 +
 packages/www/components/UsageSummary/index.tsx    |  2 +-
 packages/www/hooks/use-logged-in.tsx              | 15 ++++++++++++---
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx
index 2f33c0320f..d1af468f74 100644
--- a/packages/www/components/Sidebar/index.tsx
+++ b/packages/www/components/Sidebar/index.tsx
@@ -75,11 +75,11 @@ export type SidebarId =
 const Sidebar = ({ id }: { id: SidebarId }) => {
   const { user, logout } = useApi();
 
-  const june = useJune();
+  const June = useJune();
 
   const trackSidebarEvent = useCallback(() => {
-    if (june) june.track(`sidebar ${id} new`);
-  }, [june]);
+    if (June) June.track(`sidebar ${id}`);
+  }, [June]);
 
   useEffect(() => {
     trackSidebarEvent();
diff --git a/packages/www/components/StreamDetails/StreamSetupBox.tsx b/packages/www/components/StreamDetails/StreamSetupBox.tsx
index 9415dce7e3..5465c06b91 100644
--- a/packages/www/components/StreamDetails/StreamSetupBox.tsx
+++ b/packages/www/components/StreamDetails/StreamSetupBox.tsx
@@ -4,6 +4,7 @@ import ClipButton from "../Clipping/ClipButton";
 import ShowURL from "../ShowURL";
 import { isStaging } from "lib/utils";
 import { useJune, events } from "hooks/use-june";
+import { useCallback } from "react";
 
 export type StreamSetupBoxProps = {
   activeTab: "Browser" | "Streaming Software";
diff --git a/packages/www/components/UsageSummary/index.tsx b/packages/www/components/UsageSummary/index.tsx
index 0b71a1161e..ad41cb1bd3 100644
--- a/packages/www/components/UsageSummary/index.tsx
+++ b/packages/www/components/UsageSummary/index.tsx
@@ -13,7 +13,7 @@ import {
 import Link from "next/link";
 import { ArrowRightIcon } from "@radix-ui/react-icons";
 import UpcomingIcon from "../../public/img/icons/upcoming.svg";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useApi } from "hooks";
 import { products } from "@livepeer.studio/api/src/config";
 import { QuestionMarkCircledIcon as Help } from "@radix-ui/react-icons";
diff --git a/packages/www/hooks/use-logged-in.tsx b/packages/www/hooks/use-logged-in.tsx
index 6c937586ce..2f607571a9 100644
--- a/packages/www/hooks/use-logged-in.tsx
+++ b/packages/www/hooks/use-logged-in.tsx
@@ -1,5 +1,5 @@
 import useApi from "./use-api";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { useJune, events } from "hooks/use-june";
 
@@ -16,6 +16,16 @@ export default function useLoggedIn(shouldBeLoggedIn = true) {
   const emailVerificationMode =
     process.env.NEXT_PUBLIC_EMAIL_VERIFICATION_MODE === "true";
 
+  const trackEvent = useCallback(
+    (user) => {
+      if (June)
+        June?.identify(user.id, {
+          email: user.email,
+        });
+    },
+    [June]
+  );
+
   useEffect(() => {
     if (shouldBeLoggedIn === true) {
       if (!token) {
@@ -27,8 +37,7 @@ export default function useLoggedIn(shouldBeLoggedIn = true) {
     // console.log(shouldBeLoggedIn, user);
     // Check for user rather than token so redirects to /dashboard.
     if (shouldBeLoggedIn === false && user) {
-      process.env.NODE_ENV === "production" &&
-        June?.identify(user.id, user.email);
+      process.env.NODE_ENV === "production" && trackEvent(user);
       if (emailVerificationMode && user.emailValid === false) {
         router.replace("/verify");
       } else {

From 1f8f767f1c443bedead0fa481865396878340034 Mon Sep 17 00:00:00 2001
From: Suhail Kakar <suhail.zahed@gmail.com>
Date: Wed, 24 Apr 2024 19:18:45 +0530
Subject: [PATCH 3/3] replace track with page method

---
 packages/www/components/Sidebar/index.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx
index d1af468f74..1254789cbb 100644
--- a/packages/www/components/Sidebar/index.tsx
+++ b/packages/www/components/Sidebar/index.tsx
@@ -27,7 +27,7 @@ import {
   AssetsIcon,
 } from "./NavIcons";
 import { useApi } from "../../hooks";
-import Router from "next/router";
+import Router, { useRouter } from "next/router";
 import { RocketIcon, ChatBubbleIcon, LoopIcon } from "@radix-ui/react-icons";
 import Contact from "../Contact";
 import { useJune, events } from "hooks/use-june";
@@ -74,16 +74,21 @@ export type SidebarId =
 
 const Sidebar = ({ id }: { id: SidebarId }) => {
   const { user, logout } = useApi();
+  const router = useRouter();
 
   const June = useJune();
 
-  const trackSidebarEvent = useCallback(() => {
-    if (June) June.track(`sidebar ${id}`);
-  }, [June]);
-
   useEffect(() => {
-    trackSidebarEvent();
-  }, [trackSidebarEvent]);
+    const handleRouteChange = (url, { shallow }) => {
+      if (June) June.page(url);
+    };
+
+    router.events.on("routeChangeStart", handleRouteChange);
+
+    return () => {
+      router.events.off("routeChangeStart", handleRouteChange);
+    };
+  }, [June]);
 
   return (
     <Box