From a95d12db5baa2875a46ce7c311be51553f5b5444 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Wed, 28 Aug 2019 20:28:30 +0700
Subject: [PATCH] attaching files to comments

---
 src/components/node/CommentForm/index.tsx   | 19 +++++++++++++++++++
 src/components/node/CommentForm/styles.scss |  8 ++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx
index cabbade5..e73cd78a 100644
--- a/src/components/node/CommentForm/index.tsx
+++ b/src/components/node/CommentForm/index.tsx
@@ -17,6 +17,8 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { IState } from '~/redux/store';
 import pipe from 'ramda/es/pipe';
+import { ImageUpload } from '~/components/upload/ImageUpload';
+import { getImageSize } from '~/utils/dom';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -125,6 +127,23 @@ const CommentFormUnconnected: FC<IProps> = ({
           />
         </div>
 
+        <div className={styles.uploads}>
+          {comment_data[id].files.map(file => (
+            <ImageUpload id={file.id} thumb={getImageSize(file.url)} key={file.id} />
+          ))}
+          {comment_data[id].temp_ids.map(
+            status =>
+              statuses[status] && (
+                <ImageUpload
+                  id={statuses[status].uuid}
+                  thumb={statuses[status].preview}
+                  key={status}
+                  progress={statuses[status].progress}
+                />
+              )
+          )}
+        </div>
+
         <Group horizontal className={styles.buttons}>
           <input type="file" onInput={onInputChange} />
 
diff --git a/src/components/node/CommentForm/styles.scss b/src/components/node/CommentForm/styles.scss
index de992cba..47ea3817 100644
--- a/src/components/node/CommentForm/styles.scss
+++ b/src/components/node/CommentForm/styles.scss
@@ -21,3 +21,11 @@
 
   @include outer_shadow();
 }
+
+.uploads {
+  padding: ($gap / 2);
+  display: grid;
+  grid-column-gap: $gap / 2;
+  grid-row-gap: $gap / 2;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+}