From 4ed2957cb4f868d39fffa8264f694bc8314cf771 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 9 Oct 2019 19:30:55 +0700
Subject: [PATCH] displaying comment images

---
 src/components/node/Comment/index.tsx   | 11 ++++++++++-
 src/components/node/Comment/styles.scss |  7 +++++++
 src/redux/node/sagas.ts                 |  2 +-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx
index 08432595..f7f4cfd2 100644
--- a/src/components/node/Comment/index.tsx
+++ b/src/components/node/Comment/index.tsx
@@ -2,8 +2,9 @@ import React, { FC, HTMLAttributes } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { IComment } from '~/redux/types';
 import * as styles from './styles.scss';
-import { formatCommentText } from '~/utils/dom';
+import { formatCommentText, getURL } from '~/utils/dom';
 import { Group } from '~/components/containers/Group';
+import { ImageUpload } from '~/components/upload/ImageUpload';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
@@ -22,6 +23,14 @@ const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo,
         }}
       />
     )}
+
+    {comment.files && comment.files.length > 0 && (
+      <div className={styles.images}>
+        {comment.files.map(file => (
+          <ImageUpload thumb={getURL(file.url)} />
+        ))}
+      </div>
+    )}
   </CommentWrapper>
 );
 
diff --git a/src/components/node/Comment/styles.scss b/src/components/node/Comment/styles.scss
index 1531367a..a16c122a 100644
--- a/src/components/node/Comment/styles.scss
+++ b/src/components/node/Comment/styles.scss
@@ -6,3 +6,10 @@
     font-weight: 600;
   }
 }
+
+.images {
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  column-gap: $grid_line;
+}
diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts
index 94ff4038..e246c752 100644
--- a/src/redux/node/sagas.ts
+++ b/src/redux/node/sagas.ts
@@ -86,7 +86,7 @@ function* onPostComment({ id }: ReturnType<typeof nodePostComment>) {
 
   yield put(nodeSetSendingComment(true));
   const {
-    data: { comment, id: target_id },
+    data: { comment },
     error,
   } = yield call(reqWrapper, postNodeComment, { data: comment_data[id], id: current.id });
   yield put(nodeSetSendingComment(false));