changed uploader to fetch hidden files

src/components/editors/EditorPanel/index.tsx

@@ -5,7 +5,6 @@ import { INode, IFileWithUUID } from '~/redux/types';
 interface IProps {
   data: INode;
   setData: (val: INode) => void;
-  onUpload: (val: IFileWithUUID[]) => void;
 }
 
 const EditorPanel: FC<IProps> = () => <div className={styles.panel} />;

src/components/editors/ImageEditor/index.tsx

@@ -2,14 +2,21 @@ import React, { FC, useCallback, useEffect, useState } from 'react';
 import uuid from 'uuid4';
 import { INode, IFileWithUUID } from '~/redux/types';
 import * as styles from './styles.scss';
+import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
+import { connect } from 'react-redux';
+import { selectUploadStatuses, selectUploads } from '~/redux/uploads/selectors';
 
-interface IProps {
+const mapStateToProps = selectUploads;
+const mapDispatchToProps = {
+  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
+};
+
+type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {
   data: INode;
   setData: (val: INode) => void;
-  onUpload: (val: IFileWithUUID[]) => void;
 }
 
-const ImageEditor: FC<IProps> = ({ data, setData, onUpload }) => {
+const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles, statuses, files }) => {
   const eventPreventer = useCallback(event => event.preventDefault(), []);
   const [temp, setTemp] = useState([]);
 
@@ -19,7 +26,7 @@ const ImageEditor: FC<IProps> = ({ data, setData, onUpload }) => {
 
       if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length) return;
 
-      const files: IFileWithUUID[] = Array.from(event.dataTransfer.files).map(
+      const items: IFileWithUUID[] = Array.from(event.dataTransfer.files).map(
         (file: File): IFileWithUUID => ({
           file,
           temp_id: uuid(),
@@ -27,12 +34,12 @@ const ImageEditor: FC<IProps> = ({ data, setData, onUpload }) => {
         })
       );
 
-      const temps = files.map(file => file.temp_id);
+      const temps = items.map(file => file.temp_id);
 
       setTemp([...temp, ...temps]);
-      onUpload(files);
+      uploadUploadFiles(items);
     },
-    [onUpload, temp]
+    [uploadUploadFiles, temp]
   );
 
   const onInputChange = useCallback(
@@ -41,7 +48,7 @@ const ImageEditor: FC<IProps> = ({ data, setData, onUpload }) => {
 
       if (!event.target.files || !event.target.files.length) return;
 
-      const files: IFileWithUUID[] = Array.from(event.target.files).map(
+      const items: IFileWithUUID[] = Array.from(event.target.files).map(
         (file: File): IFileWithUUID => ({
           file,
           temp_id: uuid(),
@@ -49,12 +56,12 @@ const ImageEditor: FC<IProps> = ({ data, setData, onUpload }) => {
         })
       );
 
-      const temps = files.map(file => file.temp_id);
+      const temps = items.map(file => file.temp_id);
 
       setTemp([...temp, ...temps]);
-      onUpload(files);
+      uploadUploadFiles(items);
     },
-    [onUpload, temp]
+    [uploadUploadFiles, temp]
   );
 
   useEffect(() => {
@@ -68,6 +75,17 @@ const ImageEditor: FC<IProps> = ({ data, setData, onUpload }) => {
   }, [eventPreventer]);
 
   useEffect(() => console.log({ temp }), [temp]);
+  useEffect(() => console.log({ data }), [data]);
+
+  useEffect(() => {
+    Object.entries(files).forEach(([id, file]) => {
+      if (temp.includes(id) && !!file.id) {
+        // do setData to append this file
+        setData({ ...data, files: [...data.files, file] });
+        setTemp(temp.filter(el => el === id));
+      }
+    });
+  }, [files, temp, setData, data, setTemp]);
 
   return (
     <form className={styles.uploads} onDrop={onDrop}>
@@ -77,4 +95,5 @@ const ImageEditor: FC<IProps> = ({ data, setData, onUpload }) => {
   );
 };
 
+const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected)
 export { ImageEditor };

src/containers/dialogs/EditorDialog/index.tsx

@@ -11,17 +11,13 @@ import { connect } from 'react-redux';
 import { selectNode } from '~/redux/node/selectors';
 import { ImageEditor } from '~/components/editors/ImageEditor';
 import { EditorPanel } from '~/components/editors/EditorPanel';
-import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import { IFileWithUUID } from '~/redux/types';
 
 const mapStateToProps = selectNode;
-const mapDispatchToProps = {
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
-};
+const mapDispatchToProps = {};
 
 type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor, uploadUploadFiles }) => {
+const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor }) => {
   const [data, setData] = useState(editor);
 
   const setTitle = useCallback(
@@ -31,16 +27,9 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor, uploadUpl
     [setData, data]
   );
 
-  const onUpload = useCallback(
-    (files: IFileWithUUID[]) => {
-      uploadUploadFiles(files);
-    },
-    [uploadUploadFiles]
-  );
-
   const buttons = (
     <Padder style={{ position: 'relative' }}>
-      <EditorPanel data={data} setData={setData} onUpload={onUpload} />
+      <EditorPanel data={data} setData={setData} />
 
       <Group horizontal>
         <InputText title="Название" value={data.title} handler={setTitle} />
@@ -55,7 +44,7 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor, uploadUpl
   return (
     <ScrollDialog buttons={buttons} width={860} onClose={onRequestClose}>
       <div className={styles.editor}>
-        <ImageEditor data={data} setData={setData} onUpload={onUpload} />
+        <ImageEditor data={data} setData={setData} />
       </div>
     </ScrollDialog>
   );

src/redux/uploads/reducer.ts

@@ -9,8 +9,8 @@ export interface IUploadStatus {
   preview: string;
   uuid: UUID;
   url: string;
-  thumbnail_url: string;
   type: string;
+  thumbnail_url: string;
   progress: number;
 }
 

src/redux/uploads/sagas.ts

@@ -85,6 +85,7 @@ function* uploadFile({ file, temp_id }: IFileWithUUID) {
       uuid: data.id,
       url: data.full_path,
       thumbnail_url: data.full_path,
+      progress: 1,
     })
   );
 

src/redux/uploads/selectors.ts

@@ -0,0 +1,5 @@
+import { IState } from '~/redux/store';
+import { IUploadState } from '~/redux/uploads/reducer';
+
+export const selectUploads = ({ uploads }: IState): IUploadState => uploads;
+export const selectUploadStatuses = ({ uploads: { statuses } }: IState): IUploadState['statuses'] => statuses;

src/utils/uploader.ts

@@ -50,16 +50,20 @@ export const fakeUploader = ({
 
   return new Promise((resolve, reject) => {
     setTimeout(() => {
-      onProgress(1, 2);
-    }, 100);
+      onProgress(1, 3);
+    }, 1000);
 
     setTimeout(() => {
-      onProgress(2, 2);
+      onProgress(2, 3);
+    }, 2000);
+
+    setTimeout(() => {
+      onProgress(3, 3);
       if (mustSucceed) {
         resolve({ status: HTTP_RESPONSES.CREATED, data: { ...EMPTY_FILE, id: uuid() } });
       } else {
         reject({ response: { statusText: error } });
       }
-    }, 500);
+    }, 3000);
   });
 };

tsconfig.json

@@ -18,6 +18,6 @@
       "~/*": ["src/*"]
     }
   },
-  "include": ["./src/**/*", "./custom.d.ts"],
+  "include": ["./src/index.tsx", "./custom.d.ts"],
   "exclude": ["./__tests__/**/*"]
 }