From 1aff4d5b73c7a58a25bc51ab22eefd22358d36cd Mon Sep 17 00:00:00 2001 From: muerwre Date: Wed, 7 Aug 2019 17:44:00 +0700 Subject: [PATCH] changed uploader to fetch hidden files --- src/components/editors/EditorPanel/index.tsx | 1 - src/components/editors/ImageEditor/index.tsx | 41 ++++++++++++++----- src/containers/dialogs/EditorDialog/index.tsx | 19 ++------- src/redux/uploads/reducer.ts | 2 +- src/redux/uploads/sagas.ts | 3 +- src/redux/uploads/selectors.ts | 5 +++ src/utils/uploader.ts | 12 ++++-- tsconfig.json | 2 +- 8 files changed, 51 insertions(+), 34 deletions(-) create mode 100644 src/redux/uploads/selectors.ts diff --git a/src/components/editors/EditorPanel/index.tsx b/src/components/editors/EditorPanel/index.tsx index 36b90bf9..6cc3faca 100644 --- a/src/components/editors/EditorPanel/index.tsx +++ b/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 = () =>
; diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx index e3b524d0..c9b4b291 100644 --- a/src/components/editors/ImageEditor/index.tsx +++ b/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 mapDispatchToProps & { data: INode; setData: (val: INode) => void; - onUpload: (val: IFileWithUUID[]) => void; } -const ImageEditor: FC = ({ data, setData, onUpload }) => { +const ImageEditorUnconnected: FC = ({ data, setData, uploadUploadFiles, statuses, files }) => { const eventPreventer = useCallback(event => event.preventDefault(), []); const [temp, setTemp] = useState([]); @@ -19,7 +26,7 @@ const ImageEditor: FC = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 (
@@ -77,4 +95,5 @@ const ImageEditor: FC = ({ data, setData, onUpload }) => { ); }; +const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected) export { ImageEditor }; diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index 3da37de8..347700ca 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/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 mapDispatchToProps & {}; -const EditorDialogUnconnected: FC = ({ onRequestClose, editor, uploadUploadFiles }) => { +const EditorDialogUnconnected: FC = ({ onRequestClose, editor }) => { const [data, setData] = useState(editor); const setTitle = useCallback( @@ -31,16 +27,9 @@ const EditorDialogUnconnected: FC = ({ onRequestClose, editor, uploadUpl [setData, data] ); - const onUpload = useCallback( - (files: IFileWithUUID[]) => { - uploadUploadFiles(files); - }, - [uploadUploadFiles] - ); - const buttons = ( - + @@ -55,7 +44,7 @@ const EditorDialogUnconnected: FC = ({ onRequestClose, editor, uploadUpl return (
- +
); diff --git a/src/redux/uploads/reducer.ts b/src/redux/uploads/reducer.ts index 2cb24437..674a3ce3 100644 --- a/src/redux/uploads/reducer.ts +++ b/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; } diff --git a/src/redux/uploads/sagas.ts b/src/redux/uploads/sagas.ts index 3be8a780..43d49be9 100644 --- a/src/redux/uploads/sagas.ts +++ b/src/redux/uploads/sagas.ts @@ -11,7 +11,7 @@ function* uploadCall({ temp_id, onProgress, file }) { return yield call(reqWrapper, fakeUploader, { file: { url: 'some', error: 'cant do this boss' }, onProgress, mustSucceed: true }); } -function* onUploadProgress(chan) { +function* onUploadProgress(chan) { while (true) { const { progress, temp_id }: { progress: number; temp_id: string } = yield take(chan); @@ -85,6 +85,7 @@ function* uploadFile({ file, temp_id }: IFileWithUUID) { uuid: data.id, url: data.full_path, thumbnail_url: data.full_path, + progress: 1, }) ); diff --git a/src/redux/uploads/selectors.ts b/src/redux/uploads/selectors.ts new file mode 100644 index 00000000..6981b5d7 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/utils/uploader.ts b/src/utils/uploader.ts index b9c694d0..24f556fd 100644 --- a/src/utils/uploader.ts +++ b/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); }); }; diff --git a/tsconfig.json b/tsconfig.json index 351b0b61..3b6d8e22 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,6 +18,6 @@ "~/*": ["src/*"] } }, - "include": ["./src/**/*", "./custom.d.ts"], + "include": ["./src/index.tsx", "./custom.d.ts"], "exclude": ["./__tests__/**/*"] }