chore: identify users and group them by workspace in posthog

latitude-dev · Sep 19, 2024 · bac7d71 · bac7d71
1 parent dd50acf
commit bac7d71
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 10 deletions.
diff --git a/apps/web/src/app/(private)/layout.tsx b/apps/web/src/app/(private)/layout.tsx
@@ -11,7 +11,7 @@ import { getSession } from '$/services/auth/getSession'
 import { ROUTES } from '$/services/routes'
 import { redirect } from 'next/navigation'
 
-import { CSPostHogProvider } from '../providers'
+import { CSPostHogProvider, IdentifyUser } from '../providers'
 
 export default async function PrivateLayout({
   children,
@@ -25,13 +25,15 @@ export default async function PrivateLayout({
 
   return (
     <CSPostHogProvider>
-      <SocketIOProvider>
-        <SessionProvider currentUser={user} workspace={workspace}>
-          <LatitudeWebsocketsProvider socketServer={env.WEBSOCKETS_SERVER}>
-            {children}
-          </LatitudeWebsocketsProvider>
-        </SessionProvider>
-      </SocketIOProvider>
+      <IdentifyUser user={user} workspace={workspace}>
+        <SocketIOProvider>
+          <SessionProvider currentUser={user} workspace={workspace}>
+            <LatitudeWebsocketsProvider socketServer={env.WEBSOCKETS_SERVER}>
+              {children}
+            </LatitudeWebsocketsProvider>
+          </SessionProvider>
+        </SocketIOProvider>
+      </IdentifyUser>
     </CSPostHogProvider>
   )
 }
diff --git a/apps/web/src/app/providers.tsx b/apps/web/src/app/providers.tsx
@@ -1,10 +1,11 @@
 'use client'
 
-import { ReactNode } from 'react'
+import { ReactNode, useEffect } from 'react'
 
+import { User, Workspace } from '@latitude-data/core/browser'
 import { envClient } from '$/envClient'
 import posthog from 'posthog-js'
-import { PostHogProvider } from 'posthog-js/react'
+import { PostHogProvider, usePostHog } from 'posthog-js/react'
 
 if (typeof window !== 'undefined') {
   posthog.init(envClient.NEXT_PUBLIC_POSTHOG_KEY, {
@@ -15,3 +16,26 @@ if (typeof window !== 'undefined') {
 export function CSPostHogProvider({ children }: { children: ReactNode }) {
   return <PostHogProvider client={posthog}>{children}</PostHogProvider>
 }
+
+export function IdentifyUser({
+  user,
+  workspace,
+  children,
+}: {
+  user: User
+  workspace: Workspace
+  children: ReactNode
+}) {
+  const posthog = usePostHog()
+
+  useEffect(() => {
+    if (user) {
+      posthog?.identify(user.id, {
+        email: user.email,
+      })
+      posthog?.group('workspace', String(workspace.id))
+    }
+  }, [posthog, user.id, user.email, workspace.id])
+
+  return children
+}