fetching files

src/components/editors/ImageEditor/index.tsx

@@ -78,14 +78,20 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
   useEffect(() => console.log({ data }), [data]);
 
   useEffect(() => {
-    Object.entries(files).forEach(([id, file]) => {
-      if (temp.includes(id) && !!file.id) {
+    console.log({ temp, files });
+
+    Object.entries(statuses).forEach(([id, status]) => {
+      // todo: make this working
+      console.log({ id, uuid: status.uuid, file: files[status.uuid], files });
+
+      if (temp.includes(id) && !!status.uuid && files[status.uuid]) {
+        console.log(`${id} uploaded`);
         // do setData to append this file
-        setData({ ...data, files: [...data.files, file] });
+        setData({ ...data, files: [...data.files, files[status.uuid]] });
         setTemp(temp.filter(el => el === id));
       }
     });
-  }, [files, temp, setData, data, setTemp]);
+  }, [statuses, temp, setData, data, setTemp]);
 
   return (
     <form className={styles.uploads} onDrop={onDrop}>

src/redux/uploads/actions.ts

@@ -1,5 +1,5 @@
 import { UPLOAD_ACTIONS } from "~/redux/uploads/constants";
-import { IFileWithUUID, UUID } from "../types";
+import { IFileWithUUID, UUID, IFile } from "../types";
 import { IUploadStatus } from "./reducer";
 
 export const uploadUploadFiles = (files: IFileWithUUID[]) => ({
@@ -13,6 +13,11 @@ export const uploadAddStatus = (temp_id: UUID, status?: Partial<IUploadStatus>)
   type: UPLOAD_ACTIONS.ADD_STATUS,
 });
 
+export const uploadAddFile = (file: IFile) => ({
+  file,
+  type: UPLOAD_ACTIONS.ADD_FILE,
+});
+
 export const uploadSetStatus = (temp_id: UUID, status?: Partial<IUploadStatus>) => ({
   temp_id,
   status,

src/redux/uploads/constants.ts

@@ -10,6 +10,8 @@ export const UPLOAD_ACTIONS = {
   ADD_STATUS: `${prefix}ADD_STATUS`,
   DROP_STATUS: `${prefix}DROP_STATUS`,
   SET_STATUS: `${prefix}SET_STATUS`,
+
+  ADD_FILE: `${prefix}ADD_FILE`,
 };
 
 export const EMPTY_FILE: IFile = {

src/redux/uploads/handlers.ts

@@ -2,7 +2,7 @@ import assocPath from 'ramda/es/assocPath';
 import omit from 'ramda/es/omit';
 
 import { UPLOAD_ACTIONS, EMPTY_UPLOAD_STATUS } from './constants';
-import { uploadAddStatus, uploadDropStatus, uploadSetStatus } from './actions';
+import { uploadAddStatus, uploadDropStatus, uploadSetStatus, uploadAddFile } from './actions';
 import { IUploadState } from './reducer';
 
 const addStatus = (
@@ -31,8 +31,19 @@ const setStatus = (
   { ...state.statuses, [temp_id]: { ...(state.statuses[temp_id] || EMPTY_UPLOAD_STATUS), ...status } },
   state
 );
+
+const addFile = (
+  state: IUploadState,
+  { file }: ReturnType<typeof uploadAddFile>
+): IUploadState => assocPath(
+  ['files'],
+  { ...state.files, [file.id]: file },
+  state
+);
+
 export const UPLOAD_HANDLERS = {
   [UPLOAD_ACTIONS.ADD_STATUS]: addStatus,
   [UPLOAD_ACTIONS.DROP_STATUS]: dropStatus,
   [UPLOAD_ACTIONS.SET_STATUS]: setStatus,
+  [UPLOAD_ACTIONS.ADD_FILE]: addFile,
 };

src/redux/uploads/sagas.ts

@@ -1,6 +1,6 @@
 import { takeEvery, all, spawn, call, put, take, fork, race } from 'redux-saga/effects';
 import { UPLOAD_ACTIONS } from '~/redux/uploads/constants';
-import { uploadUploadFiles, uploadSetStatus, uploadAddStatus, uploadDropStatus } from './actions';
+import { uploadUploadFiles, uploadSetStatus, uploadAddStatus, uploadDropStatus, uploadAddFile } from './actions';
 import { reqWrapper } from '../auth/sagas';
 import { createUploader, uploadGetThumb, fakeUploader } from '~/utils/uploader';
 import { HTTP_RESPONSES } from '~/utils/api';
@@ -68,7 +68,7 @@ function* uploadFile({ file, temp_id }: IFileWithUUID) {
     return yield put(uploadDropStatus(temp_id));
   }
 
-  const { data, error }: IResultWithStatus<IFile> = result;
+  const { data, error }: { data: IFile & { detail: any }; error: string } = result;
 
   if (error) {
     return yield put(
@@ -89,6 +89,8 @@ function* uploadFile({ file, temp_id }: IFileWithUUID) {
     })
   );
 
+  yield put(uploadAddFile(data));
+
   return { error: null, status: HTTP_RESPONSES.CREATED, data: {} }; // add file here as data
 }