diff --git a/app/src/components/nav/ProjectMenu.tsx b/app/src/components/nav/ProjectMenu.tsx index a14022e..ab65092 100644 --- a/app/src/components/nav/ProjectMenu.tsx +++ b/app/src/components/nav/ProjectMenu.tsx @@ -197,26 +197,6 @@ const ProjectOption = ({ spacing={4} > {proj.name} - - } - variant="ghost" - size="xs" - p={0} - onMouseEnter={() => setGearHovered(true)} - onMouseLeave={() => setGearHovered(false)} - _hover={{ bgColor: isActive ? "gray.300" : "gray.100", transitionDelay: 0 }} - borderRadius={4} - /> ); }; diff --git a/app/src/pages/_app.tsx b/app/src/pages/_app.tsx index 3cd0ce3..afcb894 100644 --- a/app/src/pages/_app.tsx +++ b/app/src/pages/_app.tsx @@ -8,7 +8,7 @@ import { ChakraThemeProvider } from "~/theme/ChakraThemeProvider"; import { SyncAppStore } from "~/state/sync"; import NextAdapterApp from "next-query-params/app"; import { QueryParamProvider } from "use-query-params"; -import { SessionIdentifier } from "~/utils/analytics/clientAnalytics"; +import { PosthogAppProvider } from "~/utils/analytics/posthog"; const MyApp: AppType<{ session: Session | null }> = ({ Component, @@ -34,14 +34,15 @@ const MyApp: AppType<{ session: Session | null }> = ({ - - - - - - - - + + + + + + + + + ); diff --git a/app/src/utils/analytics/clientAnalytics.ts b/app/src/utils/analytics/clientAnalytics.ts deleted file mode 100644 index 50bd5d2..0000000 --- a/app/src/utils/analytics/clientAnalytics.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { type Session } from "next-auth"; -import { useSession } from "next-auth/react"; -import { useEffect } from "react"; - -import posthog from "posthog-js"; -import { env } from "~/env.mjs"; - -// Make sure we're in the browser -const enableBrowserAnalytics = typeof window !== "undefined"; - -if (env.NEXT_PUBLIC_POSTHOG_KEY && enableBrowserAnalytics) { - posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, { - api_host: `${env.NEXT_PUBLIC_HOST}/ingest`, - }); -} - -export const identifySession = (session: Session) => { - if (!session.user) return; - posthog.identify(session.user.id, { - name: session.user.name, - email: session.user.email, - }); -}; - -export const SessionIdentifier = () => { - const session = useSession().data; - useEffect(() => { - if (session && enableBrowserAnalytics) identifySession(session); - }, [session]); - return null; -}; diff --git a/app/src/utils/analytics/posthog.tsx b/app/src/utils/analytics/posthog.tsx new file mode 100644 index 0000000..c26c8fe --- /dev/null +++ b/app/src/utils/analytics/posthog.tsx @@ -0,0 +1,42 @@ +"use client"; +import { type Session } from "next-auth"; +import { useSession } from "next-auth/react"; +import React, { ReactNode, useEffect } from "react"; +import { PostHogProvider } from "posthog-js/react"; + +import posthog from "posthog-js"; +import { env } from "~/env.mjs"; +import { useRouter } from "next/router"; + +// Make sure we're in the browser +const inBrowser = typeof window !== "undefined"; + +export const PosthogAppProvider = ({ children }: { children: ReactNode }) => { + const session = useSession().data; + const router = useRouter(); + + useEffect(() => { + // Track page views + const handleRouteChange = () => posthog?.capture("$pageview"); + router.events.on("routeChangeComplete", handleRouteChange); + + return () => { + router.events.off("routeChangeComplete", handleRouteChange); + }; + }, [router.events]); + + useEffect(() => { + if (env.NEXT_PUBLIC_POSTHOG_KEY && inBrowser && session && session.user) { + posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, { + api_host: `${env.NEXT_PUBLIC_HOST}/ingest`, + }); + + posthog.identify(session.user.id, { + name: session.user.name, + email: session.user.email, + }); + } + }, [session]); + + return {children}; +};