fix june trigger (#2145)

* fix sending track multiple times

* add missing imports

* replace track with page method

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();
         })}
       />

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",

packages/www/components/Sidebar/index.tsx

@@ -27,10 +27,11 @@ 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";
+import { useCallback, useEffect } from "react";
 
 export const NavLink = styled(A, {
   fontSize: 14,
@@ -73,9 +74,21 @@ export type SidebarId =
 
 const Sidebar = ({ id }: { id: SidebarId }) => {
   const { user, logout } = useApi();
+  const router = useRouter();
+
   const June = useJune();
 
-  June?.track(`sidebar ${id}`);
+  useEffect(() => {
+    const handleRouteChange = (url, { shallow }) => {
+      if (June) June.page(url);
+    };
+
+    router.events.on("routeChangeStart", handleRouteChange);
+
+    return () => {
+      router.events.off("routeChangeStart", handleRouteChange);
+    };
+  }, [June]);
 
   return (
     <Box

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();
   };
 

packages/www/components/StreamDetails/Record.tsx

@@ -8,15 +8,20 @@ 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();
   const [openSnackbar] = useSnackbar();
   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) {

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;
                 })
               }>

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";
@@ -27,6 +28,10 @@ const StreamSetupBox = ({
 
   const June = useJune();
 
+  const trackEvent = useCallback(() => {
+    if (June) June.track(events.stream.keyCopy);
+  }, [June]);
+
   return (
     <>
       <Flex
@@ -84,7 +89,7 @@ const StreamSetupBox = ({
           <Text
             variant="neutral"
             css={{ fontSize: "$2", mt: "$2" }}
-            onClick={() => June.track(events.stream.keyCopy)}>
+            onClick={() => trackEvent()}>
             <ClipButton
               value={
                 activeTab === "Streaming Software"

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";
@@ -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>

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();

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 {

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>

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) {