mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
added callbacks to upload
This commit is contained in:
parent
59252232e0
commit
b6756bb3e5
5 changed files with 95 additions and 58 deletions
|
@ -16,20 +16,20 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: ' ';
|
content: " ";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url('~/sprites/stripes.svg') rgba(0, 0, 0, 0.3);
|
background: url("~/sprites/stripes.svg") rgba(0, 0, 0, 0.3);
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: ' ';
|
content: " ";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
|
@ -41,14 +41,14 @@ function* onGetFlow() {
|
||||||
hideLoader();
|
hideLoader();
|
||||||
}
|
}
|
||||||
|
|
||||||
const start =
|
// const start =
|
||||||
(stored && stored[0] && stored[0].created_at) || new Date().toISOString();
|
// (stored && stored[0] && stored[0].created_at) || new Date().toISOString();
|
||||||
|
//
|
||||||
const end =
|
// const end =
|
||||||
(stored &&
|
// (stored &&
|
||||||
stored[stored.length - 1] &&
|
// stored[stored.length - 1] &&
|
||||||
stored[stored.length - 1].created_at) ||
|
// stored[stored.length - 1].created_at) ||
|
||||||
new Date().toISOString();
|
// new Date().toISOString();
|
||||||
|
|
||||||
yield put(flowSetFlow({ is_loading: true }));
|
yield put(flowSetFlow({ is_loading: true }));
|
||||||
|
|
||||||
|
@ -69,17 +69,17 @@ function* onGetFlow() {
|
||||||
updated: IFlowState["updated"];
|
updated: IFlowState["updated"];
|
||||||
valid: INode["id"][];
|
valid: INode["id"][];
|
||||||
}> = yield call(reqWrapper, getNodeDiff, {
|
}> = yield call(reqWrapper, getNodeDiff, {
|
||||||
start,
|
start: new Date().toISOString(),
|
||||||
end,
|
end: new Date().toISOString(),
|
||||||
with_heroes: true,
|
with_heroes: true,
|
||||||
with_updated: true,
|
with_updated: true,
|
||||||
with_recent: true,
|
with_recent: true,
|
||||||
with_valid: true
|
with_valid: false
|
||||||
});
|
});
|
||||||
|
|
||||||
const result = uniq([
|
const result = uniq([
|
||||||
...(before || []),
|
...(before || []),
|
||||||
...(valid ? stored.filter(node => valid.includes(node.id)) : stored),
|
// ...(valid ? stored.filter(node => valid.includes(node.id)) : stored),
|
||||||
...(after || [])
|
...(after || [])
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
|
@ -45,8 +45,8 @@ const authPersistConfig: PersistConfig = {
|
||||||
|
|
||||||
const flowPersistConfig: PersistConfig = {
|
const flowPersistConfig: PersistConfig = {
|
||||||
key: "flow",
|
key: "flow",
|
||||||
// whitelist: ["nodes", "heroes", "recent", "updated"],
|
whitelist: ["nodes", "heroes", "recent", "updated"],
|
||||||
whitelist: [],
|
// whitelist: [],
|
||||||
storage
|
storage
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
|
import { DetailedHTMLProps, InputHTMLAttributes } from "react";
|
||||||
import { DIALOGS } from '~/redux/modal/constants';
|
import { DIALOGS } from "~/redux/modal/constants";
|
||||||
import { ERRORS } from '~/constants/errors';
|
import { ERRORS } from "~/constants/errors";
|
||||||
import { IUser } from './auth/types';
|
import { IUser } from "./auth/types";
|
||||||
|
|
||||||
export interface ITag {
|
export interface ITag {
|
||||||
id: number;
|
id: number;
|
||||||
|
@ -55,7 +55,7 @@ export interface IResultWithStatus<T> {
|
||||||
|
|
||||||
export type UUID = string;
|
export type UUID = string;
|
||||||
|
|
||||||
export type IUploadType = 'image' | 'text' | 'audio' | 'video' | 'other';
|
export type IUploadType = "image" | "text" | "audio" | "video" | "other";
|
||||||
|
|
||||||
export interface IFile {
|
export interface IFile {
|
||||||
id?: number;
|
id?: number;
|
||||||
|
@ -91,15 +91,17 @@ export interface IFileWithUUID {
|
||||||
subject?: string;
|
subject?: string;
|
||||||
target: string;
|
target: string;
|
||||||
type: string;
|
type: string;
|
||||||
|
onSuccess?: (file: IFile) => void;
|
||||||
|
onFail?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IBlockText {
|
export interface IBlockText {
|
||||||
type: 'text';
|
type: "text";
|
||||||
text: string;
|
text: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IBlockEmbed {
|
export interface IBlockEmbed {
|
||||||
type: 'video';
|
type: "video";
|
||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -122,7 +124,7 @@ export interface INode {
|
||||||
is_heroic?: boolean;
|
is_heroic?: boolean;
|
||||||
|
|
||||||
flow: {
|
flow: {
|
||||||
display: 'single' | 'vertical' | 'horizontal' | 'quadro';
|
display: "single" | "vertical" | "horizontal" | "quadro";
|
||||||
show_description: boolean;
|
show_description: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -145,7 +147,7 @@ export interface IComment {
|
||||||
update_at?: string;
|
update_at?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type IMessage = Omit<IComment, 'user' | 'node'> & {
|
export type IMessage = Omit<IComment, "user" | "node"> & {
|
||||||
from: IUser;
|
from: IUser;
|
||||||
to: IUser;
|
to: IUser;
|
||||||
};
|
};
|
||||||
|
@ -153,7 +155,7 @@ export type IMessage = Omit<IComment, 'user' | 'node'> & {
|
||||||
export interface ICommentGroup {
|
export interface ICommentGroup {
|
||||||
user: IUser;
|
user: IUser;
|
||||||
comments: IComment[];
|
comments: IComment[];
|
||||||
ids: IComment['id'][];
|
ids: IComment["id"][];
|
||||||
}
|
}
|
||||||
|
|
||||||
export type IUploadProgressHandler = (progress: ProgressEvent) => void;
|
export type IUploadProgressHandler = (progress: ProgressEvent) => void;
|
||||||
|
@ -162,25 +164,25 @@ export type IValidationErrors = Record<string, IError>;
|
||||||
export type InputHandler<T = string> = (val: T) => void;
|
export type InputHandler<T = string> = (val: T) => void;
|
||||||
|
|
||||||
export const NOTIFICATION_TYPES = {
|
export const NOTIFICATION_TYPES = {
|
||||||
message: 'message',
|
message: "message",
|
||||||
comment: 'comment',
|
comment: "comment",
|
||||||
node: 'node',
|
node: "node"
|
||||||
};
|
};
|
||||||
|
|
||||||
export type IMessageNotification = {
|
export type IMessageNotification = {
|
||||||
type: typeof NOTIFICATION_TYPES['message'];
|
type: typeof NOTIFICATION_TYPES["message"];
|
||||||
content: Partial<IMessage>;
|
content: Partial<IMessage>;
|
||||||
created_at: string;
|
created_at: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ICommentNotification = {
|
export type ICommentNotification = {
|
||||||
type: typeof NOTIFICATION_TYPES['comment'];
|
type: typeof NOTIFICATION_TYPES["comment"];
|
||||||
content: Partial<IComment>;
|
content: Partial<IComment>;
|
||||||
created_at: string;
|
created_at: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type INodeNotification = {
|
export type INodeNotification = {
|
||||||
type: typeof NOTIFICATION_TYPES['node'];
|
type: typeof NOTIFICATION_TYPES["node"];
|
||||||
content: Partial<INode>;
|
content: Partial<INode>;
|
||||||
created_at: string;
|
created_at: string;
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,37 +1,49 @@
|
||||||
import { takeEvery, all, spawn, call, put, take, fork, race } from 'redux-saga/effects';
|
import {
|
||||||
import { postUploadFile } from './api';
|
takeEvery,
|
||||||
import { UPLOAD_ACTIONS, FILE_MIMES } from '~/redux/uploads/constants';
|
all,
|
||||||
|
spawn,
|
||||||
|
call,
|
||||||
|
put,
|
||||||
|
take,
|
||||||
|
fork,
|
||||||
|
race
|
||||||
|
} from "redux-saga/effects";
|
||||||
|
import { postUploadFile } from "./api";
|
||||||
|
import { UPLOAD_ACTIONS, FILE_MIMES } from "~/redux/uploads/constants";
|
||||||
import {
|
import {
|
||||||
uploadUploadFiles,
|
uploadUploadFiles,
|
||||||
uploadSetStatus,
|
uploadSetStatus,
|
||||||
uploadAddStatus,
|
uploadAddStatus,
|
||||||
uploadDropStatus,
|
uploadDropStatus,
|
||||||
uploadAddFile,
|
uploadAddFile
|
||||||
} from './actions';
|
} from "./actions";
|
||||||
import { reqWrapper } from '../auth/sagas';
|
import { reqWrapper } from "../auth/sagas";
|
||||||
import { createUploader, uploadGetThumb } from '~/utils/uploader';
|
import { createUploader, uploadGetThumb } from "~/utils/uploader";
|
||||||
import { HTTP_RESPONSES } from '~/utils/api';
|
import { HTTP_RESPONSES } from "~/utils/api";
|
||||||
import { IFileWithUUID, IFile, IUploadProgressHandler } from '../types';
|
import { IFileWithUUID, IFile, IUploadProgressHandler } from "../types";
|
||||||
|
|
||||||
function* uploadCall({
|
function* uploadCall({
|
||||||
file,
|
file,
|
||||||
temp_id,
|
temp_id,
|
||||||
target,
|
target,
|
||||||
type,
|
type,
|
||||||
onProgress,
|
onProgress
|
||||||
}: IFileWithUUID & { onProgress: IUploadProgressHandler }) {
|
}: IFileWithUUID & { onProgress: IUploadProgressHandler }) {
|
||||||
return yield call(reqWrapper, postUploadFile, {
|
return yield call(reqWrapper, postUploadFile, {
|
||||||
file,
|
file,
|
||||||
temp_id,
|
temp_id,
|
||||||
type,
|
type,
|
||||||
target,
|
target,
|
||||||
onProgress,
|
onProgress
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function* onUploadProgress(chan) {
|
function* onUploadProgress(chan) {
|
||||||
while (true) {
|
while (true) {
|
||||||
const { progress, temp_id }: { progress: number; temp_id: string } = yield take(chan);
|
const {
|
||||||
|
progress,
|
||||||
|
temp_id
|
||||||
|
}: { progress: number; temp_id: string } = yield take(chan);
|
||||||
|
|
||||||
yield put(uploadSetStatus(temp_id, { progress }));
|
yield put(uploadSetStatus(temp_id, { progress }));
|
||||||
}
|
}
|
||||||
|
@ -47,10 +59,10 @@ function* uploadCancelWorker(id) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function* uploadWorker({ file, temp_id, target, type }: IFileWithUUID) {
|
function* uploadWorker({ file, temp_id, target, type }: IFileWithUUID) {
|
||||||
const [promise, chan] = createUploader<Partial<IFileWithUUID>, Partial<IFileWithUUID>>(
|
const [promise, chan] = createUploader<
|
||||||
uploadCall,
|
Partial<IFileWithUUID>,
|
||||||
{ temp_id, target, type }
|
Partial<IFileWithUUID>
|
||||||
);
|
>(uploadCall, { temp_id, target, type });
|
||||||
|
|
||||||
yield fork(onUploadProgress, chan);
|
yield fork(onUploadProgress, chan);
|
||||||
|
|
||||||
|
@ -58,15 +70,26 @@ function* uploadWorker({ file, temp_id, target, type }: IFileWithUUID) {
|
||||||
temp_id,
|
temp_id,
|
||||||
file,
|
file,
|
||||||
target,
|
target,
|
||||||
type,
|
type
|
||||||
});
|
});
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
function* uploadFile({ file, temp_id, type, target }: IFileWithUUID) {
|
function* uploadFile({
|
||||||
|
file,
|
||||||
|
temp_id,
|
||||||
|
type,
|
||||||
|
target,
|
||||||
|
onSuccess,
|
||||||
|
onFail
|
||||||
|
}: IFileWithUUID) {
|
||||||
if (!file.type || !file.type || !FILE_MIMES[type].includes(file.type)) {
|
if (!file.type || !file.type || !FILE_MIMES[type].includes(file.type)) {
|
||||||
return { error: 'File_Not_Image', status: HTTP_RESPONSES.BAD_REQUEST, data: {} };
|
return {
|
||||||
|
error: "File_Not_Image",
|
||||||
|
status: HTTP_RESPONSES.BAD_REQUEST,
|
||||||
|
data: {}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const preview = yield call(uploadGetThumb, file);
|
const preview = yield call(uploadGetThumb, file);
|
||||||
|
@ -81,7 +104,7 @@ function* uploadFile({ file, temp_id, type, target }: IFileWithUUID) {
|
||||||
// type: file.type,
|
// type: file.type,
|
||||||
temp_id,
|
temp_id,
|
||||||
type,
|
type,
|
||||||
name: file.name,
|
name: file.name
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
@ -91,9 +114,9 @@ function* uploadFile({ file, temp_id, type, target }: IFileWithUUID) {
|
||||||
file,
|
file,
|
||||||
temp_id,
|
temp_id,
|
||||||
target,
|
target,
|
||||||
type,
|
type
|
||||||
}),
|
}),
|
||||||
cancel: call(uploadCancelWorker, temp_id),
|
cancel: call(uploadCancelWorker, temp_id)
|
||||||
// subject_cancel: call(uploadSubjectCancelWorker, subject)
|
// subject_cancel: call(uploadSubjectCancelWorker, subject)
|
||||||
// add here CANCEL_UPLOADS worker, that will watch for subject
|
// add here CANCEL_UPLOADS worker, that will watch for subject
|
||||||
// cancel_editing: take(UPLOAD_ACTIONS.CANCEL_EDITING),
|
// cancel_editing: take(UPLOAD_ACTIONS.CANCEL_EDITING),
|
||||||
|
@ -101,14 +124,24 @@ function* uploadFile({ file, temp_id, type, target }: IFileWithUUID) {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (cancel || cancel_editing) {
|
if (cancel || cancel_editing) {
|
||||||
|
if (onFail) onFail();
|
||||||
return yield put(uploadDropStatus(temp_id));
|
return yield put(uploadDropStatus(temp_id));
|
||||||
}
|
}
|
||||||
|
|
||||||
const { data, error }: { data: IFile & { detail: string }; error: string } = result;
|
const {
|
||||||
|
data,
|
||||||
|
error
|
||||||
|
}: { data: IFile & { detail: string }; error: string } = result;
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
|
if (onFail) onFail();
|
||||||
|
|
||||||
return yield put(
|
return yield put(
|
||||||
uploadSetStatus(temp_id, { is_uploading: false, error: data.detail || error, type })
|
uploadSetStatus(temp_id, {
|
||||||
|
is_uploading: false,
|
||||||
|
error: data.detail || error,
|
||||||
|
type
|
||||||
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -121,12 +154,14 @@ function* uploadFile({ file, temp_id, type, target }: IFileWithUUID) {
|
||||||
type,
|
type,
|
||||||
thumbnail_url: data.full_path,
|
thumbnail_url: data.full_path,
|
||||||
progress: 1,
|
progress: 1,
|
||||||
name: file.name,
|
name: file.name
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
yield put(uploadAddFile(data));
|
yield put(uploadAddFile(data));
|
||||||
|
|
||||||
|
if (onSuccess) onSuccess(data);
|
||||||
|
|
||||||
return { error: null, status: HTTP_RESPONSES.CREATED, data: {} }; // add file here as data
|
return { error: null, status: HTTP_RESPONSES.CREATED, data: {} }; // add file here as data
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue