From f55665c9818753fbdd77bc2f30e1523031e30f1d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Thu, 8 Dec 2022 15:35:35 +0600
Subject: [PATCH] added srcsets to images for comments

---
 .../comment/CommentContent/index.tsx          | 20 +-------
 .../comment/CommentContent/styles.module.scss | 29 ------------
 .../comment/CommentImageGrid/index.tsx        | 46 +++++++++++++++++++
 .../CommentImageGrid/styles.module.scss       | 32 +++++++++++++
 4 files changed, 80 insertions(+), 47 deletions(-)
 create mode 100644 src/components/comment/CommentImageGrid/index.tsx
 create mode 100644 src/components/comment/CommentImageGrid/styles.module.scss

diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index 9999e9c2..89cbb9c4 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -10,7 +10,6 @@ import React, {
 } from 'react';
 
 import classnames from 'classnames';
-import classNames from 'classnames';
 
 import { CommentForm } from '~/components/comment/CommentForm';
 import { Authorized } from '~/components/containers/Authorized';
@@ -23,6 +22,7 @@ import { IComment, IFile } from '~/types';
 import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
 import { append, assocPath, path, reduce } from '~/utils/ramda';
 
+import { CommentImageGrid } from '../CommentImageGrid';
 import { CommentMenu } from '../CommentMenu';
 
 import styles from './styles.module.scss';
@@ -130,23 +130,7 @@ const CommentContent: FC<IProps> = memo(
           <div className={classnames(styles.block, styles.block_image)}>
             {menu}
 
-            <div
-              className={classNames(styles.images, {
-                [styles.multiple]: groupped.image.length > 1,
-              })}
-            >
-              {groupped.image.map((file, index) => (
-                <div
-                  key={file.id}
-                  onClick={() => onShowImageModal(groupped.image, index)}
-                >
-                  <img
-                    src={getURL(file, imagePresets['600'])}
-                    alt={file.name}
-                  />
-                </div>
-              ))}
-            </div>
+            <CommentImageGrid files={groupped.image} />
 
             <div className={styles.date}>
               {getPrettyDate(comment.created_at)}
diff --git a/src/components/comment/CommentContent/styles.module.scss b/src/components/comment/CommentContent/styles.module.scss
index 14954339..7b6fd4c2 100644
--- a/src/components/comment/CommentContent/styles.module.scss
+++ b/src/components/comment/CommentContent/styles.module.scss
@@ -117,35 +117,6 @@
   touch-action: none;
 }
 
-.images {
-  cursor: pointer;
-
-  img {
-    max-height: 400px;
-    border-radius: $radius;
-    max-width: 100%;
-  }
-
-  &.multiple {
-    img {
-      max-height: none;
-    }
-
-    // Desktop devices
-    @include flexbin(25vh, $flexbin-space);
-
-    // Tablet devices
-    @media (max-width: $flexbin-tablet-max) {
-      @include flexbin($flexbin-row-height-tablet, $flexbin-space-tablet);
-    }
-
-    // Phone devices
-    @media (max-width: $flexbin-phone-max) {
-      @include flexbin($flexbin-row-height-phone, $flexbin-space-phone);
-    }
-  }
-}
-
 .audios {
   & > div {
     height: $comment_height;
diff --git a/src/components/comment/CommentImageGrid/index.tsx b/src/components/comment/CommentImageGrid/index.tsx
new file mode 100644
index 00000000..14d8d55d
--- /dev/null
+++ b/src/components/comment/CommentImageGrid/index.tsx
@@ -0,0 +1,46 @@
+import React, { FC, useMemo } from 'react';
+
+import classNames from 'classnames';
+import Image from 'next/future/image';
+import Gallery, { ImageWithSize } from 'react-easy-image-gallery';
+
+import { imagePresets } from '~/constants/urls';
+import { IFile } from '~/types';
+import { getURL } from '~/utils/dom';
+import { getFileSrcSet } from '~/utils/srcset';
+
+import styles from './styles.module.scss';
+
+interface CommentImageGridProps {
+  files: IFile[];
+}
+
+const singleSrcSet = '(max-width: 1024px) 40vw, 20vw';
+const multipleSrcSet = '(max-width: 1024px) 50vw, 20vw';
+
+const CommentImageGrid: FC<CommentImageGridProps> = ({ files }) => {
+  return (
+    <div
+      className={classNames(styles.images, {
+        [styles.multiple]: files.length > 1,
+      })}
+    >
+      {files.map((file, index) => (
+        <div
+          key={file.id}
+          // onClick={() => onShowImageModal(groupped.image, index)}
+        >
+          <img
+            srcSet={getFileSrcSet(file)}
+            src={getURL(file, imagePresets['300'])}
+            alt={file.name}
+            className={styles.image}
+            sizes={files.length > 1 ? singleSrcSet : multipleSrcSet}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export { CommentImageGrid };
diff --git a/src/components/comment/CommentImageGrid/styles.module.scss b/src/components/comment/CommentImageGrid/styles.module.scss
new file mode 100644
index 00000000..e7525fe8
--- /dev/null
+++ b/src/components/comment/CommentImageGrid/styles.module.scss
@@ -0,0 +1,32 @@
+@import 'src/styles/variables';
+@import '~flexbin/flexbin';
+
+.images {
+  cursor: pointer;
+
+  &.multiple {
+    // Desktop devices
+    @include flexbin(25vh, $flexbin-space);
+
+    // Tablet devices
+    @media (max-width: $flexbin-tablet-max) {
+      @include flexbin($flexbin-row-height-tablet, $flexbin-space-tablet);
+    }
+
+    // Phone devices
+    @media (max-width: $flexbin-phone-max) {
+      @include flexbin($flexbin-row-height-phone, $flexbin-space-phone);
+    }
+  }
+}
+
+.image {
+  max-height: 400px;
+  border-radius: $radius;
+  max-width: 100%;
+
+  .multiple & {
+    max-height: 250px;
+    max-inline-size: 250px;
+  }
+}