diff --git a/app/(dashboard)/dashboard/_components/ProtocolUploader.tsx b/app/(dashboard)/dashboard/_components/ProtocolUploader.tsx
index 8f9c6109..db49eeb9 100644
--- 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
index 6d87b467..43f480b9 100644
--- 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
index d45353b5..87473e04 100644
--- 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 (
-
-
-
{
+ installationId
+ ? plausible(eventName, { props: { installationId } })
+ : plausible(eventName);
+ };
+
+ return trackEvent;
+}
diff --git a/providers/Providers.tsx b/providers/Providers.tsx
index 23243794..001c72ec 100644
--- 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 {
+ const appSettings = await api.appSettings.get.query();
+
return (
{children}
+
);
}