diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx index bf9c01dd..c126fa2b 100644 --- a/src/components/node/Comment/index.tsx +++ b/src/components/node/Comment/index.tsx @@ -7,6 +7,7 @@ import { nodeLockComment, nodeEditComment } from '~/redux/node/actions'; import { INodeState } from '~/redux/node/reducer'; import { CommentForm } from '../CommentForm'; import { CommendDeleted } from '../CommendDeleted'; +import * as MODAL_ACTIONS from '~/redux/modal/actions'; type IProps = HTMLAttributes & { is_empty?: boolean; @@ -17,6 +18,7 @@ type IProps = HTMLAttributes & { can_edit?: boolean; onDelete: typeof nodeLockComment; onEdit: typeof nodeEditComment; + modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe; }; const Comment: FC = memo( @@ -30,6 +32,7 @@ const Comment: FC = memo( can_edit, onDelete, onEdit, + modalShowPhotoswipe, ...props }) => { return ( @@ -58,6 +61,7 @@ const Comment: FC = memo( can_edit={can_edit} onDelete={onDelete} onEdit={onEdit} + modalShowPhotoswipe={modalShowPhotoswipe} /> ); })} diff --git a/src/components/node/CommentContent/index.tsx b/src/components/node/CommentContent/index.tsx index 735714b5..6e11a07a 100644 --- a/src/components/node/CommentContent/index.tsx +++ b/src/components/node/CommentContent/index.tsx @@ -14,87 +14,91 @@ import { PRESETS } from '~/constants/urls'; import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment'; import { nodeLockComment, nodeEditComment } from '~/redux/node/actions'; import { CommentMenu } from '../CommentMenu'; +import * as MODAL_ACTIONS from '~/redux/modal/actions'; interface IProps { comment: IComment; can_edit: boolean; onDelete: typeof nodeLockComment; onEdit: typeof nodeEditComment; + modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe; } -const CommentContent: FC = memo(({ comment, can_edit, onDelete, onEdit }) => { - const groupped = useMemo>( - () => - reduce( - (group, file) => assocPath([file.type], append(file, group[file.type]), group), - {}, - comment.files - ), - [comment] - ); +const CommentContent: FC = memo( + ({ comment, can_edit, onDelete, onEdit, modalShowPhotoswipe }) => { + const groupped = useMemo>( + () => + reduce( + (group, file) => assocPath([file.type], append(file, group[file.type]), group), + {}, + comment.files + ), + [comment] + ); - const onLockClick = useCallback(() => { - onDelete(comment.id, !comment.deleted_at); - }, [comment, onDelete]); + const onLockClick = useCallback(() => { + onDelete(comment.id, !comment.deleted_at); + }, [comment, onDelete]); - const onEditClick = useCallback(() => { - onEdit(comment.id); - }, [comment, onEdit]); + const onEditClick = useCallback(() => { + onEdit(comment.id); + }, [comment, onEdit]); - const menu = useMemo( - () => can_edit && , - [can_edit, comment, onEditClick, onLockClick] - ); + const menu = useMemo( + () => can_edit && , + [can_edit, comment, onEditClick, onLockClick] + ); - return ( -
- {comment.text && ( - - {menu} + return ( +
+ {comment.text && ( + + {menu} - - {formatCommentText(path(['user', 'username'], comment), comment.text).map( - (block, key) => - COMMENT_BLOCK_RENDERERS[block.type] && - createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key }) - )} + + {formatCommentText(path(['user', 'username'], comment), comment.text).map( + (block, key) => + COMMENT_BLOCK_RENDERERS[block.type] && + createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key }) + )} + + +
{getPrettyDate(comment.created_at)}
+ )} -
{getPrettyDate(comment.created_at)}
-
- )} + {groupped.image && groupped.image.length > 0 && ( +
+ {menu} - {groupped.image && groupped.image.length > 0 && ( -
- {menu} +
+ {groupped.image.map((file, index) => ( +
modalShowPhotoswipe(groupped.image, index)}> + {file.name} +
+ ))} +
-
- {groupped.image.map(file => ( -
- {file.name} +
{getPrettyDate(comment.created_at)}
+
+ )} + + {groupped.audio && groupped.audio.length > 0 && ( + <> + {groupped.audio.map(file => ( +
+ {menu} + + + +
{getPrettyDate(comment.created_at)}
))} -
- -
{getPrettyDate(comment.created_at)}
-
- )} - - {groupped.audio && groupped.audio.length > 0 && ( - <> - {groupped.audio.map(file => ( -
- {menu} - - - -
{getPrettyDate(comment.created_at)}
-
- ))} - - )} -
- ); -}); + + )} +
+ ); + } +); export { CommentContent }; diff --git a/src/components/node/NodeComments/index.tsx b/src/components/node/NodeComments/index.tsx index ec5fe23e..c7f541da 100644 --- a/src/components/node/NodeComments/index.tsx +++ b/src/components/node/NodeComments/index.tsx @@ -11,6 +11,7 @@ import { nodeLockComment, nodeEditComment, nodeLoadMoreComments } from '~/redux/ import { INodeState } from '~/redux/node/reducer'; import { COMMENTS_DISPLAY } from '~/redux/node/constants'; import { plural } from '~/utils/dom'; +import * as MODAL_ACTIONS from '~/redux/modal/actions'; interface IProps { comments?: IComment[]; @@ -21,6 +22,7 @@ interface IProps { onEdit: typeof nodeEditComment; onLoadMore: typeof nodeLoadMoreComments; order?: 'ASC' | 'DESC'; + modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe; } const NodeComments: FC = memo( @@ -33,6 +35,7 @@ const NodeComments: FC = memo( onLoadMore, comment_count = 0, order = 'DESC', + modalShowPhotoswipe, }) => { const comments_left = useMemo(() => Math.max(0, comment_count - comments.length), [ comments, @@ -73,6 +76,7 @@ const NodeComments: FC = memo( can_edit={canEditComment(group, user)} onDelete={onDelete} onEdit={onEdit} + modalShowPhotoswipe={modalShowPhotoswipe} /> ))} diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx index b8058e69..191e31f6 100644 --- a/src/containers/node/BorisLayout/index.tsx +++ b/src/containers/node/BorisLayout/index.tsx @@ -13,6 +13,7 @@ import { NodeCommentForm } from '~/components/node/NodeCommentForm'; import * as NODE_ACTIONS from '~/redux/node/actions'; import * as AUTH_ACTIONS from '~/redux/auth/actions'; +import * as MODAL_ACTIONS from '~/redux/modal/actions'; import isBefore from 'date-fns/isBefore'; import { Card } from '~/components/containers/Card'; import { Footer } from '~/components/main/Footer'; @@ -28,6 +29,7 @@ const mapDispatchToProps = { nodeEditComment: NODE_ACTIONS.nodeEditComment, nodeLoadMoreComments: NODE_ACTIONS.nodeLoadMoreComments, authSetUser: AUTH_ACTIONS.authSetUser, + modalShowPhotoswipe: MODAL_ACTIONS.modalShowPhotoswipe, }; type IProps = ReturnType & @@ -44,6 +46,7 @@ const BorisLayoutUnconnected: FC = ({ nodeLockComment, nodeEditComment, nodeLoadMoreComments, + modalShowPhotoswipe, authSetUser, }) => { const title = getRandomPhrase('BORIS_TITLE'); @@ -90,6 +93,7 @@ const BorisLayoutUnconnected: FC = ({ onDelete={nodeLockComment} onEdit={nodeEditComment} onLoadMore={nodeLoadMoreComments} + modalShowPhotoswipe={modalShowPhotoswipe} order="ASC" /> )} diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx index 012dcf71..0418f42f 100644 --- a/src/containers/node/NodeLayout/index.tsx +++ b/src/containers/node/NodeLayout/index.tsx @@ -177,6 +177,7 @@ const NodeLayoutUnconnected: FC = memo( onDelete={nodeLockComment} onEdit={nodeEditComment} onLoadMore={nodeLoadMoreComments} + modalShowPhotoswipe={modalShowPhotoswipe} order="DESC" /> )}