From c9acb4ca9b178bf6a776076adec3991827d9c183 Mon Sep 17 00:00:00 2001
From: Luke Watts <luke@thisis.la>
Date: Fri, 14 Jan 2022 08:16:56 +0100
Subject: [PATCH] feat: track interaction with comment events

---
 src/components/Comment/Comment.tsx            | 36 ++++++++++++++++++-
 .../Howto/HowToComments/HowToComments.tsx     | 28 +++++++++++++--
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index c575138d34..e03cf74d97 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import ReactGA from 'react-ga'
 import { FaTrash, FaRegEdit } from 'react-icons/fa'
 import { Flex } from 'rebass/styled-components'
 import { useCommonStores } from 'src/index'
@@ -45,7 +46,14 @@ export const Comment: React.FC<IProps> = ({
             }}
             mr={2}
             fontSize="12px"
-            onClick={async () => setShowEditModal(true)}
+            onClick={async () => {
+              ReactGA.event({
+                category: 'Comments',
+                action: 'Edit existing comment',
+                label: stores.howtoStore.activeHowto?.title,
+              })
+              return setShowEditModal(true)
+            }}
           >
             edit <FaRegEdit />
           </Text>
@@ -61,6 +69,19 @@ export const Comment: React.FC<IProps> = ({
               )
               if (confirmation) {
                 await stores.howtoStore.deleteComment(_id)
+                ReactGA.event({
+                  category: 'Comments',
+                  action: 'Deleted',
+                  label: stores.howtoStore.activeHowto?.title,
+                })
+                logger.debug(
+                  {
+                    category: 'Comments',
+                    action: 'Deleted',
+                    label: stores.howtoStore.activeHowto?.title,
+                  },
+                  'comment deleted',
+                )
               }
             }}
           >
@@ -106,6 +127,19 @@ export const Comment: React.FC<IProps> = ({
                   <Button
                     small
                     onClick={async () => {
+                      ReactGA.event({
+                        category: 'Comments',
+                        action: 'Update',
+                        label: stores.howtoStore.activeHowto?.title,
+                      })
+                      logger.debug(
+                        {
+                          category: 'Comments',
+                          action: 'Update',
+                          label: stores.howtoStore.activeHowto?.title,
+                        },
+                        'comment edited',
+                      )
                       await stores.howtoStore.editComment(_id, values.comment)
                       setShowEditModal(false)
                     }}
diff --git a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
index 2033a08730..eb6c412917 100644
--- a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
+++ b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
+import ReactGA from 'react-ga'
 import { Box, Flex } from 'rebass/styled-components'
 import { useCommonStores } from 'src/index'
 import { Button } from 'src/components/Button'
@@ -6,6 +7,7 @@ import { Comment } from 'src/components/Comment/Comment'
 import { CommentTextArea } from 'src/components/Comment/CommentTextArea'
 import { IComment } from 'src/models'
 import styled from 'styled-components'
+import { logger } from 'src/logger'
 
 const MAX_COMMENTS = 5
 
@@ -36,8 +38,23 @@ export const HowToComments = ({ comments }: IProps) => {
       await stores.howtoStore.addComment(comment)
       setLoading(false)
       setComment('')
+
+      ReactGA.event({
+        category: 'Comments',
+        action: 'Submitted',
+        label: stores.howtoStore.activeHowto?.title,
+      })
+      logger.debug(
+        {
+          category: 'Comments',
+          action: 'Submitted',
+          label: stores.howtoStore.activeHowto?.title,
+        },
+        'comment submitted',
+      )
     } catch (err) {
       // Error: Comment could not be posted
+      logger.error({ err }, 'failed to submit comment')
     }
   }
 
@@ -65,7 +82,14 @@ export const HowToComments = ({ comments }: IProps) => {
           <Button
             width="max-content"
             variant="outline"
-            onClick={() => setMoreComments(moreComments + 1)}
+            onClick={() => {
+              ReactGA.event({
+                category: 'Comments',
+                action: 'Show more',
+                label: stores.howtoStore.activeHowto?.title,
+              })
+              return setMoreComments(moreComments + 1)
+            }}
           >
             show more comments
           </Button>