comment deletion

src/components/node/Comment/index.tsx

@@ -25,14 +25,18 @@ const Comment: FC<IProps> = memo(
         {...props}
       >
         <div className={styles.wrap}>
-          {comment_group.comments.map(comment => (
-            <CommentContent
-              comment={comment}
-              key={comment.id}
-              can_edit={can_edit}
-              onDelete={onDelete}
-            />
-          ))}
+          {comment_group.comments.map(comment =>
+            comment.deleted_at ? (
+              <div key={comment.id}>deleted</div>
+            ) : (
+              <CommentContent
+                comment={comment}
+                key={comment.id}
+                can_edit={can_edit}
+                onDelete={onDelete}
+              />
+            )
+          )}
         </div>
       </CommentWrapper>
     );

src/components/node/CommentContent/index.tsx

@@ -38,7 +38,7 @@ const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete }) => {
   const lock = useMemo(
     () =>
       can_edit ? (
-        <div className={styles.lock}>
+        <div className={styles.lock} onClick={onLockClick}>
           <div>
             <Icon icon="close" />
           </div>

src/constants/api.ts

@@ -1,4 +1,4 @@
-import { INode } from '~/redux/types';
+import { INode, IComment } from '~/redux/types';
 
 export const API = {
   BASE: process.env.API_HOST,
@@ -26,6 +26,8 @@ export const API = {
     POST_LIKE: (id: INode['id']) => `/node/${id}/like`,
     POST_STAR: (id: INode['id']) => `/node/${id}/heroic`,
     POST_LOCK: (id: INode['id']) => `/node/${id}/lock`,
+    POST_LOCK_COMMENT: (id: INode['id'], comment_id: IComment['id']) =>
+      `/node/${id}/comment/${comment_id}/lock`,
     SET_CELL_VIEW: (id: INode['id']) => `/node/${id}/cell-view`,
   },
 };

src/redux/node/api.ts

@@ -1,7 +1,7 @@
 import { api, configWithToken, resultMiddleware, errorMiddleware } from '~/utils/api';
 import { INode, IResultWithStatus, IComment } from '../types';
 import { API } from '~/constants/api';
-import { nodeUpdateTags, nodeLike, nodeStar, nodeLock } from './actions';
+import { nodeUpdateTags, nodeLike, nodeStar, nodeLock, nodeLockComment } from './actions';
 import { INodeState } from './reducer';
 
 export const postNode = ({
@@ -163,3 +163,16 @@ export const postNodeLock = ({
     .post(API.NODE.POST_LOCK(id), { is_locked }, configWithToken(access))
     .then(resultMiddleware)
     .catch(errorMiddleware);
+
+export const postNodeLockComment = ({
+  id,
+  is_locked,
+  current,
+  access,
+}: ReturnType<typeof nodeLockComment> & { access: string; current: INode['id'] }): Promise<
+  IResultWithStatus<{ deleted_at: INode['deleted_at'] }>
+> =>
+  api
+    .post(API.NODE.POST_LOCK_COMMENT(current, id), { is_locked }, configWithToken(access))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);

src/redux/node/sagas.ts

@@ -22,6 +22,7 @@ import {
   nodeSetRelated,
   nodeGotoNode,
   nodeLock,
+  nodeLockComment,
 } from './actions';
 import {
   postNode,
@@ -33,6 +34,7 @@ import {
   postNodeStar,
   getNodeRelated,
   postNodeLock,
+  postNodeLockComment,
 } from './api';
 import { reqWrapper } from '../auth/sagas';
 import { flowSetNodes, flowSetUpdated } from '../flow/actions';
@@ -256,6 +258,22 @@ function* onLockSaga({ id, is_locked }: ReturnType<typeof nodeLock>) {
   if (error) return yield call(updateNodeEverywhere, { ...current, deleted_at });
 }
 
+function* onLockCommentSaga({ id, is_locked }: ReturnType<typeof nodeLockComment>) {
+  const { current, comments } = yield select(selectNode);
+
+  yield put(
+    nodeSetComments(
+      comments.map(comment =>
+        comment.id === id
+          ? { ...comment, deleted_at: is_locked ? new Date().toISOString() : null }
+          : comment
+      )
+    )
+  );
+
+  yield call(reqWrapper, postNodeLockComment, { current: current.id, id, is_locked });
+}
+
 export default function* nodeSaga() {
   yield takeLatest(NODE_ACTIONS.SAVE, onNodeSave);
   yield takeLatest(NODE_ACTIONS.GOTO_NODE, onNodeGoto);
@@ -267,4 +285,5 @@ export default function* nodeSaga() {
   yield takeLatest(NODE_ACTIONS.LIKE, onLikeSaga);
   yield takeLatest(NODE_ACTIONS.STAR, onStarSaga);
   yield takeLatest(NODE_ACTIONS.LOCK, onLockSaga);
+  yield takeLatest(NODE_ACTIONS.LOCK_COMMENT, onLockCommentSaga);
 }