custom useAnalytics hook, move plausibleprovider to proviers

complexdatacollective · Nov 6, 2023 · 255e821 · 255e821
1 parent fc797be
commit 255e821
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 31 deletions.
diff --git a/app/(dashboard)/dashboard/_components/ProtocolUploader.tsx b/app/(dashboard)/dashboard/_components/ProtocolUploader.tsx
@@ -4,8 +4,6 @@ import { ChevronDown, ChevronUp } from 'lucide-react';
 import type { FileWithPath } from 'react-dropzone';
 import { generateReactHelpers } from '@uploadthing/react/hooks';
 import { useState, useCallback } from 'react';
-import { usePlausible } from 'next-plausible';
-
 import { importProtocol } from '../_actions/importProtocol';
 import { Button } from '~/components/ui/Button';
 
@@ -22,6 +20,7 @@ import type { UploadFileResponse } from 'uploadthing/client';
 import { Collapsible, CollapsibleContent } from '~/components/ui/collapsible';
 import ActiveProtocolSwitch from '~/app/(dashboard)/dashboard/_components/ActiveProtocolSwitch';
 import { api } from '~/trpc/client';
+import { useAnalytics } from '~/hooks/useAnalytics';
 
 export default function ProtocolUploader({
   onUploaded,
@@ -36,11 +35,10 @@ export default function ProtocolUploader({
     progress: true,
     error: 'dsfsdf',
   });
-  const plausible = usePlausible();
 
   const utils = api.useUtils();
-
   const appSettings = api.appSettings.get.useQuery();
+  const trackEvent = useAnalytics();
 
   const handleUploadComplete = async (
     res: UploadFileResponse[] | undefined,
@@ -70,11 +68,8 @@ export default function ProtocolUploader({
     }
 
     await utils.protocol.get.lastUploaded.refetch();
-    plausible('ProtocolImported', {
-      props: {
-        installationID: appSettings?.data?.installationId,
-      },
-    });
+
+    trackEvent('ProtocolImported', appSettings?.data?.installationId);
 
     setDialogContent({
       title: 'Protocol import',

diff --git a/app/(onboard)/_components/OnboardSteps/Documentation.tsx b/app/(onboard)/_components/OnboardSteps/Documentation.tsx
@@ -2,19 +2,17 @@ import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card';
 import { FileText, MonitorPlay } from 'lucide-react';
 import { setAppConfigured } from '~/app/_actions';
 import SubmitButton from '~/components/ui/SubmitButton';
-import { usePlausible } from 'next-plausible';
 import { api } from '~/trpc/client';
+import { useAnalytics } from '~/hooks/useAnalytics';
 
 function Documentation() {
   const appSettings = api.appSettings.get.useQuery();
+  const trackEvent = useAnalytics();
 
-  const plausible = usePlausible();
   const handleAppConfigured = async () => {
     await setAppConfigured();
 
-    plausible('AppSetup', {
-      props: { installationID: appSettings?.data?.installationId },
-    });
+    trackEvent('AppSetup', appSettings?.data?.installationId);
   };
 
   return (

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,8 +6,6 @@ import { getServerSession } from '~/utils/auth';
 import { api } from '~/trpc/server';
 import { Toaster } from '~/components/ui/toaster';
 import { revalidatePath, revalidateTag } from 'next/cache';
-import PlausibleProvider from 'next-plausible';
-import { env } from '~/env.mjs';
 
 export const metadata = {
   title: 'Network Canvas Fresco',
@@ -29,19 +27,6 @@ async function RootLayout({ children }: { children: React.ReactNode }) {
 
   return (
     <html lang="en">
-      <head>
-        <PlausibleProvider
-          domain="fresco.networkcanvas.com"
-          taggedEvents={true}
-          manualPageviews={true}
-          trackLocalhost={env.NODE_ENV === 'development' ? true : false}
-          // for testing, remove env.NODE_ENV === 'production' enable tracking in dev
-          enabled={appSettings?.allowAnalytics && env.NODE_ENV === 'production'}
-          // Uncomment the following lines to use self hosted
-          // selfHosted={true}
-          // customDomain="https://analytics.networkcanvas.com"
-        />
-      </head>
       <body>
         <RedirectWrapper
           configured={!!appSettings?.configured}

diff --git a/hooks/useAnalytics.ts b/hooks/useAnalytics.ts
@@ -0,0 +1,13 @@
+import { usePlausible } from 'next-plausible';
+
+export function useAnalytics() {
+  const plausible = usePlausible();
+
+  const trackEvent = (eventName: string, installationId?: string) => {
+    installationId
+      ? plausible(eventName, { props: { installationId } })
+      : plausible(eventName);
+  };
+
+  return trackEvent;
+}
diff --git a/providers/Providers.tsx b/providers/Providers.tsx
@@ -4,18 +4,35 @@ import { TRPCReactProvider } from '~/trpc/client';
 import { SessionProvider } from '~/providers/SessionProvider';
 import type { Session } from 'lucia';
 import { headers } from 'next/headers';
+import PlausibleProvider from 'next-plausible';
+import { env } from 'process';
+import { api } from '~/trpc/server';
 
-export default function Providers({
+export default async function Providers({
   children,
   initialSession,
 }: {
   children: React.ReactNode;
   initialSession: Session | null;
-}): ReactElement {
+}): Promise<ReactElement> {
+  const appSettings = await api.appSettings.get.query();
+
   return (
     <TRPCReactProvider headers={headers()}>
       <ReactQueryDevtools initialIsOpen={true} />
       <SessionProvider session={initialSession}>{children}</SessionProvider>
+      <PlausibleProvider
+        domain="fresco.networkcanvas.com"
+        taggedEvents={true}
+        manualPageviews={true}
+        trackLocalhost={env.NODE_ENV === 'development' ? true : false}
+        enabled={appSettings?.allowAnalytics}
+        // for production, add env.NODE_ENV === 'production' to disable tracking in dev
+        //enabled={appSettings?.allowAnalytics && env.NODE_ENV === 'production'}
+        // Uncomment the following lines to use self hosted
+        // selfHosted={true}
+        // customDomain="https://analytics.networkcanvas.com"
+      />
     </TRPCReactProvider>
   );
 }