Fixed: Max Recursion reached (#10)

* Revert "Revert "Revert "Revert "Don't track mixpanel events on dev."""" This reverts commit 1ef4520. * Remove track. * Update. * Update. * Update logo image.
Comfy-Org · May 23, 2024 · 07c1557 · 07c1557
1 parent b32bda0
commit 07c1557
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 69 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,5 @@
 NEXT_PUBLIC_FIREBASE_API_KEY="AIzaSyDa_YMeyzV0SkVe92vBZ1tVikWBmOU5KVE"
 NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="dreamboothy-dev.firebaseapp.com"
 NEXT_PUBLIC_FIREBASE_PROJECT_ID="dreamboothy-dev"
-NEXT_PUBLIC_BACKEND_URL="http://localhost:8080"
+NEXT_PUBLIC_BACKEND_URL="http://localhost:8080"
+NEXT_PUBLIC_MIXPANEL_KEY=""
diff --git a/components/AuthUI/AuthUI.tsx b/components/AuthUI/AuthUI.tsx
@@ -1,4 +1,3 @@
-import mixpanel from 'mixpanel-browser'
 import { getAuth } from 'firebase/auth'
 import { Button, Card } from 'flowbite-react'
 import { useRouter } from 'next/router'
@@ -9,6 +8,8 @@ import {
 } from 'react-firebase-hooks/auth'
 import app from '../../src/firebase'
 import { toast } from 'react-toastify'
+import analytic from 'src/analytic/analytic'
+import Image from 'next/image'
 
 const AuthUI: React.FC<{}> = ({}) => {
     const router = useRouter()
@@ -73,10 +74,12 @@ const AuthUI: React.FC<{}> = ({}) => {
                             className="flex justify-center"
                             onClick={() => router.push('/')}
                         >
-                            <img
-                                src="https://flowbite.com/docs/images/logo.svg"
-                                className="h-10 cursor-pointer sm:h-16"
-                                alt="Flowbite Logo"
+                            <Image
+                                alt="Comfy Logo"
+                                src="https://storage.googleapis.com/comfy-assets/logo.png"
+                                className="h-6 mr-3 sm:h-16"
+                                width={80}
+                                height={80}
                             />
                         </div>
 
@@ -90,7 +93,7 @@ const AuthUI: React.FC<{}> = ({}) => {
                                 href="#"
                                 className="font-bold "
                                 onClick={() => {
-                                    mixpanel.track('Sign In', {
+                                    analytic.track('Sign In', {
                                         provider: 'Google',
                                     })
                                     signInWithGoogle()
@@ -141,7 +144,7 @@ const AuthUI: React.FC<{}> = ({}) => {
                             href="#"
                             className="mt-2 font-bold hover:bg-gray-50"
                             onClick={() => {
-                                mixpanel.track('Sign In', {
+                                analytic.track('Sign In', {
                                     provider: 'Github',
                                 })
                                 signInWithGithub()

diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -29,7 +29,7 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, title }) => {
             <Navbar.Brand href="/">
                 <div className="flex items-center gap-1">
                     <Image
-                        alt="Flowbite React Logo"
+                        alt="Comfy Logo"
                         src="https://storage.googleapis.com/comfy-assets/logo.png"
                         width={36}
                         height={36}

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -10,12 +10,7 @@ import 'react-toastify/dist/ReactToastify.css'
 import { ToastContainer } from 'react-toastify'
 import { useAuthState } from 'react-firebase-hooks/auth'
 import app from 'src/firebase'
-
-mixpanel.init('f919d1b9da9a57482453c72ef7b16d88', {
-    debug: true,
-    track_pageview: true,
-    persistence: 'localStorage',
-})
+import analytic from 'src/analytic/analytic'
 
 export default function Layout({ children }: React.PropsWithChildren) {
     const router = useRouter()
@@ -29,8 +24,8 @@ export default function Layout({ children }: React.PropsWithChildren) {
 
     React.useEffect(() => {
         if (user) {
-            mixpanel.identify(user.uid)
-            mixpanel.people.set({
+            analytic.identify(user.uid)
+            analytic.setProfile({
                 $email: user.email,
                 $name: user.displayName,
             })

diff --git a/components/nodes/NodeDetails.tsx b/components/nodes/NodeDetails.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 import { useRouter } from 'next/router'
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { Button, Spinner } from 'flowbite-react'
 import nodesLogo from '../../public/images/nodesLogo.svg'
 import NodeVDrawer from './NodeVDrawer'
@@ -11,11 +11,9 @@ import {
     useGetNode,
     useGetPermissionOnPublisherNodes,
     useListNodeVersions,
-    useListNodesForPublisher,
-    useListPublishersForUser,
 } from 'src/api/generated'
 import CopyableCodeBlock from '../CodeBlock/CodeBlock'
-import mixpanel from 'mixpanel-browser'
+import analytic from 'src/analytic/analytic'
 
 export function formatRelativeDate(dateString: string) {
     const date = new Date(dateString)
@@ -60,7 +58,7 @@ const NodeDetails = () => {
         error: listNodeVersionsError,
     } = useListNodeVersions(nodeId as string)
     const toggleDrawer = () => {
-        mixpanel.track('View Node Version Details')
+        analytic.track('View Node Version Details')
         setIsDrawerOpen(!isDrawerOpen)
     }
 
@@ -70,7 +68,7 @@ const NodeDetails = () => {
     }
 
     const handleOpenModal = () => {
-        mixpanel.track('Edit Node')
+        analytic.track('Edit Node')
         setIsEditModal(true)
     }
 
@@ -257,7 +255,7 @@ const NodeDetails = () => {
                             <Button
                                 className="flex-shrink-0 px-4 text-white bg-blue-500 rounded whitespace-nowrap text-[16px]"
                                 onClick={() => {
-                                    mixpanel.track('View Repository')
+                                    analytic.track('View Repository')
                                 }}
                             >
                                 <a
@@ -299,7 +297,7 @@ const NodeDetails = () => {
                             <Button
                                 className="flex-shrink-0 px-4 text-white bg-blue-500 rounded whitespace-nowrap text-[16px]"
                                 onClick={() =>
-                                    mixpanel.track(
+                                    analytic.track(
                                         'Download Latest Node Version'
                                     )
                                 }

diff --git a/components/nodes/NodeVDrawer.tsx b/components/nodes/NodeVDrawer.tsx
@@ -4,6 +4,7 @@ import { formatRelativeDate } from './NodeDetails'
 import { toast } from 'react-toastify'
 import { Button } from 'flowbite-react'
 import mixpanel from 'mixpanel-browser'
+import analytic from 'src/analytic/analytic'
 type NodeVDrawerProps = {
     version: NodeVersion
     isDrawerOpen: boolean
@@ -32,7 +33,7 @@ const NodeVDrawer: React.FC<NodeVDrawerProps> = ({
             toast.error('Cannot Update')
             return
         }
-        mixpanel.track('Deprecate Node Version', {
+        analytic.track('Deprecate Node Version', {
             version: version.version,
             publisherId: publisherId,
             nodeId: nodeId,
@@ -116,7 +117,7 @@ const NodeVDrawer: React.FC<NodeVDrawerProps> = ({
                         <Button
                             className="flex-shrink-0 px-4 text-white bg-blue-500 rounded whitespace-nowrap text-[16px] mt-5"
                             onClick={() => {
-                                mixpanel.track('Download Node Version', {
+                                analytic.track('Download Node Version', {
                                     version: version.version,
                                     publisherId: publisherId,
                                     nodeId: nodeId,

diff --git a/components/publisher/PublisherDetail.tsx b/components/publisher/PublisherDetail.tsx
@@ -13,7 +13,7 @@ import {
 import EditPublisherModal from '../publisher/EditPublisherModal'
 import { toast } from 'react-toastify'
 import PersonalAccessTokenTable from '../AccessTokens/PersonalAccessTokenTable'
-import mixpanel from 'mixpanel-browser'
+import analytic from 'src/analytic/analytic'
 
 type PublisherDetailProps = {
     publisher: Publisher
@@ -36,15 +36,15 @@ const PublisherDetail: React.FC<PublisherDetailProps> = ({ publisher }) => {
     const [openEditModal, setOpenEditModal] = useState(false)
 
     const handleCreateButtonClick = () => {
-        mixpanel.track('Create Publisher API Token Clicked')
+        analytic.track('Create Publisher API Token Clicked')
         setOpenSecretKeyModal(true)
     }
 
     const onCloseCreateSecretKeyModal = () => {
         setOpenSecretKeyModal(false)
     }
     const handleEditButtonClick = () => {
-        mixpanel.track('Edit Publisher Clicked')
+        analytic.track('Edit Publisher Clicked')
         setOpenEditModal(true)
     }
 

diff --git a/global/mixpanel.ts b/global/mixpanel.ts
diff --git a/src/analytic/analytic.ts b/src/analytic/analytic.ts
@@ -0,0 +1,56 @@
+import mixpanel from 'mixpanel-browser'
+
+interface UserProfile {
+    $email: string | null
+    $first_name?: string
+    $last_name?: string
+    $phone?: string
+    [key: string]: any
+}
+
+class MixpanelAnalytics {
+    private isProduction: boolean
+
+    constructor() {
+        this.isProduction = process.env.NODE_ENV === 'production'
+
+        if (this.isProduction && process.env.NEXT_PUBLIC_MIXPANEL_KEY) {
+            mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_KEY, {
+                debug: true,
+                track_pageview: true,
+                persistence: 'localStorage',
+            })
+        }
+    }
+
+    public track(event: string, properties?: object): void {
+        if (this.isProduction) {
+            mixpanel.track(event, properties)
+        } else {
+            console.log(
+                `Mixpanel Track - Event: ${event}, Properties: ${JSON.stringify(properties)}`
+            )
+        }
+    }
+
+    public identify(distinctId: string): void {
+        if (this.isProduction) {
+            mixpanel.identify(distinctId)
+        } else {
+            console.log(`Mixpanel Identify - Distinct ID: ${distinctId}`)
+        }
+    }
+
+    public setProfile(updates: UserProfile): void {
+        if (this.isProduction) {
+            mixpanel.people.set(updates)
+        } else {
+            console.log(
+                `Mixpanel Set Profile - Updates: ${JSON.stringify(updates)}`
+            )
+        }
+    }
+}
+
+const analytic = new MixpanelAnalytics()
+export default analytic