uploading

src/components/editors/ImageEditor/index.tsx

@@ -1,10 +1,12 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import uuid from 'uuid4';
-import { INode, IFileWithUUID } from '~/redux/types';
+import { INode, IFileWithUUID, IFile } 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';
+import { selectUploads } from '~/redux/uploads/selectors';
+import assocPath from 'ramda/es/assocPath';
+import append from 'ramda/es/append';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
@@ -20,6 +22,10 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
   const eventPreventer = useCallback(event => event.preventDefault(), []);
   const [temp, setTemp] = useState([]);
 
+  const onFileAdd = useCallback((file: IFile) => {
+    setData(assocPath(['files'], append(file, data.files), data));
+  }, [data, setData]);
+
   const onDrop = useCallback(
     (event: React.DragEvent<HTMLFormElement>) => {
       event.preventDefault();
@@ -86,8 +92,7 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
 
       if (temp.includes(id) && !!status.uuid && files[status.uuid]) {
         console.log(`${id} uploaded`);
-        // do setData to append this file
-        setData({ ...data, files: [...data.files, files[status.uuid]] });
+        onFileAdd(files[status.uuid]);
         setTemp(temp.filter(el => el !== id));
       }
     });

src/redux/types.ts

@@ -55,6 +55,7 @@ export interface IFile {
   name: string;
   path: string;
   full_path: string;
+  url: string;
   size: number;
 
   type: 'image' | 'text' | 'audio' | 'video';

src/redux/uploads/constants.ts

@@ -19,9 +19,10 @@ export const EMPTY_FILE: IFile = {
   user_id: null,
   node_id: null,
 
-  name: 'somefile.jpg',
-  path: '/covers/',
-  full_path: '/covers/somefile.jpg',
+  name: 'mario-collage-800x450.jpg',
+  path: '/wp-content/uploads/2017/09/',
+  full_path: '/wp-content/uploads/2017/09/mario-collage-800x450.jpg',
+  url: 'https://cdn.arstechnica.net/wp-content/uploads/2017/09/mario-collage-800x450.jpg',
   size: 2400000,
   type: 'image',
   mime: 'image/jpeg',

src/redux/uploads/reducer.ts

@@ -1,6 +1,5 @@
 import { createReducer } from "~/utils/reducer";
-import { IFile } from "~/redux/types";
-import { UUID } from "../types";
+import { IFile, UUID } from "~/redux/types";
 import { UPLOAD_HANDLERS } from "./handlers";
 
 export interface IUploadStatus {