displaying comment images

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>
 );
 

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;
+}

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));