comment menu

src/components/node/Comment/index.tsx

@@ -3,18 +3,34 @@ import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { ICommentGroup, IComment } from '~/redux/types';
 import { CommentContent } from '~/components/node/CommentContent';
 import * as styles from './styles.scss';
+import { nodeLockComment, nodeEditComment } from '~/redux/node/actions';
+import { INodeState } from '~/redux/node/reducer';
+import { CommentForm } from '../CommentForm';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
   is_loading?: boolean;
   comment_group?: ICommentGroup;
+  comment_data: INodeState['comment_data'];
   is_same?: boolean;
   can_edit?: boolean;
-  onDelete: (id: IComment['id'], is_deteted: boolean) => void;
+  onDelete: typeof nodeLockComment;
+  onEdit: typeof nodeEditComment;
 };
 
 const Comment: FC<IProps> = memo(
-  ({ comment_group, is_empty, is_same, is_loading, className, can_edit, onDelete, ...props }) => {
+  ({
+    comment_group,
+    comment_data,
+    is_empty,
+    is_same,
+    is_loading,
+    className,
+    can_edit,
+    onDelete,
+    onEdit,
+    ...props
+  }) => {
     return (
       <CommentWrapper
         className={className}
@@ -25,18 +41,25 @@ const Comment: FC<IProps> = memo(
         {...props}
       >
         <div className={styles.wrap}>
-          {comment_group.comments.map(comment =>
-            comment.deleted_at ? (
-              <div key={comment.id}>deleted</div>
-            ) : (
+          {comment_group.comments.map(comment => {
+            if (comment.deleted_at) {
+              return <div key={comment.id}>deleted</div>;
+            }
+
+            if (Object.prototype.hasOwnProperty.call(comment_data, comment.id)) {
+              return <CommentForm id={comment.id} key={comment.id} />;
+            }
+
+            return (
               <CommentContent
                 comment={comment}
                 key={comment.id}
                 can_edit={can_edit}
                 onDelete={onDelete}
+                onEdit={onEdit}
               />
-            )
-          )}
+            );
+          })}
         </div>
       </CommentWrapper>
     );