uploading

package-lock.json

@@ -2678,6 +2678,14 @@
       "integrity": "sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA==",
       "dev": true
     },
+    "@types/ramda": {
+      "version": "0.26.19",
+      "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.26.19.tgz",
+      "integrity": "sha512-lJuMZDXqZ8W2hl0Gz+wEPUhXcf/tZRuaO5vrxFD3Dv2XMqgTZVw+bvfS6iQAsio9XQV+uhkggtT4eLhDmUpI5g==",
+      "requires": {
+        "ts-toolbelt": "^3.2.22"
+      }
+    },
     "@types/react": {
       "version": "16.8.23",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.23.tgz",
@@ -16651,6 +16659,11 @@
         }
       }
     },
+    "ts-toolbelt": {
+      "version": "3.2.24",
+      "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-3.2.24.tgz",
+      "integrity": "sha512-bBzpseWAp/db3JFbneBA0aG7xxC4iRLzeqyKKr0ee1l0XHNcTi7LtypmENWnPkqPOiUcm061mlcC+S1SgfYkkw=="
+    },
     "tsconfig-paths": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.8.0.tgz",

package.json

@@ -62,6 +62,7 @@
     "@hot-loader/react-dom": "^16.8.1",
     "@types/classnames": "^2.2.7",
     "@types/node": "^11.9.0",
+    "@types/ramda": "^0.26.19",
     "@types/react": "16.8.23",
     "@typescript-eslint/eslint-plugin": "^1.13.0",
     "@typescript-eslint/parser": "^1.13.0",

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 {