diff --git a/web/components/post/CreatePostView/hooks.ts b/web/components/post/CreatePostView/hooks.ts index 8739db4..b769815 100644 --- a/web/components/post/CreatePostView/hooks.ts +++ b/web/components/post/CreatePostView/hooks.ts @@ -1,11 +1,10 @@ import { useForm, hasLength } from '@mantine/form'; import { notifications } from '@mantine/notifications'; import { IconCheck } from '@tabler/icons'; -import { logEvent } from 'firebase/analytics'; import { useCreatePostMutation } from 'generated/client'; import { useRouter } from 'next/router'; import { useAuthState } from 'react-firebase-hooks/auth'; -import { analytics, auth } from 'web/lib/firebase'; +import { auth, getAnalyticsAndlogEvent } from 'web/lib/firebase'; export const useCreatePost = () => { const [user] = useAuthState(auth); @@ -42,7 +41,7 @@ export const useCreatePost = () => { }); if (data) { - logEvent(analytics, 'post_created', { userId: user?.uid }); + await getAnalyticsAndlogEvent('post_created', { userId: user?.uid }); await router.push('/'); notifications.show({ @@ -54,7 +53,9 @@ export const useCreatePost = () => { } if (errors) { - logEvent(analytics, 'post_created_error', { userId: user?.uid }); + await getAnalyticsAndlogEvent('post_created_error', { + userId: user?.uid, + }); notifications.show({ message: errors[0].message, color: 'red', diff --git a/web/components/ui/AppHeader.tsx b/web/components/ui/AppHeader.tsx index 2216ed8..9c22eb7 100644 --- a/web/components/ui/AppHeader.tsx +++ b/web/components/ui/AppHeader.tsx @@ -17,12 +17,11 @@ import { IconSun, IconTextPlus, } from '@tabler/icons'; -import { logEvent } from 'firebase/analytics'; import Link from 'next/link'; import { useRouter } from 'next/router'; import React, { useEffect } from 'react'; import { useAuthState, useSignInWithGoogle } from 'react-firebase-hooks/auth'; -import { analytics, auth } from 'web/lib/firebase'; +import { auth, getAnalyticsAndlogEvent } from 'web/lib/firebase'; export const AppHeader = () => { const [user] = useAuthState(auth); @@ -113,7 +112,7 @@ export const AppHeader = () => { variant="outline" onClick={() => { signInWithGoogle() - .then(() => logEvent(analytics, 'user_login')) + .then(() => getAnalyticsAndlogEvent('user_login')) .catch(console.error); }} > diff --git a/web/lib/firebase.ts b/web/lib/firebase.ts index 1e8d019..7db63c1 100644 --- a/web/lib/firebase.ts +++ b/web/lib/firebase.ts @@ -1,6 +1,11 @@ -import { getAnalytics } from 'firebase/analytics'; +import { + getAnalytics as _getAnalytics, + isSupported, + logEvent, +} from 'firebase/analytics'; import { initializeApp, getApps, getApp, FirebaseApp } from 'firebase/app'; import { browserLocalPersistence, getAuth } from 'firebase/auth'; +import { Tail } from 'web/lib/types'; const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, @@ -22,7 +27,23 @@ if (getApps().length > 0) { export const app = fireApp; export const auth = getAuth(app); -export const analytics = getAnalytics(app); + +export const getAnalytics = async () => { + if (await isSupported()) { + return _getAnalytics(app); + } + return null; +}; + +export const getAnalyticsAndlogEvent = async ( + ...params: Tail> +) => { + const analytics = await getAnalytics(); + + if (analytics) { + logEvent(analytics, ...params); + } +}; // eslint-disable-next-line @typescript-eslint/no-floating-promises -- This is intentional auth.setPersistence(browserLocalPersistence); diff --git a/web/lib/types.ts b/web/lib/types.ts new file mode 100644 index 0000000..20460d6 --- /dev/null +++ b/web/lib/types.ts @@ -0,0 +1,6 @@ +export type Tail = ((...args: T) => void) extends ( + _arg: any, + ...rest: infer R +) => void + ? R + : never;