feat: add comments to research module

ONEARMY · Mar 7, 2022 · 70b71dc · 70b71dc
1 parent 783ca61
commit 70b71dc
Show file tree

Hide file tree

Showing 6 changed files with 467 additions and 52 deletions.
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
@@ -1,8 +1,6 @@
 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'
 import { IComment } from 'src/models'
 import { CommentHeader } from './CommentHeader'
 import { Text } from 'src/components/Text'
@@ -13,19 +11,36 @@ import { Button } from 'src/components/Button'
 import { AuthWrapper } from '../Auth/AuthWrapper'
 import { logger } from 'src/logger'
 
-export interface IProps extends IComment {
-  verified: boolean
+interface CommentProps {
+  handleEditRequest,
+  handleDelete,
+  handleEdit,
 }
 
+export interface IProps extends IComment, CommentProps {
+  verified: boolean
+} 
+
 export const Comment: React.FC<IProps> = ({
   _creatorId,
   text,
   _id,
+  handleEditRequest,
+  handleDelete,
+  handleEdit,
   ...props
 }) => {
-  const { stores } = useCommonStores()
   const [showEditModal, setShowEditModal] = useState(false)
 
+  const onEditRequest = () => {
+    handleEditRequest()
+    return setShowEditModal(true)
+  }
+
+  const onDelete = () => {
+    handleDelete(_id)
+  }
+
   return (
     <Flex
       flexDirection="column"
@@ -48,14 +63,7 @@ export const Comment: React.FC<IProps> = ({
             }}
             mr={2}
             fontSize="12px"
-            onClick={async () => {
-              ReactGA.event({
-                category: 'Comments',
-                action: 'Edit existing comment',
-                label: stores.howtoStore.activeHowto?.title,
-              })
-              return setShowEditModal(true)
-            }}
+            onClick={onEditRequest}
           >
             edit <FaRegEdit />
           </Text>
@@ -65,27 +73,7 @@ export const Comment: React.FC<IProps> = ({
               alignItems: 'center',
             }}
             fontSize="12px"
-            onClick={async () => {
-              const confirmation = window.confirm(
-                'Are you sure you want to delete this comment?',
-              )
-              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',
-                )
-              }
-            }}
+            onClick={onDelete}
           >
             delete <FaTrash color="red" />
           </Text>
@@ -128,21 +116,8 @@ export const Comment: React.FC<IProps> = ({
                   </Button>
                   <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)
+                    onClick={() => {
+                      handleEdit(_id, values.comment)
                       setShowEditModal(false)
                     }}
                   >

diff --git a/src/models/research.models.tsx b/src/models/research.models.tsx
@@ -1,5 +1,5 @@
 import { IConvertedFileMeta } from 'src/components/ImageInput/ImageInput'
-import { DBDoc, IModerable, ISelectedTags } from 'src/models'
+import { DBDoc, IComment, IModerable, ISelectedTags } from 'src/models'
 import { IUploadedFileMeta } from 'src/stores/storage'
 
 /** All typings related to the Research Module can be found here */
@@ -16,6 +16,7 @@ export namespace IResearch {
     description: string
     images: Array<IUploadedFileMeta | IConvertedFileMeta | null>
     videoUrl?: string
+    comments?: IComment[]
   }
 
   export interface FormInput extends IModerable {

diff --git a/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx b/src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx
@@ -68,6 +68,53 @@ export const HowToComments = ({ comments, verifiedUsers }: IProps) => {
     }
   }
 
+  async function handleEditRequest() {
+    ReactGA.event({
+      category: 'Comments',
+      action: 'Edit existing comment',
+      label: stores.howtoStore.activeHowto?.title,
+    })
+  }
+
+  async function handleDelete(_id: string) {
+    const confirmation = window.confirm(
+      'Are you sure you want to delete this comment?',
+    )
+    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',
+      )
+    }
+  }
+
+  async function handleEdit(_id: string, comment: string) {
+    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, comment)
+  }
+
   const shownComments = moreComments * MAX_COMMENTS
 
   return (
@@ -89,9 +136,12 @@ export const HowToComments = ({ comments, verifiedUsers }: IProps) => {
             .slice(0, shownComments)
             .map(comment => (
               <Comment
-                key={comment._id}
                 verified={verifiedUsers?.[comment.creatorName] ? true : false}
+                key={comment._id}
                 {...comment}
+                handleEditRequest={handleEditRequest}
+                handleDelete={handleDelete}
+                handleEdit={handleEdit}
               />
             ))}
         {comments && comments.length > shownComments && (