[questions][chore] add google analytics id

apps/portal/src/components/questions/AddToListDropdown.tsx

@@ -5,6 +5,8 @@ import { Fragment, useRef, useState } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { CheckIcon, HeartIcon } from '@heroicons/react/20/solid';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
+
 import { useProtectedCallback } from '~/utils/questions/useProtectedCallback';
 import { trpc } from '~/utils/trpc';
 
@@ -15,6 +17,8 @@ export type AddToListDropdownProps = {
 export default function AddToListDropdown({
   questionId,
 }: AddToListDropdownProps) {
+  const { event } = useGoogleAnalytics();
+
   const [menuOpened, setMenuOpened] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -36,6 +40,11 @@ export default function AddToListDropdown({
       // TODO: Add optimistic update
       onSuccess: () => {
         utils.invalidateQueries(['questions.lists.getListsByUser']);
+        event({
+          action: 'questions.lists',
+          category: 'engagement',
+          label: 'add question to list',
+        });
       },
     },
   );
@@ -54,8 +63,8 @@ export default function AddToListDropdown({
     document.addEventListener('click', handleClickOutside, true);
   };
 
-  const handleClickOutside = (event: MouseEvent) => {
+  const handleClickOutside = (e: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
+    if (ref.current && !ref.current.contains(e.target as Node)) {
       setMenuOpened(false);
       document.removeEventListener('click', handleClickOutside, true);
     }

apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx

@@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form';
 import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button, TextArea } from '@tih/ui';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullAnswerCard from '~/components/questions/card/FullAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
@@ -24,6 +25,7 @@ export type AnswerCommentData = {
 
 export default function QuestionPage() {
   const router = useRouter();
+  const { event } = useGoogleAnalytics();
 
   const [commentSortOrder, setCommentSortOrder] = useState<SortOrder>(
     SortOrder.DESC,
@@ -79,6 +81,11 @@ export default function QuestionPage() {
             sortType: SortType.NEW,
           },
         ]);
+        event({
+          action: 'questions.comment',
+          category: 'engagement',
+          label: 'comment on answer',
+        });
       },
     },
   );

apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx

@@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form';
 import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button, Collapsible, HorizontalDivider, TextArea } from '@tih/ui';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullQuestionCard from '~/components/questions/card/question/FullQuestionCard';
 import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard';
@@ -31,6 +32,7 @@ export type QuestionCommentData = {
 
 export default function QuestionPage() {
   const router = useRouter();
+  const { event } = useGoogleAnalytics();
 
   const [answerSortOrder, setAnswerSortOrder] = useState<SortOrder>(
     SortOrder.DESC,
@@ -108,6 +110,11 @@ export default function QuestionPage() {
         utils.invalidateQueries(
           'questions.questions.comments.getQuestionComments',
         );
+        event({
+          action: 'questions.comment',
+          category: 'engagement',
+          label: 'comment on question',
+        });
       },
     },
   );
@@ -135,6 +142,11 @@ export default function QuestionPage() {
     {
       onSuccess: () => {
         utils.invalidateQueries('questions.answers.getAnswers');
+        event({
+          action: 'questions.answer',
+          category: 'engagement',
+          label: 'add answer to question',
+        });
       },
     },
   );
@@ -147,6 +159,11 @@ export default function QuestionPage() {
           'questions.questions.encounters.getAggregatedEncounters',
         );
         utils.invalidateQueries('questions.questions.getQuestionById');
+        event({
+          action: 'questions.create_question',
+          category: 'engagement',
+          label: 'create question encounter',
+        });
       },
     },
   );

apps/portal/src/pages/questions/browse.tsx

@@ -8,6 +8,7 @@ import type { QuestionsQuestionType } from '@prisma/client';
 import type { TypeaheadOption } from '@tih/ui';
 import { Button, SlideOut } from '@tih/ui';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import QuestionOverviewCard from '~/components/questions/card/question/QuestionOverviewCard';
 import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
 import FilterSection from '~/components/questions/filter/FilterSection';
@@ -36,6 +37,7 @@ import { SortOrder } from '~/types/questions.d';
 
 export default function QuestionsBrowsePage() {
   const router = useRouter();
+  const { event } = useGoogleAnalytics();
 
   const [query, setQuery] = useState('');
 
@@ -205,6 +207,11 @@ export default function QuestionsBrowsePage() {
     {
       onSuccess: () => {
         utils.invalidateQueries('questions.questions.getQuestionsByFilter');
+        event({
+          action: 'questions.create_question',
+          category: 'engagement',
+          label: 'create_question',
+        });
       },
     },
   );

apps/portal/src/pages/questions/index.tsx

@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import type { LandingQueryData } from '~/components/questions/LandingComponent';
 import LandingComponent from '~/components/questions/LandingComponent';
 
@@ -8,6 +9,7 @@ import { APP_TITLE } from '~/utils/questions/constants';
 
 export default function QuestionsHomePage() {
   const router = useRouter();
+  const { event } = useGoogleAnalytics();
 
   const handleLandingQuery = async (data: LandingQueryData) => {
     const { companySlug, location, questionType } = data;
@@ -21,6 +23,11 @@ export default function QuestionsHomePage() {
         questionTypes: [questionType],
       },
     });
+    event({
+      action: 'questions.landing',
+      category: 'engagement',
+      label: 'navigate to browse',
+    });
   };
 
   return (

apps/portal/src/pages/questions/lists.tsx

@@ -7,6 +7,7 @@ import {
   PlusIcon,
 } from '@heroicons/react/24/outline';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
 import QuestionListCard from '~/components/questions/card/question/QuestionListCard';
 import type { CreateListFormData } from '~/components/questions/CreateListDialog';
 import CreateListDialog from '~/components/questions/CreateListDialog';
@@ -20,6 +21,8 @@ import { useProtectedCallback } from '~/utils/questions/useProtectedCallback';
 import { trpc } from '~/utils/trpc';
 
 export default function ListPage() {
+  const { event } = useGoogleAnalytics();
+
   const utils = trpc.useContext();
   const { data: lists } = trpc.useQuery(['questions.lists.getListsByUser']);
   const { mutateAsync: createList } = trpc.useMutation(
@@ -28,6 +31,11 @@ export default function ListPage() {
       onSuccess: () => {
         // TODO: Add optimistic update
         utils.invalidateQueries(['questions.lists.getListsByUser']);
+        event({
+          action: 'questions.lists',
+          category: 'engagement',
+          label: 'create list',
+        });
       },
     },
   );
@@ -162,9 +170,9 @@ export default function ListPage() {
                   label="Create"
                   size="md"
                   variant="tertiary"
-                  onClick={(event) => {
+                  onClick={(e) => {
-                    event.preventDefault();
+                    e.preventDefault();
-                    event.stopPropagation();
+                    e.stopPropagation();
                     handleAddClick();
                   }}
                 />