From dd8b4e9dcf7b23b21aa0ea8ac992946e276a63d0 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Wed, 14 Dec 2022 09:39:12 +0600
Subject: [PATCH] fixed comment attachments click

---
 src/components/comment/CommentContent/index.tsx   | 8 +++++++-
 src/components/comment/CommentImageGrid/index.tsx | 8 +++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index 89cbb9c4..d36cde9d 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -69,6 +69,12 @@ const CommentContent: FC<IProps> = memo(
       onDelete(comment.id, !comment.deleted_at);
     }, [comment, onDelete]);
 
+    const onImageClick = useCallback(
+      (file: IFile) =>
+        onShowImageModal(groupped.image, groupped.image.indexOf(file)),
+      [onShowImageModal, groupped],
+    );
+
     const menu = useMemo(
       () => (
         <div>
@@ -130,7 +136,7 @@ const CommentContent: FC<IProps> = memo(
           <div className={classnames(styles.block, styles.block_image)}>
             {menu}
 
-            <CommentImageGrid files={groupped.image} />
+            <CommentImageGrid files={groupped.image} onClick={onImageClick} />
 
             <div className={styles.date}>
               {getPrettyDate(comment.created_at)}
diff --git a/src/components/comment/CommentImageGrid/index.tsx b/src/components/comment/CommentImageGrid/index.tsx
index 73a8b886..b6ca70f0 100644
--- a/src/components/comment/CommentImageGrid/index.tsx
+++ b/src/components/comment/CommentImageGrid/index.tsx
@@ -11,12 +11,13 @@ import styles from './styles.module.scss';
 
 interface CommentImageGridProps {
   files: IFile[];
+  onClick: (file: IFile) => void;
 }
 
 const singleSrcSet = '(max-width: 1024px) 40vw, 20vw';
 const multipleSrcSet = '(max-width: 1024px) 50vw, 20vw';
 
-const CommentImageGrid: FC<CommentImageGridProps> = ({ files }) => {
+const CommentImageGrid: FC<CommentImageGridProps> = ({ files, onClick }) => {
   return (
     <div
       className={classNames(styles.images, {
@@ -24,10 +25,7 @@ const CommentImageGrid: FC<CommentImageGridProps> = ({ files }) => {
       })}
     >
       {files.map((file, index) => (
-        <div
-          key={file.id}
-          // onClick={() => onShowImageModal(groupped.image, index)}
-        >
+        <div key={file.id} onClick={() => onClick(file)}>
           <img
             srcSet={getFileSrcSet(file)}
             src={getURL(file, imagePresets['300'])}