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,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<IProps> = memo(({ comment, can_edit, onDelete, onEdit }) => {
+const CommentContent: FC<IProps> = memo(
-  const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
+  ({ comment, can_edit, onDelete, onEdit, modalShowPhotoswipe }) => {
-    () =>
+    const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
-      reduce(
+      () =>
-        (group, file) => assocPath([file.type], append(file, group[file.type]), group),
+        reduce(
-        {},
+          (group, file) => assocPath([file.type], append(file, group[file.type]), group),
-        comment.files
+          {},
-      ),
+          comment.files
-    [comment]
+        ),
-  );
+      [comment]
+    );
 
-  const onLockClick = useCallback(() => {
+    const onLockClick = useCallback(() => {
-    onDelete(comment.id, !comment.deleted_at);
+      onDelete(comment.id, !comment.deleted_at);
-  }, [comment, onDelete]);
+    }, [comment, onDelete]);
 
-  const onEditClick = useCallback(() => {
+    const onEditClick = useCallback(() => {
-    onEdit(comment.id);
+      onEdit(comment.id);
-  }, [comment, onEdit]);
+    }, [comment, onEdit]);
 
-  const menu = useMemo(
+    const menu = useMemo(
-    () => can_edit && <CommentMenu onDelete={onLockClick} onEdit={onEditClick} />,
+      () => can_edit && <CommentMenu onDelete={onLockClick} onEdit={onEditClick} />,
-    [can_edit, comment, onEditClick, onLockClick]
+      [can_edit, comment, onEditClick, onLockClick]
-  );
+    );
 
-  return (
+    return (
-    <div className={styles.wrap}>
+      <div className={styles.wrap}>
-      {comment.text && (
+        {comment.text && (
-        <Group className={classnames(styles.block, styles.block_text)}>
+          <Group className={classnames(styles.block, styles.block_text)}>
-          {menu}
+            {menu}
 
-          <Group className={styles.renderers}>
+            <Group className={styles.renderers}>
-            {formatCommentText(path(['user', 'username'], comment), comment.text).map(
+              {formatCommentText(path(['user', 'username'], comment), comment.text).map(
-              (block, key) =>
+                (block, key) =>
-                COMMENT_BLOCK_RENDERERS[block.type] &&
+                  COMMENT_BLOCK_RENDERERS[block.type] &&
-                createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
+                  createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
-            )}
+              )}
+            </Group>
+
+            <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
           </Group>
+        )}
 
-          <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+        {groupped.image && groupped.image.length > 0 && (
-        </Group>
+          <div className={classnames(styles.block, styles.block_image)}>
-      )}
+            {menu}
 
-      {groupped.image && groupped.image.length > 0 && (
+            <div className={styles.images}>
-        <div className={classnames(styles.block, styles.block_image)}>
+              {groupped.image.map((file, index) => (
-          {menu}
+                <div key={file.id} onClick={() => modalShowPhotoswipe(groupped.image, index)}>
+                  <img src={getURL(file, PRESETS['300'])} alt={file.name} />
+                </div>
+              ))}
+            </div>
 
-          <div className={styles.images}>
+            <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
-            {groupped.image.map(file => (
+          </div>
-              <div key={file.id}>
+        )}
-                <img src={getURL(file, PRESETS['300'])} alt={file.name} />
+
+        {groupped.audio && groupped.audio.length > 0 && (
+          <>
+            {groupped.audio.map(file => (
+              <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
+                {menu}
+
+                <AudioPlayer file={file} />
+
+                <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
               </div>
             ))}
-          </div>
+          </>
-
+        )}
-          <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+      </div>
-        </div>
+    );
-      )}
+  }
-
+);
-      {groupped.audio && groupped.audio.length > 0 && (
-        <>
-          {groupped.audio.map(file => (
-            <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
-              {menu}
-
-              <AudioPlayer file={file} />
-
-              <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
-            </div>
-          ))}
-        </>
-      )}
-    </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"
                       />
                     )}