comment locking initial

src/components/node/Comment/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC, HTMLAttributes, memo } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import { ICommentGroup } from '~/redux/types';
-import { getURL } from '~/utils/dom';
+import { ICommentGroup, IComment } from '~/redux/types';
 import { CommentContent } from '~/components/node/CommentContent';
 import * as styles from './styles.scss';
 
@@ -10,10 +9,12 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   is_loading?: boolean;
   comment_group?: ICommentGroup;
   is_same?: boolean;
+  can_edit?: boolean;
+  onDelete: (id: IComment['id'], is_deteted: boolean) => void;
 };
 
 const Comment: FC<IProps> = memo(
-  ({ comment_group, is_empty, is_same, is_loading, className, ...props }) => {
+  ({ comment_group, is_empty, is_same, is_loading, className, can_edit, onDelete, ...props }) => {
     return (
       <CommentWrapper
         className={className}
@@ -25,7 +26,12 @@ const Comment: FC<IProps> = memo(
       >
         <div className={styles.wrap}>
           {comment_group.comments.map(comment => (
-            <CommentContent comment={comment} key={comment.id} />
+            <CommentContent
+              comment={comment}
+              key={comment.id}
+              can_edit={can_edit}
+              onDelete={onDelete}
+            />
           ))}
         </div>
       </CommentWrapper>

src/components/node/CommentContent/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, memo, createElement } from 'react';
+import React, { FC, useMemo, memo, createElement, useCallback } from 'react';
 import { IComment, IFile } from '~/redux/types';
 import path from 'ramda/es/path';
 import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
@@ -12,12 +12,15 @@ import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
 import { PRESETS } from '~/constants/urls';
 import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
+import { Icon } from '~/components/input/Icon';
 
 interface IProps {
   comment: IComment;
+  can_edit: boolean;
+  onDelete: (id: IComment['id'], is_deteted: boolean) => void;
 }
 
-const CommentContent: FC<IProps> = memo(({ comment }) => {
+const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete }) => {
   const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
     () =>
       reduce(
@@ -28,10 +31,27 @@ const CommentContent: FC<IProps> = memo(({ comment }) => {
     [comment]
   );
 
+  const onLockClick = useCallback(() => {
+    onDelete(comment.id, !comment.deleted_at);
+  }, [comment, onDelete]);
+
+  const lock = useMemo(
+    () =>
+      can_edit ? (
+        <div className={styles.lock}>
+          <div>
+            <Icon icon="close" />
+          </div>
+        </div>
+      ) : null,
+    [can_edit, comment]
+  );
+
   return (
-    <>
+    <div className={styles.wrap}>
       {comment.text && (
         <Group className={styles.block}>
+          {lock}
           {formatCommentText(path(['user', 'username'], comment), comment.text).map(
             (block, key) =>
               COMMENT_BLOCK_RENDERERS[block.type] &&
@@ -67,7 +87,7 @@ const CommentContent: FC<IProps> = memo(({ comment }) => {
           ))}
         </>
       )}
-    </>
+    </div>
   );
 });
 

src/components/node/CommentContent/styles.scss

@@ -1,5 +1,51 @@
 @import 'flexbin/flexbin.scss';
 
+.wrap {
+  position: relative;
+}
+
+.lock {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: $radius;
+  transform: translate(10px, 0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 0.25s, transform 0.25s;
+  cursor: pointer;
+  background: $red;
+
+  & > div {
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  @include tablet {
+    right: 0;
+    border-radius: 0 0 0 $radius;
+    opacity: 1;
+    transform: translate(0, 0);
+    background: transparentize($red, $amount: 0.5);
+  }
+}
+
 .block {
   @include outer_shadow();
   min-height: $comment_height;
@@ -20,6 +66,15 @@
   &:last-child {
     border-bottom-right-radius: $radius;
   }
+
+  &:hover {
+    .lock {
+      opacity: 1;
+      pointer-events: all;
+      touch-action: initial;
+      transform: translate(0, 0);
+    }
+  }
 }
 
 .block_audio {

src/components/node/NodeComments/index.tsx

@@ -5,12 +5,16 @@ import { Filler } from '~/components/containers/Filler';
 import * as styles from './styles.scss';
 import { ICommentGroup, IComment } from '~/redux/types';
 import { groupCommentsByUser } from '~/utils/fn';
+import { IUser } from '~/redux/auth/types';
+import { canEditComment } from '~/utils/node';
 
 interface IProps {
   comments?: IComment[];
+  user: IUser;
+  onDelete: (id: IComment['id'], is_deteted: boolean) => void;
 }
 
-const NodeComments: FC<IProps> = memo(({ comments }) => {
+const NodeComments: FC<IProps> = memo(({ comments, user, onDelete }) => {
   const groupped: ICommentGroup[] = useMemo(() => comments.reduce(groupCommentsByUser, []), [
     comments,
   ]);
@@ -18,7 +22,12 @@ const NodeComments: FC<IProps> = memo(({ comments }) => {
   return (
     <div className={styles.wrap}>
       {groupped.map(group => (
-        <Comment key={group.ids.join()} comment_group={group} />
+        <Comment
+          key={group.ids.join()}
+          comment_group={group}
+          can_edit={canEditComment(group, user)}
+          onDelete={onDelete}
+        />
       ))}
 
       <Filler />