refactored code

src/components/node/CommentForm/index.tsx

@@ -5,17 +5,21 @@ import * as styles from './styles.scss';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import assocPath from 'ramda/es/assocPath';
-import { InputHandler, INode } from '~/redux/types';
+import { InputHandler, IFileWithUUID } from '~/redux/types';
 import { connect } from 'react-redux';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectNode } from '~/redux/node/selectors';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 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';
 
 const mapStateToProps = selectNode;
 const mapDispatchToProps = {
   nodePostComment: NODE_ACTIONS.nodePostComment,
   nodeSetCommentData: NODE_ACTIONS.nodeSetCommentData,
+  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> &
@@ -24,13 +28,40 @@ type IProps = ReturnType<typeof mapStateToProps> &
   };
 
 const CommentFormUnconnected: FC<IProps> = ({
-  nodePostComment,
-  nodeSetCommentData,
   comment_data,
   is_sending_comment,
   id,
+  nodePostComment,
+  nodeSetCommentData,
+  uploadUploadFiles,
 }) => {
   // const [data, setData] = useState<IComment>({ ...EMPTY_COMMENT });
+  const onInputChange = useCallback(
+    event => {
+      event.preventDefault();
+
+      if (!event.target.files || !event.target.files.length) return;
+
+      const items: IFileWithUUID[] = Array.from(event.target.files).map(
+        (file: File): IFileWithUUID => ({
+          file,
+          temp_id: uuid(),
+          subject: UPLOAD_SUBJECTS.COMMENT,
+          target: UPLOAD_TARGETS.COMMENTS,
+          type: UPLOAD_TYPES.IMAGE,
+        })
+      );
+
+      const temps = items.map(file => file.temp_id);
+
+      nodeSetCommentData(
+        id,
+        assocPath(['temp_ids'], [...comment_data[id].temp_ids, ...temps], comment_data[id])
+      );
+      uploadUploadFiles(items);
+    },
+    [uploadUploadFiles, comment_data, id, nodeSetCommentData]
+  );
 
   const onInput = useCallback<InputHandler>(
     text => {
@@ -69,6 +100,8 @@ const CommentFormUnconnected: FC<IProps> = ({
         </div>
 
         <Group horizontal className={styles.buttons}>
+          <input type="file" onInput={onInputChange} />
+
           <Filler />
 
           {is_sending_comment && <LoaderCircle size={20} />}

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,6 +1,4 @@
-import React, {
+import React, { FC, useState, useCallback, useEffect, FormEvent } from 'react';
- FC, useState, useCallback, useEffect, FormEvent,
-} from 'react';
 import { connect } from 'react-redux';
 import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
@@ -23,7 +21,7 @@ import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { UPLOAD_TARGETS, UPLOAD_TYPES, UPLOAD_SUBJECTS } from '~/redux/uploads/constants';
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   const { editor } = selectNode(state);
   const { statuses, files } = selectUploads(state);
 
@@ -50,6 +48,26 @@ const EditorDialogUnconnected: FC<IProps> = ({
   const eventPreventer = useCallback(event => event.preventDefault(), []);
   const [temp, setTemp] = useState([]);
 
+  const onUpload = useCallback(
+    (uploads: File[]) => {
+      const items: IFileWithUUID[] = Array.from(uploads).map(
+        (file: File): IFileWithUUID => ({
+          file,
+          temp_id: uuid(),
+          subject: UPLOAD_SUBJECTS.EDITOR,
+          target: UPLOAD_TARGETS.NODES,
+          type: UPLOAD_TYPES.IMAGE,
+        })
+      );
+
+      const temps = items.map(file => file.temp_id);
+
+      setTemp([...temp, ...temps]);
+      uploadUploadFiles(items);
+    },
+    [setTemp, uploadUploadFiles, temp]
+  );
+
   const onFileMove = useCallback(
     (old_index: number, new_index: number) => {
       setData(assocPath(['files'], moveArrItem(old_index, new_index, data.files), data));
@@ -68,48 +86,23 @@ const EditorDialogUnconnected: FC<IProps> = ({
     (event: React.DragEvent<HTMLDivElement>) => {
       event.preventDefault();
 
-      if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length) return;
+      if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length)
+        return;
 
-      const items: IFileWithUUID[] = Array.from(event.dataTransfer.files).map(
+      onUpload(Array.from(event.dataTransfer.files));
-        (file: File): IFileWithUUID => ({
-          file,
-          temp_id: uuid(),
-          subject: UPLOAD_SUBJECTS.EDITOR,
-          target: UPLOAD_TARGETS.NODES,
-          type: UPLOAD_TYPES.IMAGE,
-        })
-      );
-
-      const temps = items.map(file => file.temp_id);
-
-      setTemp([...temp, ...temps]);
-      uploadUploadFiles(items);
     },
-    [uploadUploadFiles, temp]
+    [onUpload]
   );
 
   const onInputChange = useCallback(
-    (event) => {
+    event => {
       event.preventDefault();
 
       if (!event.target.files || !event.target.files.length) return;
 
-      const items: IFileWithUUID[] = Array.from(event.target.files).map(
+      onUpload(Array.from(event.target.files));
-        (file: File): IFileWithUUID => ({
-          file,
-          temp_id: uuid(),
-          subject: UPLOAD_SUBJECTS.EDITOR,
-          target: UPLOAD_TARGETS.NODES,
-          type: UPLOAD_TYPES.IMAGE,
-        })
-      );
-
-      const temps = items.map(file => file.temp_id);
-
-      setTemp([...temp, ...temps]);
-      uploadUploadFiles(items);
     },
-    [uploadUploadFiles, temp]
+    [onUpload]
   );
 
   useEffect(() => {
@@ -122,9 +115,6 @@ const EditorDialogUnconnected: FC<IProps> = ({
     };
   }, [eventPreventer]);
 
-  // useEffect(() => console.log({ temp }), [temp]);
-  // useEffect(() => console.log({ data }), [data]);
-
   useEffect(() => {
     Object.entries(statuses).forEach(([id, status]) => {
       if (temp.includes(id) && !!status.uuid && files[status.uuid]) {
@@ -135,17 +125,19 @@ const EditorDialogUnconnected: FC<IProps> = ({
   }, [statuses, files, temp, onFileAdd]);
 
   const setTitle = useCallback(
-    (title) => {
+    title => {
       setData({ ...data, title });
     },
     [setData, data]
   );
 
-  const onSubmit = useCallback((event: FormEvent) => {
+  const onSubmit = useCallback(
-    event.preventDefault();
+    (event: FormEvent) => {
-    nodeSave(data);
+      event.preventDefault();
-    console.log({ data });
+      nodeSave(data);
-  }, [data, nodeSave]);
+    },
+    [data, nodeSave]
+  );
 
   const buttons = (
     <Padder style={{ position: 'relative' }}>

src/redux/node/constants.ts

@@ -62,6 +62,7 @@ export const NODE_COMPONENTS: INodeComponents = {
 export const EMPTY_COMMENT: IComment = {
   text: '',
   files: [],
+  temp_ids: [],
   is_private: false,
   user: null,
 };

src/redux/types.ts

@@ -116,6 +116,7 @@ export interface INode {
 
 export interface IComment {
   text: string;
+  temp_ids?: string[];
   files: IFile[];
   is_private: boolean;
   user: IUser;