feature: added image preview for comments

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<HTMLDivElement> & {
   is_empty?: boolean;
@@ -17,6 +18,7 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   can_edit?: boolean;
   onDelete: typeof nodeLockComment;
   onEdit: typeof nodeEditComment;
+  modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
 };
 
 const Comment: FC<IProps> = memo(
@@ -30,6 +32,7 @@ const Comment: FC<IProps> = memo(
     can_edit,
     onDelete,
     onEdit,
+    modalShowPhotoswipe,
     ...props
   }) => {
     return (
@@ -58,6 +61,7 @@ const Comment: FC<IProps> = memo(
                 can_edit={can_edit}
                 onDelete={onDelete}
                 onEdit={onEdit}
+                modalShowPhotoswipe={modalShowPhotoswipe}
               />
             );
           })}

src/components/node/CommentContent/index.tsx

@@ -14,15 +14,18 @@ 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<IProps> = memo(({ comment, can_edit, onDelete, onEdit }) => {
+const CommentContent: FC<IProps> = memo(
+  ({ comment, can_edit, onDelete, onEdit, modalShowPhotoswipe }) => {
     const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
       () =>
         reduce(
@@ -69,8 +72,8 @@ const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, onEdit }
             {menu}
 
             <div className={styles.images}>
-            {groupped.image.map(file => (
-              <div key={file.id}>
+              {groupped.image.map((file, index) => (
+                <div key={file.id} onClick={() => modalShowPhotoswipe(groupped.image, index)}>
                   <img src={getURL(file, PRESETS['300'])} alt={file.name} />
                 </div>
               ))}
@@ -95,6 +98,7 @@ const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, onEdit }
         )}
       </div>
     );
-});
+  }
+);
 
 export { CommentContent };

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<IProps> = memo(
@@ -33,6 +35,7 @@ const NodeComments: FC<IProps> = 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<IProps> = memo(
             can_edit={canEditComment(group, user)}
             onDelete={onDelete}
             onEdit={onEdit}
+            modalShowPhotoswipe={modalShowPhotoswipe}
           />
         ))}
 

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<typeof mapStateToProps> &
@@ -44,6 +46,7 @@ const BorisLayoutUnconnected: FC<IProps> = ({
   nodeLockComment,
   nodeEditComment,
   nodeLoadMoreComments,
+  modalShowPhotoswipe,
   authSetUser,
 }) => {
   const title = getRandomPhrase('BORIS_TITLE');
@@ -90,6 +93,7 @@ const BorisLayoutUnconnected: FC<IProps> = ({
                 onDelete={nodeLockComment}
                 onEdit={nodeEditComment}
                 onLoadMore={nodeLoadMoreComments}
+                modalShowPhotoswipe={modalShowPhotoswipe}
                 order="ASC"
               />
             )}

src/containers/node/NodeLayout/index.tsx

@@ -177,6 +177,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                         onDelete={nodeLockComment}
                         onEdit={nodeEditComment}
                         onLoadMore={nodeLoadMoreComments}
+                        modalShowPhotoswipe={modalShowPhotoswipe}
                         order="DESC"
                       />
                     )}