feat: allows comment delete of ownPost

Author: velopert

src/components/post/PostCommentItem.tsx

@@ -129,6 +129,7 @@ export interface PostCommentItemProps {
   comment: Comment;
   ownComment: boolean;
   onRemove: (id: string) => any;
+  ownPost: boolean;
 }
 
 interface TogglerProps {
@@ -152,6 +153,7 @@ const PostCommentItem: React.FC<PostCommentItemProps> = ({
   comment,
   ownComment,
   onRemove,
+  ownPost,
 }) => {
   const { id, user, created_at, text, replies_count, deleted, level } = comment;
   const [open, onToggleOpen] = useBoolean(false);
@@ -192,6 +194,11 @@ const PostCommentItem: React.FC<PostCommentItemProps> = ({
             <span onClick={() => onRemove(id)}>삭제</span>
           </div>
         )}
+        {ownPost && !(ownComment && !editing) && (
+          <div className="actions">
+            <span onClick={() => onRemove(id)}>삭제</span>
+          </div>
+        )}
       </CommentHead>
       {editing ? (
         <PostEditComment
@@ -210,7 +217,13 @@ const PostCommentItem: React.FC<PostCommentItemProps> = ({
         {level < 2 && (
           <Toggler open={open} onToggle={onToggleOpen} count={replies_count} />
         )}
-        {open && <PostRepliesContainer commentId={id} onHide={onToggleOpen} />}
+        {open && (
+          <PostRepliesContainer
+            commentId={id}
+            onHide={onToggleOpen}
+            ownPost={ownPost}
+          />
+        )}
       </CommentFoot>
     </PostCommentItemBlock>
   );

src/components/post/PostCommentsList.tsx

@@ -9,21 +9,24 @@ export interface PostCommentsListProps {
   comments: Comment[];
   currentUserId: null | string;
   onRemove: (id: string) => any;
+  ownPost: boolean;
 }
 
 const PostCommentsList: React.FC<PostCommentsListProps> = ({
   comments,
   currentUserId,
   onRemove,
+  ownPost,
 }) => {
   return (
     <PostCommentsListBlock>
-      {comments.map(comment => (
+      {comments.map((comment) => (
         <PostCommentItem
           comment={comment}
           key={comment.id}
           ownComment={currentUserId === (comment.user && comment.user.id)}
           onRemove={onRemove}
+          ownPost={ownPost}
         />
       ))}
     </PostCommentsListBlock>

src/components/post/PostReplies.tsx

@@ -57,13 +57,15 @@ export interface PostRepliesProps {
   onReply: (text: string) => any;
   onHide: () => void;
   onRemove: (id: string) => any;
+  ownPost: boolean;
 }
 
 const PostReplies: React.FC<PostRepliesProps> = ({
   comments,
   onReply,
   onHide,
   onRemove,
+  ownPost,
 }) => {
   const [writing, onToggle] = useBoolean(false);
   const currentUserId = useUserId();
@@ -90,6 +92,7 @@ const PostReplies: React.FC<PostRepliesProps> = ({
         comments={comments}
         currentUserId={currentUserId}
         onRemove={onRemove}
+        ownPost={ownPost}
       />
       {hasComments && <Separator />}
       {writing || !hasComments ? (

src/containers/post/PostComments.tsx

@@ -17,6 +17,7 @@ export interface PostCommentsProps {
   comments: Comment[];
   postId: string;
   count: number;
+  ownPost: boolean;
 }
 
 const MarginTop = styled.div`
@@ -27,6 +28,7 @@ const PostComments: React.FC<PostCommentsProps> = ({
   comments,
   postId,
   count,
+  ownPost,
 }) => {
   const [askRemove, onToggleAskRemove] = useBoolean(false);
   const [removeId, setRemoveId] = useState('');
@@ -64,6 +66,7 @@ const PostComments: React.FC<PostCommentsProps> = ({
             comments={comments}
             currentUserId={currentUserId}
             onRemove={onRemove}
+            ownPost={ownPost}
           />
         </MarginTop>
       </PostCommentsTemplate>

src/containers/post/PostRepliesContainer.tsx

@@ -16,11 +16,13 @@ import PopupOKCancel from '../../components/common/PopupOKCancel';
 export interface PostRepliesProps {
   commentId: string;
   onHide: () => void;
+  ownPost: boolean;
 }
 
 const PostRepliesContainer: React.FC<PostRepliesProps> = ({
   commentId,
   onHide,
+  ownPost,
 }) => {
   const [askRemove, onToggleAskRemove] = useBoolean(false);
   const [removeId, setRemoveId] = useState('');
@@ -76,6 +78,7 @@ const PostRepliesContainer: React.FC<PostRepliesProps> = ({
     <>
       <PostReplies
         comments={replies.data.comment.replies}
+        ownPost={ownPost}
         onReply={onReply}
         onHide={onHide}
         onRemove={onRemove}

src/containers/post/PostViewer.tsx

@@ -415,6 +415,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
         count={post.comments_count}
         comments={post.comments}
         postId={post.id}
+        ownPost={post.user.id === userId}
       />
       {showRecommends && (userId !== null || isVeryOld) && (
         <RelatedPost