mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
tried to make upload sagas
This commit is contained in:
parent
caf85c104f
commit
3872ff5903
9 changed files with 180 additions and 80 deletions
|
@ -67,6 +67,7 @@ export interface IFile {
|
|||
export interface IFileWithUUID {
|
||||
temp_id?: UUID;
|
||||
file: File;
|
||||
subject: string;
|
||||
}
|
||||
|
||||
export interface IBlock {
|
||||
|
|
|
@ -1,7 +1,25 @@
|
|||
import {UPLOAD_ACTIONS} from "~/redux/uploads/constants";
|
||||
import { UPLOAD_ACTIONS } from "~/redux/uploads/constants";
|
||||
import { IFileWithUUID, UUID } from "../types";
|
||||
import { IUploadStatus } from "./reducer";
|
||||
|
||||
export const uploadUploadFiles = (files: File[], subject: string) => ({
|
||||
export const uploadUploadFiles = (files: IFileWithUUID[]) => ({
|
||||
files,
|
||||
subject,
|
||||
type: UPLOAD_ACTIONS.UPLOAD_FILES,
|
||||
});
|
||||
|
||||
export const uploadAddStatus = (temp_id: UUID, status?: Partial<IUploadStatus>) => ({
|
||||
temp_id,
|
||||
status,
|
||||
type: UPLOAD_ACTIONS.ADD_STATUS,
|
||||
});
|
||||
|
||||
export const uploadSetStatus = (temp_id: UUID, status?: Partial<IUploadStatus>) => ({
|
||||
temp_id,
|
||||
status,
|
||||
type: UPLOAD_ACTIONS.SET_STATUS,
|
||||
});
|
||||
|
||||
export const uploadDropStatus = (temp_id: UUID) => ({
|
||||
temp_id,
|
||||
type: UPLOAD_ACTIONS.DROP_STATUS,
|
||||
});
|
||||
|
|
|
@ -1,10 +1,15 @@
|
|||
import { IFile } from "~/redux/types";
|
||||
import { IUploadState, IUploadStatus } from "./reducer";
|
||||
|
||||
const prefix = 'UPLOAD.';
|
||||
|
||||
export const UPLOAD_ACTIONS = {
|
||||
UPLOAD_FILES: `${prefix}UPLOAD_FILES`,
|
||||
UPLOAD_CANCEL: `${prefix}UPLOAD_CANCEL`,
|
||||
|
||||
ADD_STATUS: `${prefix}ADD_STATUS`,
|
||||
DROP_STATUS: `${prefix}DROP_STATUS`,
|
||||
SET_STATUS: `${prefix}SET_STATUS`,
|
||||
};
|
||||
|
||||
export const EMPTY_FILE: IFile = {
|
||||
|
@ -19,3 +24,14 @@ export const EMPTY_FILE: IFile = {
|
|||
type: 'image',
|
||||
mime: 'image/jpeg',
|
||||
};
|
||||
|
||||
export const EMPTY_UPLOAD_STATUS: IUploadStatus = {
|
||||
is_uploading: false,
|
||||
preview: null,
|
||||
error: null,
|
||||
uuid: null,
|
||||
url: null,
|
||||
progress: 0,
|
||||
thumbnail_url: null,
|
||||
type: null,
|
||||
}
|
|
@ -1,3 +1,38 @@
|
|||
export const UPLOAD_HANDLERS = {
|
||||
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 { IUploadState } from './reducer';
|
||||
|
||||
const addStatus = (
|
||||
state: IUploadState,
|
||||
{ temp_id, status }: ReturnType<typeof uploadAddStatus>
|
||||
): IUploadState => assocPath(
|
||||
['statuses'],
|
||||
{ ...state.statuses, [temp_id]: { ...EMPTY_UPLOAD_STATUS, ...status } },
|
||||
state
|
||||
);
|
||||
|
||||
const dropStatus = (
|
||||
state: IUploadState,
|
||||
{ temp_id }: ReturnType<typeof uploadDropStatus>
|
||||
): IUploadState => assocPath(
|
||||
['statuses'],
|
||||
omit([temp_id], state.statuses),
|
||||
state,
|
||||
);
|
||||
|
||||
const setStatus = (
|
||||
state: IUploadState,
|
||||
{ temp_id, status }: ReturnType<typeof uploadSetStatus>
|
||||
): IUploadState => assocPath(
|
||||
['statuses'],
|
||||
{ ...state.statuses, [temp_id]: { ...(state.statuses[temp_id] || EMPTY_UPLOAD_STATUS), ...status } },
|
||||
state
|
||||
);
|
||||
export const UPLOAD_HANDLERS = {
|
||||
[UPLOAD_ACTIONS.ADD_STATUS]: addStatus,
|
||||
[UPLOAD_ACTIONS.DROP_STATUS]: dropStatus,
|
||||
[UPLOAD_ACTIONS.SET_STATUS]: setStatus,
|
||||
};
|
||||
|
|
|
@ -4,7 +4,14 @@ import { UUID } from "../types";
|
|||
import { UPLOAD_HANDLERS } from "./handlers";
|
||||
|
||||
export interface IUploadStatus {
|
||||
progress: number; is_loading: boolean; error: string;
|
||||
is_uploading: boolean;
|
||||
error: string;
|
||||
preview: string;
|
||||
uuid: UUID;
|
||||
url: string;
|
||||
thumbnail_url: string;
|
||||
type: string;
|
||||
progress: number;
|
||||
}
|
||||
|
||||
export interface IUploadState {
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import { takeEvery, all, spawn, call, put, take, fork, race } from 'redux-saga/effects';
|
||||
import { UPLOAD_ACTIONS } from '~/redux/uploads/constants';
|
||||
import { uploadUploadFiles } from './actions';
|
||||
import { uploadUploadFiles, uploadSetStatus, uploadAddStatus, uploadDropStatus } from './actions';
|
||||
import { reqWrapper } from '../auth/sagas';
|
||||
import { createUploader, uploadGetThumb } from '~/utils/uploader';
|
||||
import { HTTP_RESPONSES } from '~/utils/api';
|
||||
import { VALIDATORS } from '~/utils/validators';
|
||||
import { UUID, IFileWithUUID, IResultWithStatus } from '../types';
|
||||
import { UUID, IFileWithUUID } from '../types';
|
||||
|
||||
function* uploadCall({ temp_id, onProgress, file }) {
|
||||
return yield call(reqWrapper, console.log, { file, onProgress });
|
||||
|
@ -14,9 +14,8 @@ function* uploadCall({ temp_id, onProgress, file }) {
|
|||
function* onUploadProgress(chan) {
|
||||
while (true) {
|
||||
const { progress, temp_id }: { progress: number; temp_id: string } = yield take(chan);
|
||||
console.log('progress', { progress, temp_id });
|
||||
// replace with the one, that changes upload status with progress
|
||||
// yield put(inventoryUploadSet(temp_id, { progress }));
|
||||
|
||||
yield put(uploadSetStatus(temp_id, { progress }));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -35,52 +34,55 @@ function* uploadWorker(file: File, temp_id: UUID) {
|
|||
|
||||
return yield call(promise, { temp_id, file });
|
||||
}
|
||||
function* uploadFile({ file, temp_id }: IFileWithUUID): IResultWithStatus<any> {
|
||||
function* uploadFile({ file, temp_id }: IFileWithUUID) {
|
||||
if (!file.type || !VALIDATORS.IS_IMAGE_MIME(file.type)) {
|
||||
return { error: 'File_Not_Image', status: HTTP_RESPONSES.BAD_REQUEST, data: {} };
|
||||
}
|
||||
|
||||
const preview = yield call(uploadGetThumb, file);
|
||||
|
||||
// yield put(inventoryUploadAdd( // replace with the one, what adds file upload status
|
||||
// temp_id,
|
||||
// {
|
||||
// ...EMPTY_INVENTORY_UPLOAD,
|
||||
// preview,
|
||||
// is_uploading: true,
|
||||
// type: file.type,
|
||||
// },
|
||||
// ));
|
||||
yield put(
|
||||
uploadAddStatus(
|
||||
// replace with the one, what adds file upload status
|
||||
temp_id,
|
||||
{
|
||||
preview,
|
||||
is_uploading: true,
|
||||
type: file.type,
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
const { result, cancel, cancel_editing, save_inventory } = yield race({
|
||||
result: call(uploadWorker, file, temp_id),
|
||||
cancel: call(uploadCancelWorker, temp_id),
|
||||
// subject_cancel: call(uploadSubjectCancelWorker, subject)
|
||||
// add here CANCEL_UPLOADS worker, that will watch for subject
|
||||
// cancel_editing: take(UPLOAD_ACTIONS.CANCEL_EDITING),
|
||||
// save_inventory: take(INVENTORY_ACTIONS.SAVE_INVENTORY),
|
||||
}) as any;
|
||||
|
||||
if (cancel || cancel_editing || save_inventory) {
|
||||
// return yield put(inventoryUploadDrop(temp_id)); // replace with the one, that will delete file upload status record
|
||||
return { error: null, status: HTTP_RESPONSES.NOT_FOUND, data: {} };
|
||||
return yield put(uploadDropStatus(temp_id));
|
||||
}
|
||||
|
||||
const { data, error } = result;
|
||||
|
||||
if (error) {
|
||||
// replace with the one, that changes file upload status to error
|
||||
// return yield put(inventoryUploadSet(temp_id, { is_uploading: false, error: data.detail || error }));
|
||||
return { error: null, status: HTTP_RESPONSES.NOT_FOUND, data: {} };
|
||||
return yield put(
|
||||
uploadSetStatus(temp_id, { is_uploading: false, error: data.detail || error })
|
||||
);
|
||||
}
|
||||
|
||||
// replace with the one, that updates upload status with actual data
|
||||
// yield put(inventoryUploadSet(temp_id, {
|
||||
// is_uploading: false,
|
||||
// error: null,
|
||||
// uuid: data.uuid,
|
||||
// url: data.url,
|
||||
// thumbnail_url: data.url,
|
||||
// }));
|
||||
yield put(
|
||||
uploadSetStatus(temp_id, {
|
||||
is_uploading: false,
|
||||
error: null,
|
||||
uuid: data.uuid,
|
||||
url: data.url,
|
||||
thumbnail_url: data.url,
|
||||
})
|
||||
);
|
||||
|
||||
return { error: null, status: HTTP_RESPONSES.CREATED, data: {} }; // add file here as data
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue