file uploading at comments (not working yet)

package-lock.json

@@ -8259,8 +8259,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -8281,16 +8280,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
-            "balanced-match": "^1.0.0",
+            "balanced-match": "1.0.0",
             "concat-map": "0.0.1"
           }
         },
@@ -8303,20 +8300,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -8330,7 +8324,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.1"
           }
         },
         "deep-extend": {
@@ -8408,7 +8402,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
+            "safer-buffer": "2.1.2"
           }
         },
         "ignore-walk": {
@@ -8417,7 +8411,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "minimatch": "^3.0.4"
+            "minimatch": "3.0.4"
           }
         },
         "inflight": {
@@ -8433,8 +8427,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -8446,9 +8439,8 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
-            "number-is-nan": "^1.0.0"
+            "number-is-nan": "1.0.1"
           }
         },
         "isarray": {
@@ -8461,16 +8453,14 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
-            "brace-expansion": "^1.1.7"
+            "brace-expansion": "1.1.11"
           }
         },
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
@@ -8494,7 +8484,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -8547,8 +8536,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "abbrev": "1",
+            "abbrev": "1.1.1",
-            "osenv": "^0.1.4"
+            "osenv": "0.1.5"
           }
         },
         "npm-bundled": {
@@ -8563,8 +8552,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "ignore-walk": "^3.0.1",
+            "ignore-walk": "3.0.1",
-            "npm-bundled": "^1.0.1"
+            "npm-bundled": "1.0.6"
           }
         },
         "npmlog": {
@@ -8582,8 +8571,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -8617,8 +8605,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "os-homedir": "^1.0.0",
+            "os-homedir": "1.0.2",
-            "os-tmpdir": "^1.0.0"
+            "os-tmpdir": "1.0.2"
           }
         },
         "path-is-absolute": {
@@ -8680,8 +8668,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -14056,9 +14043,9 @@
       }
     },
     "react-sortable-hoc": {
-      "version": "1.9.1",
+      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.10.1.tgz",
-      "integrity": "sha512-2VeofjRav8+eZeE5Nm/+b8mrA94rQ+gBsqhXi8pRBSjOWNqslU3ZEm+0XhSlfoXJY2lkgHipfYAUuJbDtCixRg==",
+      "integrity": "sha512-eVyv5rrK6qY9bG60bboRY78In7OpdRRg+hxp4QMLIjC/UJaFSU7exTYd0764GtXvBqh+b+faYGzren5/ffRYKw==",
       "requires": {
         "@babel/runtime": "7.3.4",
         "invariant": "2.2.4",

package.json

@@ -95,7 +95,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scrollbar": "^0.5.4",
-    "react-sortable-hoc": "^1.9.1",
+    "react-sortable-hoc": "^1.10.1",
     "react-stack-grid": "^0.7.1",
     "redux": "^4.0.1",
     "redux-persist": "^5.10.0",

src/components/node/CommentForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, KeyboardEventHandler } from 'react';
+import React, { FC, useCallback, KeyboardEventHandler, useEffect } from 'react';
 import { Textarea } from '~/components/input/Textarea';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import * as styles from './styles.scss';
@@ -14,8 +14,14 @@ import { Group } from '~/components/containers/Group';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
 import uuid from 'uuid4';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
+import { selectUploads } from '~/redux/uploads/selectors';
+import { IState } from '~/redux/store';
+
+const mapStateToProps = (state: IState) => ({
+  node: selectNode(state),
+  uploads: selectUploads(state),
+});
 
-const mapStateToProps = selectNode;
 const mapDispatchToProps = {
   nodePostComment: NODE_ACTIONS.nodePostComment,
   nodeSetCommentData: NODE_ACTIONS.nodeSetCommentData,
@@ -28,8 +34,8 @@ type IProps = ReturnType<typeof mapStateToProps> &
   };
 
 const CommentFormUnconnected: FC<IProps> = ({
-  comment_data,
+  node: { comment_data, is_sending_comment },
-  is_sending_comment,
+  uploads: { statuses, files },
   id,
   nodePostComment,
   nodeSetCommentData,
@@ -85,6 +91,49 @@ const CommentFormUnconnected: FC<IProps> = ({
     [onSubmit]
   );
 
+  useEffect(() => {
+    const temp_ids = (comment_data && comment_data[id] && comment_data[id].temp_ids) || [];
+    const added_files = temp_ids
+      .map(temp_uuid => statuses[temp_uuid] && statuses[temp_uuid].uuid)
+      .map(el => !!el && files[el])
+      .filter(el => !!el && !comment_data[id].files.some(file => file.id === el.id));
+
+    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)
+    );
+
+    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));
+    // }
+    // });
+  }, [statuses, files]);
+
   const comment = comment_data[id];
 
   return (
@@ -111,6 +160,21 @@ const CommentFormUnconnected: FC<IProps> = ({
           </Button>
         </Group>
       </form>
+      {comment.temp_ids.map(
+        temp_id =>
+          statuses[temp_id] &&
+          statuses[temp_id].is_uploading && (
+            <div key={statuses[temp_id].temp_id}>{statuses[temp_id].progress}</div>
+          )
+      )}
+      {comment.files.map(
+        file =>
+          file.name && (
+            <div key={file.id}>
+              {file.name} {file.mime} {file.size}
+            </div>
+          )
+      )}
     </CommentWrapper>
   );
 };

src/components/upload/ImageUpload/index.tsx

@@ -11,9 +11,7 @@ interface IProps {
   is_uploading?: boolean;
 }
 
-const ImageUpload: FC<IProps> = ({
+const ImageUpload: FC<IProps> = ({ thumb, progress, is_uploading }) => (
- thumb, id, progress, is_uploading,
-}) => (
   <div className={styles.wrap}>
     <div className={classNames(styles.thumb_wrap, { is_uploading })}>
       {thumb && <div className={styles.thumb} style={{ backgroundImage: `url("${thumb}")` }} />}