add delete comment functionality

codefreak · May 3, 2021 · eb54b14 · eb54b14
1 parent 9890689
commit eb54b14
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 38 deletions.
diff --git a/src/components/CodeReview.tsx b/src/components/CodeReview.tsx
@@ -5,7 +5,7 @@ import { Pre } from './styles'
 import './CodeReview.css'
 import CodeLine from './CodeLine'
 import CommentViewer, { CustomComment } from './CommentViewer'
-import {Button, Dropdown, Tooltip} from 'antd'
+import { Button, Dropdown, Tooltip } from 'antd'
 import { onlyUnique } from '../utils/UtilityFunctions'
 import { State, Action } from '../types/types'
 import { SettingOutlined } from '@ant-design/icons'
@@ -213,7 +213,11 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
           paddingTop: '0.5em'
         }}
       >
-        <Dropdown overlay={dropMenu} placement="bottomCenter" trigger={["click"]}>
+        <Dropdown
+          overlay={dropMenu}
+          placement="bottomCenter"
+          trigger={['click']}
+        >
           <Tooltip title="shortcuts">
             <Button icon={<SettingOutlined />} type="text" shape="circle" />
           </Tooltip>

diff --git a/src/components/CommentViewer.css b/src/components/CommentViewer.css
@@ -5,6 +5,7 @@
 
 .comments {
     padding: 0.5em 0.5em 0.5em 1em;
+    border-bottom: 1px solid #f0f0f0;
 }
 
 .ant-collapse {

diff --git a/src/components/CommentViewer.tsx b/src/components/CommentViewer.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import {Button, Collapse, Comment, Dropdown, Menu, Modal, Popconfirm} from 'antd'
+import { Button, Collapse, Comment, Dropdown, Menu, Modal } from 'antd'
 import './CommentViewer.css'
 import ReplyEditor from './ReplyEditor'
 import {
@@ -37,7 +37,8 @@ export type CustomComment = {
 export const CommentViewer: React.FC<CommentViewerProps> = ({
   comments,
   onReplyCreated,
-  onCommentEdited, onCommentDeleted,
+  onCommentEdited,
+  onCommentDeleted,
   result,
   replyType,
   active,
@@ -171,17 +172,17 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({
   }
 
   const handleDelete = () => {
-    if(commentContext !== undefined) {
+    if (commentContext !== undefined) {
       onCommentDeleted(commentContext)
     }
   }
 
   const confirm = () => {
     Modal.confirm({
-      title: "Are you sure you want to delete your comment?",
+      title: 'Are you sure you want to delete your comment?',
       icon: <ExclamationCircleTwoTone twoToneColor="#F00E3B" />,
-      okText: "Yes",
-      cancelText: "No",
+      okText: 'Yes',
+      cancelText: 'No',
       onOk: () => handleDelete(),
       mask: true,
       centered: true
@@ -256,11 +257,17 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({
                         comment === commentContext
                       ) {
                         return (
-                          <ReplyEditor
-                            onSubmit={handleEdit}
-                            type="Edit"
-                            textValue={comment.content}
-                            onCancel={() => setIsEditing(false)}
+                          <Comment
+                            key={key}
+                            content={
+                              <ReplyEditor
+                                onSubmit={handleEdit}
+                                type="Edit"
+                                textValue={comment.content}
+                                onCancel={() => setIsEditing(false)}
+                              />
+                            }
+                            author={comment.author}
                           />
                         )
                       }
@@ -276,8 +283,11 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({
                     return <></>
                   }
                 })}
+
+                {!isEditing && (
+                  <ReplyEditor onSubmit={handleReplyCreated} type={getType()} />
+                )}
               </div>
-              <ReplyEditor onSubmit={handleReplyCreated} type={getType()} />
 
               <div className="comments">
                 {comments.map((comment, key) => {

diff --git a/src/components/ReplyEditor.css b/src/components/ReplyEditor.css
@@ -4,10 +4,8 @@
 
 .replyEditor {
     width: available;
-    padding-bottom: 1em;
-    padding-right: 1em;
-    padding-left: 1em;
-    border-bottom: 1px solid #f0f0f0;
+    padding-top: 0.5em;
+    padding-right: 0.5em;
 }
 
 .controlElementsReply {

diff --git a/src/stories/CodeReviewCard.stories.tsx b/src/stories/CodeReviewCard.stories.tsx
@@ -131,38 +131,48 @@ const handleCommentEdited = (
   story: Story<CodeReviewCardProps>
 ) => {
   if (
-      story.args &&
-      story.args.reviewProps &&
-      story.args.reviewProps.commentContainer
+    story.args &&
+    story.args.reviewProps &&
+    story.args.reviewProps.commentContainer
   ) {
-    const index = story.args.reviewProps.commentContainer.findIndex(element => element === oldComment)
-    if(index > 1) {
+    const index = story.args.reviewProps.commentContainer.findIndex(
+      element => element === oldComment
+    )
+    if (index > 1) {
       story.args.reviewProps.commentContainer[index] = newComment
       forceReRender()
     }
   }
 }
 
-const handleCommentCreated = (comment: CustomComment, story: Story<CodeReviewCardProps>) => {
+const handleCommentCreated = (
+  comment: CustomComment,
+  story: Story<CodeReviewCardProps>
+) => {
   if (
-      story.args &&
-      story.args.reviewProps &&
-      story.args.reviewProps.commentContainer
+    story.args &&
+    story.args.reviewProps &&
+    story.args.reviewProps.commentContainer
   ) {
     customCommentContainer = [...customCommentContainer, comment]
     story.args.reviewProps.commentContainer = customCommentContainer
   }
   forceReRender()
 }
 
-const handleCommentDeleted = (comment: CustomComment, story: Story<CodeReviewCardProps>) => {
+const handleCommentDeleted = (
+  comment: CustomComment,
+  story: Story<CodeReviewCardProps>
+) => {
   if (
-      story.args &&
-      story.args.reviewProps &&
-      story.args.reviewProps.commentContainer
+    story.args &&
+    story.args.reviewProps &&
+    story.args.reviewProps.commentContainer
   ) {
-    const index = story.args.reviewProps.commentContainer.findIndex(element => element === comment)
-    if(index > -1) {
+    const index = story.args.reviewProps.commentContainer.findIndex(
+      element => element === comment
+    )
+    if (index > -1) {
       story.args.reviewProps.commentContainer.splice(index, 1)
       forceReRender()
     }
@@ -178,7 +188,8 @@ jsx.args = {
     commentContainer: customCommentContainer,
     onCommentCreated: comment => handleCommentCreated(comment, jsx),
     onCommentDeleted: comment => handleCommentDeleted(comment, jsx),
-    onCommentEdited: (oldComment, newComment) => handleCommentEdited(oldComment, newComment, jsx),
+    onCommentEdited: (oldComment, newComment) =>
+      handleCommentEdited(oldComment, newComment, jsx),
     showComments: true,
     user: 'Storybook Tester'
   },
@@ -193,9 +204,10 @@ css.args = {
     language: 'css',
     showResult: true,
     commentContainer: customCommentContainer,
-    onCommentCreated: (comment => handleCommentCreated(comment, css)),
+    onCommentCreated: comment => handleCommentCreated(comment, css),
     onCommentDeleted: comment => handleCommentDeleted(comment, css),
-    onCommentEdited: (oldComment, newComment) => handleCommentEdited(oldComment, newComment, css),
+    onCommentEdited: (oldComment, newComment) =>
+      handleCommentEdited(oldComment, newComment, css),
     showComments: true,
     user: 'Storybook Tester'
   },
@@ -210,9 +222,10 @@ cpp.args = {
     language: 'cpp',
     showResult: false,
     commentContainer: customCommentContainer,
-    onCommentCreated: (comment => handleCommentCreated(comment, cpp)),
+    onCommentCreated: comment => handleCommentCreated(comment, cpp),
     onCommentDeleted: comment => handleCommentDeleted(comment, cpp),
-    onCommentEdited: (oldComment, newComment) => handleCommentEdited(oldComment, newComment, cpp),
+    onCommentEdited: (oldComment, newComment) =>
+      handleCommentEdited(oldComment, newComment, cpp),
     showComments: false,
     user: 'Storybook Tester'
   },