From 1974feb0420a5e3bea48182bcac941fbd5dfbbce Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 9 Oct 2019 19:08:36 +0700
Subject: [PATCH] fixed image uploads

---
 src/components/flow/FlowGrid/styles.scss   |  4 +--
 src/components/node/CommentForm/index.tsx  | 40 +++++-----------------
 src/containers/node/NodeLayout/styles.scss |  4 +--
 src/styles/variables.scss                  | 29 +++++++++-------
 4 files changed, 30 insertions(+), 47 deletions(-)

diff --git a/src/components/flow/FlowGrid/styles.scss b/src/components/flow/FlowGrid/styles.scss
index 39c5169c..597e9a30 100644
--- a/src/components/flow/FlowGrid/styles.scss
+++ b/src/components/flow/FlowGrid/styles.scss
@@ -7,9 +7,9 @@ $cols: $content_width / $cell;
 
 .grid_test {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));
   grid-template-rows: 360px;
-  grid-auto-rows: 256px;
+  grid-auto-rows: $cell;
   grid-auto-flow: row dense;
   grid-column-gap: $grid_line;
   grid-row-gap: $grid_line;
diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx
index 31f57cea..5240122c 100644
--- a/src/components/node/CommentForm/index.tsx
+++ b/src/components/node/CommentForm/index.tsx
@@ -41,7 +41,6 @@ const CommentFormUnconnected: FC<IProps> = ({
   nodeSetCommentData,
   uploadUploadFiles,
 }) => {
-  // const [data, setData] = useState<IComment>({ ...EMPTY_COMMENT });
   const onInputChange = useCallback(
     event => {
       event.preventDefault();
@@ -101,37 +100,16 @@ const CommentFormUnconnected: FC<IProps> = ({
     const filtered_temps = temp_ids.filter(
       temp_id =>
         statuses[temp_id] &&
-        statuses[temp_id].uuid &&
-        !added_files.some(file => file.id === statuses[temp_id].uuid)
+        (!statuses[temp_id].uuid || !added_files.some(file => file.id === statuses[temp_id].uuid))
     );
 
-    console.log({ temp_ids, added_files });
-
-    // if (added_files.length) {
-    nodeSetCommentData(id, {
-      ...comment_data[id],
-      temp_ids: filtered_temps,
-      files: [...comment_data[id].files, ...added_files],
-    });
-    // }
-
-    // if (filtered_temps.length) {
-    // leaving only currently uploading files
-    // nodeSetCommentData(id, assocPath(['temp_ids'], filtered_temps, comment_data[id]));
-    // }
-
-    // console.log({
-    // statuses,
-    // temp_ids,
-    // filtered_temps,
-    // added_files,
-    // });
-    // Object.entries(statuses).forEach(([id, status]) => {
-    // if (temp.includes(id) && !!status.uuid && files[status.uuid]) {
-    // onFileAdd(files[status.uuid]);
-    // setTemp(temp.filter(el => el !== id));
-    // }
-    // });
+    if (added_files.length) {
+      nodeSetCommentData(id, {
+        ...comment_data[id],
+        temp_ids: filtered_temps,
+        files: [...comment_data[id].files, ...added_files],
+      });
+    }
   }, [statuses, files]);
 
   const comment = comment_data[id];
@@ -149,7 +127,7 @@ const CommentFormUnconnected: FC<IProps> = ({
         </div>
 
         <Group horizontal className={styles.buttons}>
-          <input type="file" onInput={onInputChange} />
+          <input type="file" onInput={onInputChange} multiple />
 
           <Filler />
 
diff --git a/src/containers/node/NodeLayout/styles.scss b/src/containers/node/NodeLayout/styles.scss
index 2e5e7f78..2cb42624 100644
--- a/src/containers/node/NodeLayout/styles.scss
+++ b/src/containers/node/NodeLayout/styles.scss
@@ -5,11 +5,11 @@
 }
 
 .comments {
-  flex: 3 1;
+  flex: 2 1;
 }
 
 .panel {
-  flex: 1 3;
+  flex: 1 2;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 50eff640..983ccc2f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,7 +1,8 @@
-@import "colors";
+@import 'colors';
 
-$cell: 256px;
-$content_width: 1100px;
+$cell: 320px;
+$grid_line: 4px;
+$content_width: $cell * 4 + $grid_line * 3;
 $gap: 10px;
 $spc: $gap * 2;
 
@@ -9,8 +10,6 @@ $radius: 6px;
 $cell_radius: 4px;
 $panel_radius: $radius;
 
-$grid_line: 4px;
-
 $input_height: 36px;
 $input_radius: $radius;
 $info_height: 24px;
@@ -25,9 +24,9 @@ $medium: 500;
 $light: 300;
 $extra_light: 200;
 
-$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-  "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-  "Noto Color Emoji";
+$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
 
 $font_48_semibold: $semibold 48px $font;
 $font_24_bold: $bold 24px $font;
@@ -89,7 +88,7 @@ $input_shadow_filled: $input_shadow;
   position: $position;
 
   &::after {
-    content: " ";
+    content: ' ';
     position: absolute;
     bottom: 0;
     left: 0;
@@ -107,7 +106,9 @@ $input_shadow_filled: $input_shadow;
 }
 
 @mixin tablet {
-  @media (max-width: 599px) { @content; }
+  @media (max-width: 599px) {
+    @content;
+  }
 }
 
 @mixin vertical_at_tablet {
@@ -117,8 +118,12 @@ $input_shadow_filled: $input_shadow;
     & > * {
       margin: $gap/2 0 !important;
 
-      &:first-child { margin-top: 0 !important; }
-      &:last-child { margin-bottom: 0 !important; }
+      &:first-child {
+        margin-top: 0 !important;
+      }
+      &:last-child {
+        margin-bottom: 0 !important;
+      }
     }
   }
 }