diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx index 2c2e5d42..4f8b78d4 100644 --- a/src/components/node/Comment/index.tsx +++ b/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> ); diff --git a/src/components/node/CommentContent/index.tsx b/src/components/node/CommentContent/index.tsx index ae521b6f..96ec4d93 100644 --- a/src/components/node/CommentContent/index.tsx +++ b/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> diff --git a/src/constants/api.ts b/src/constants/api.ts index b0691569..0dd2e09c 100644 --- a/src/constants/api.ts +++ b/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`, }, }; diff --git a/src/redux/node/api.ts b/src/redux/node/api.ts index 5a0f21e7..4c30ef5c 100644 --- a/src/redux/node/api.ts +++ b/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); diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts index 28bde15a..af03a204 100644 --- a/src/redux/node/sagas.ts +++ b/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); }