[resumes][feat] add ga for comments (#459)

Co-authored-by: Terence Ho <>

apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx

@@ -3,6 +3,8 @@ import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { Button, Dialog, TextArea } from '@tih/ui';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
+
 import { trpc } from '~/utils/trpc';
 
 type ResumeCommentsFormProps = Readonly<{
@@ -25,6 +27,8 @@ export default function ResumeCommentsForm({
   setShowCommentsForm,
 }: ResumeCommentsFormProps) {
   const [showDialog, setShowDialog] = useState(false);
+  const { event: gaEvent } = useGoogleAnalytics();
+
   const {
     register,
     handleSubmit,
@@ -50,6 +54,11 @@ export default function ResumeCommentsForm({
         trpcContext.invalidateQueries(['resumes.resume.findAll']);
         trpcContext.invalidateQueries(['resumes.resume.user.findUserStarred']);
         trpcContext.invalidateQueries(['resumes.resume.user.findUserCreated']);
+        gaEvent({
+          action: 'resumes.comment_submit',
+          category: 'engagement',
+          label: 'Submit comment',
+        });
       },
     },
   );

apps/portal/src/components/resumes/comments/comment/ResumeCommentReplyForm.tsx

@@ -3,6 +3,8 @@ import { useForm } from 'react-hook-form';
 import type { ResumesSection } from '@prisma/client';
 import { Button, TextArea } from '@tih/ui';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
+
 import { trpc } from '~/utils/trpc';
 
 type ResumeCommentEditFormProps = {
@@ -33,6 +35,7 @@ export default function ResumeCommentReplyForm({
       description: '',
     },
   });
+  const { event: gaEvent } = useGoogleAnalytics();
 
   const trpcContext = trpc.useContext();
   const commentReplyMutation = trpc.useMutation('resumes.comments.user.reply', {
@@ -58,6 +61,12 @@ export default function ResumeCommentReplyForm({
       {
         onSuccess: () => {
           setIsReplyingComment(false);
+
+          gaEvent({
+            action: 'resumes.comment_reply',
+            category: 'engagement',
+            label: 'Reply comment',
+          });
         },
       },
     );

apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx

@@ -7,6 +7,8 @@ import {
 } from '@heroicons/react/20/solid';
 import { Vote } from '@prisma/client';
 
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
+
 import { trpc } from '~/utils/trpc';
 
 type ResumeCommentVoteButtonsProps = {
@@ -20,6 +22,7 @@ export default function ResumeCommentVoteButtons({
 }: ResumeCommentVoteButtonsProps) {
   const [upvoteAnimation, setUpvoteAnimation] = useState(false);
   const [downvoteAnimation, setDownvoteAnimation] = useState(false);
+  const { event: gaEvent } = useGoogleAnalytics();
 
   const trpcContext = trpc.useContext();
   const router = useRouter();
@@ -35,6 +38,11 @@ export default function ResumeCommentVoteButtons({
       onSuccess: () => {
         // Comment updated, invalidate query to trigger refetch
         trpcContext.invalidateQueries(['resumes.comments.votes.list']);
+        gaEvent({
+          action: 'resumes.comment_vote',
+          category: 'engagement',
+          label: 'Upvote/Downvote comment',
+        });
       },
     },
   );
@@ -44,6 +52,11 @@ export default function ResumeCommentVoteButtons({
       onSuccess: () => {
         // Comment updated, invalidate query to trigger refetch
         trpcContext.invalidateQueries(['resumes.comments.votes.list']);
+        gaEvent({
+          action: 'resumes.comment_unvote',
+          category: 'engagement',
+          label: 'Unvote comment',
+        });
       },
     },
   );