From 4ee80b90293eb8ab93e60448d555a19daf8ed9cd Mon Sep 17 00:00:00 2001
From: Terence <45381509+Vielheim@users.noreply.github.com>
Date: Sun, 30 Oct 2022 10:55:19 +0800
Subject: [PATCH] [resumes][feat] add ga for comments (#459)

Co-authored-by: Terence Ho <>
---
 .../resumes/comments/ResumeCommentsForm.tsx         |  9 +++++++++
 .../comments/comment/ResumeCommentReplyForm.tsx     |  9 +++++++++
 .../comments/comment/ResumeCommentVoteButtons.tsx   | 13 +++++++++++++
 3 files changed, 31 insertions(+)

diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
index 6933058b..d15cf82a 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
+++ b/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',
+        });
       },
     },
   );
diff --git a/apps/portal/src/components/resumes/comments/comment/ResumeCommentReplyForm.tsx b/apps/portal/src/components/resumes/comments/comment/ResumeCommentReplyForm.tsx
index ea14632a..ef2da04c 100644
--- a/apps/portal/src/components/resumes/comments/comment/ResumeCommentReplyForm.tsx
+++ b/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',
+          });
         },
       },
     );
diff --git a/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx b/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
index 12c3a387..9c2435e6 100644
--- a/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
+++ b/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',
+        });
       },
     },
   );