mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
player: renamed apiGetEmbedYoutube
This commit is contained in:
parent
4da55dcd21
commit
7031084b09
7 changed files with 130 additions and 140 deletions
|
@ -1,33 +1,18 @@
|
|||
import { INode, IResultWithStatus } from '~/redux/types';
|
||||
import { api, configWithToken, errorMiddleware, resultMiddleware } from '~/utils/api';
|
||||
import { api, cleanResult } from '~/utils/api';
|
||||
import { API } from '~/constants/api';
|
||||
import {
|
||||
ApiGetNodesOfTagRequest,
|
||||
ApiGetNodesOfTagResult,
|
||||
ApiGetTagSuggestionsRequest,
|
||||
ApiGetTagSuggestionsResult,
|
||||
} from '~/redux/tag/types';
|
||||
|
||||
export const getTagNodes = ({
|
||||
access,
|
||||
tag,
|
||||
offset,
|
||||
limit,
|
||||
}: {
|
||||
access: string;
|
||||
tag: string;
|
||||
offset: number;
|
||||
limit: number;
|
||||
}): Promise<IResultWithStatus<{ nodes: INode[]; count: number }>> =>
|
||||
export const apiGetNodesOfTag = ({ tag, offset, limit }: ApiGetNodesOfTagRequest) =>
|
||||
api
|
||||
.get(API.TAG.NODES, configWithToken(access, { params: { name: tag, offset, limit } }))
|
||||
.then(resultMiddleware)
|
||||
.catch(errorMiddleware);
|
||||
.get<ApiGetNodesOfTagResult>(API.TAG.NODES, { params: { name: tag, offset, limit } })
|
||||
.then(cleanResult);
|
||||
|
||||
export const getTagAutocomplete = ({
|
||||
search,
|
||||
exclude,
|
||||
access,
|
||||
}: {
|
||||
access: string;
|
||||
search: string;
|
||||
exclude: string[];
|
||||
}): Promise<IResultWithStatus<{ tags: string[] }>> =>
|
||||
export const apiGetTagSuggestions = ({ search, exclude }: ApiGetTagSuggestionsRequest) =>
|
||||
api
|
||||
.get(API.TAG.AUTOCOMPLETE, configWithToken(access, { params: { search, exclude } }))
|
||||
.then(resultMiddleware)
|
||||
.catch(errorMiddleware);
|
||||
.get<ApiGetTagSuggestionsResult>(API.TAG.AUTOCOMPLETE, { params: { search, exclude } })
|
||||
.then(cleanResult);
|
||||
|
|
|
@ -6,48 +6,43 @@ import {
|
|||
tagSetAutocomplete,
|
||||
tagSetNodes,
|
||||
} from '~/redux/tag/actions';
|
||||
import { wrap } from '~/redux/auth/sagas';
|
||||
import { selectTagNodes } from '~/redux/tag/selectors';
|
||||
import { getTagAutocomplete, getTagNodes } from '~/redux/tag/api';
|
||||
import { apiGetTagSuggestions, apiGetNodesOfTag } from '~/redux/tag/api';
|
||||
import { Unwrap } from '~/redux/types';
|
||||
|
||||
function* loadTagNodes({ tag }: ReturnType<typeof tagLoadNodes>) {
|
||||
yield put(tagSetNodes({ isLoading: true }));
|
||||
yield put(tagSetNodes({ isLoading: true, list: [] }));
|
||||
|
||||
try {
|
||||
const { list }: ReturnType<typeof selectTagNodes> = yield select(selectTagNodes);
|
||||
const { data, error }: Unwrap<typeof getTagNodes> = yield call(wrap, getTagNodes, {
|
||||
const data: Unwrap<typeof apiGetNodesOfTag> = yield call(apiGetNodesOfTag, {
|
||||
tag,
|
||||
limit: 18,
|
||||
offset: list.length,
|
||||
});
|
||||
|
||||
if (error) throw new Error(error);
|
||||
|
||||
yield put(tagSetNodes({ isLoading: false, list: [...list, ...data.nodes], count: data.count }));
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
yield put(tagSetNodes({ list: [...list, ...data.nodes], count: data.count }));
|
||||
} catch {
|
||||
} finally {
|
||||
yield put(tagSetNodes({ isLoading: false }));
|
||||
}
|
||||
}
|
||||
|
||||
function* loadAutocomplete({ search, exclude }: ReturnType<typeof tagLoadAutocomplete>) {
|
||||
if (search.length < 3) return;
|
||||
if (search.length < 2) return;
|
||||
|
||||
try {
|
||||
yield put(tagSetAutocomplete({ isLoading: true }));
|
||||
yield delay(100);
|
||||
yield delay(200);
|
||||
|
||||
const { data, error }: Unwrap<typeof getTagAutocomplete> = yield call(
|
||||
wrap,
|
||||
getTagAutocomplete,
|
||||
{ search, exclude }
|
||||
);
|
||||
const data: Unwrap<typeof apiGetTagSuggestions> = yield call(apiGetTagSuggestions, {
|
||||
search,
|
||||
exclude,
|
||||
});
|
||||
|
||||
if (error) throw new Error(error);
|
||||
|
||||
yield put(tagSetAutocomplete({ options: data.tags, isLoading: false }));
|
||||
} catch (e) {
|
||||
yield put(tagSetAutocomplete({ options: data.tags }));
|
||||
} catch {
|
||||
} finally {
|
||||
yield put(tagSetAutocomplete({ isLoading: false }));
|
||||
}
|
||||
}
|
||||
|
|
16
src/redux/tag/types.ts
Normal file
16
src/redux/tag/types.ts
Normal file
|
@ -0,0 +1,16 @@
|
|||
import { INode } from '~/redux/types';
|
||||
|
||||
export type ApiGetNodesOfTagRequest = {
|
||||
tag: string;
|
||||
offset: number;
|
||||
limit: number;
|
||||
};
|
||||
export type ApiGetNodesOfTagResult = { nodes: INode[]; count: number };
|
||||
|
||||
export type ApiGetTagSuggestionsRequest = {
|
||||
search: string;
|
||||
exclude: string[];
|
||||
};
|
||||
export type ApiGetTagSuggestionsResult = {
|
||||
tags: string[];
|
||||
};
|
|
@ -1,31 +1,20 @@
|
|||
import {
|
||||
IResultWithStatus, IFile, IUploadProgressHandler, IFileWithUUID,
|
||||
} from '~/redux/types';
|
||||
import {
|
||||
api, configWithToken, resultMiddleware, errorMiddleware,
|
||||
} from '~/utils/api';
|
||||
import { api, cleanResult } from '~/utils/api';
|
||||
|
||||
import { API } from '~/constants/api';
|
||||
import { ApiUploadFileRequest, ApiUploadFIleResult } from '~/redux/uploads/types';
|
||||
|
||||
export const postUploadFile = ({
|
||||
access,
|
||||
export const apiUploadFile = ({
|
||||
file,
|
||||
target = 'others',
|
||||
type = 'image',
|
||||
onProgress,
|
||||
}: IFileWithUUID & {
|
||||
access: string;
|
||||
onProgress: IUploadProgressHandler;
|
||||
}): Promise<IResultWithStatus<IFile>> => {
|
||||
}: ApiUploadFileRequest) => {
|
||||
const data = new FormData();
|
||||
data.append('file', file);
|
||||
|
||||
return api
|
||||
.post(
|
||||
API.USER.UPLOAD(target, type),
|
||||
data,
|
||||
configWithToken(access, { onUploadProgress: onProgress })
|
||||
)
|
||||
.then(resultMiddleware)
|
||||
.catch(errorMiddleware);
|
||||
.post<ApiUploadFIleResult>(API.USER.UPLOAD(target, type), data, {
|
||||
onUploadProgress: onProgress,
|
||||
})
|
||||
.then(cleanResult);
|
||||
};
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
import { takeEvery, 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 { SagaIterator } from 'redux-saga';
|
||||
import { all, call, fork, put, race, spawn, take, takeEvery } from 'redux-saga/effects';
|
||||
import { apiUploadFile } from './api';
|
||||
import { FILE_MIMES, UPLOAD_ACTIONS } from '~/redux/uploads/constants';
|
||||
import {
|
||||
uploadUploadFiles,
|
||||
uploadSetStatus,
|
||||
uploadAddFile,
|
||||
uploadAddStatus,
|
||||
uploadDropStatus,
|
||||
uploadAddFile,
|
||||
uploadSetStatus,
|
||||
uploadUploadFiles,
|
||||
} from './actions';
|
||||
import { wrap } from '../auth/sagas';
|
||||
import { createUploader, uploadGetThumb } from '~/utils/uploader';
|
||||
import { HTTP_RESPONSES } from '~/utils/api';
|
||||
import { IFileWithUUID, IFile, IUploadProgressHandler } from '../types';
|
||||
import { IFileWithUUID, IUploadProgressHandler, Unwrap } from '../types';
|
||||
|
||||
function* uploadCall({
|
||||
file,
|
||||
|
@ -20,13 +20,15 @@ function* uploadCall({
|
|||
type,
|
||||
onProgress,
|
||||
}: IFileWithUUID & { onProgress: IUploadProgressHandler }) {
|
||||
return yield call(wrap, postUploadFile, {
|
||||
const data: Unwrap<typeof apiUploadFile> = yield call(apiUploadFile, {
|
||||
file,
|
||||
temp_id,
|
||||
type,
|
||||
target,
|
||||
onProgress,
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function* onUploadProgress(chan) {
|
||||
|
@ -46,7 +48,12 @@ function* uploadCancelWorker(id) {
|
|||
return true;
|
||||
}
|
||||
|
||||
function* uploadWorker({ file, temp_id, target, type }: IFileWithUUID) {
|
||||
function* uploadWorker({
|
||||
file,
|
||||
temp_id,
|
||||
target,
|
||||
type,
|
||||
}: IFileWithUUID): SagaIterator<Unwrap<typeof uploadCall>> {
|
||||
const [promise, chan] = createUploader<Partial<IFileWithUUID>, Partial<IFileWithUUID>>(
|
||||
uploadCall,
|
||||
{ temp_id, target, type }
|
||||
|
@ -63,6 +70,9 @@ function* uploadWorker({ file, temp_id, target, type }: IFileWithUUID) {
|
|||
}
|
||||
|
||||
function* uploadFile({ file, temp_id, type, target, onSuccess, onFail }: IFileWithUUID) {
|
||||
if (!temp_id) return;
|
||||
|
||||
try {
|
||||
if (!file.type || !FILE_MIMES[type] || !FILE_MIMES[type].includes(file.type)) {
|
||||
return {
|
||||
error: 'File_Not_Image',
|
||||
|
@ -71,69 +81,63 @@ function* uploadFile({ file, temp_id, type, target, onSuccess, onFail }: IFileWi
|
|||
};
|
||||
}
|
||||
|
||||
const preview = yield call(uploadGetThumb, file);
|
||||
const preview: Unwrap<typeof uploadGetThumb> = yield call(uploadGetThumb, file);
|
||||
|
||||
yield put(
|
||||
uploadAddStatus(
|
||||
// replace with the one, what adds file upload status
|
||||
temp_id,
|
||||
{
|
||||
preview,
|
||||
uploadAddStatus(temp_id, {
|
||||
preview: preview.toString(),
|
||||
is_uploading: true,
|
||||
temp_id,
|
||||
type,
|
||||
name: file.name,
|
||||
}
|
||||
)
|
||||
})
|
||||
);
|
||||
|
||||
const { result, cancel, cancel_editing } = yield race({
|
||||
result: call(uploadWorker, {
|
||||
const [result, cancel]: [
|
||||
Unwrap<typeof uploadCall>,
|
||||
Unwrap<typeof uploadCancelWorker>
|
||||
] = yield race([
|
||||
call(uploadWorker, {
|
||||
file,
|
||||
temp_id,
|
||||
target,
|
||||
type,
|
||||
}),
|
||||
cancel: call(uploadCancelWorker, temp_id),
|
||||
});
|
||||
call(uploadCancelWorker, temp_id),
|
||||
]);
|
||||
|
||||
if (cancel || cancel_editing) {
|
||||
if (cancel || !result) {
|
||||
if (onFail) onFail();
|
||||
return yield put(uploadDropStatus(temp_id));
|
||||
}
|
||||
|
||||
const { data, error }: { data: IFile & { detail: string }; error: string } = result;
|
||||
|
||||
if (error) {
|
||||
if (onFail) onFail();
|
||||
|
||||
return yield put(
|
||||
uploadSetStatus(temp_id, {
|
||||
is_uploading: false,
|
||||
error: data.detail || error,
|
||||
type,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
yield put(
|
||||
uploadSetStatus(temp_id, {
|
||||
is_uploading: false,
|
||||
error: null,
|
||||
uuid: data.id,
|
||||
url: data.full_path,
|
||||
error: '',
|
||||
uuid: result.id,
|
||||
url: result.full_path,
|
||||
type,
|
||||
thumbnail_url: data.full_path,
|
||||
thumbnail_url: result.full_path,
|
||||
progress: 1,
|
||||
name: file.name,
|
||||
})
|
||||
);
|
||||
|
||||
yield put(uploadAddFile(data));
|
||||
yield put(uploadAddFile(result));
|
||||
|
||||
if (onSuccess) onSuccess(data);
|
||||
if (onSuccess) onSuccess(result);
|
||||
} catch (error) {
|
||||
if (onFail) onFail();
|
||||
|
||||
return { error: null, status: HTTP_RESPONSES.CREATED, data: {} }; // add file here as data
|
||||
return yield put(
|
||||
uploadSetStatus(temp_id, {
|
||||
is_uploading: false,
|
||||
error,
|
||||
type,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function* uploadFiles({ files }: ReturnType<typeof uploadUploadFiles>) {
|
||||
|
|
6
src/redux/uploads/types.ts
Normal file
6
src/redux/uploads/types.ts
Normal file
|
@ -0,0 +1,6 @@
|
|||
import { IFile, IFileWithUUID, IUploadProgressHandler } from '~/redux/types';
|
||||
|
||||
export type ApiUploadFileRequest = IFileWithUUID & {
|
||||
onProgress: IUploadProgressHandler;
|
||||
};
|
||||
export type ApiUploadFIleResult = IFile;
|
|
@ -1,7 +1,7 @@
|
|||
import uuid from 'uuid4';
|
||||
import { eventChannel, END, EventChannel } from 'redux-saga';
|
||||
import { END, eventChannel, EventChannel } from 'redux-saga';
|
||||
import { VALIDATORS } from '~/utils/validators';
|
||||
import { IResultWithStatus, IFile } from '~/redux/types';
|
||||
import { IFile, IResultWithStatus } from '~/redux/types';
|
||||
import { HTTP_RESPONSES } from './api';
|
||||
import { EMPTY_FILE, FILE_MIMES, UPLOAD_TYPES } from '~/redux/uploads/constants';
|
||||
|
||||
|
@ -33,13 +33,11 @@ export function createUploader<T extends {}, R extends {}>(
|
|||
export const uploadGetThumb = async file => {
|
||||
if (!file.type || !VALIDATORS.IS_IMAGE_MIME(file.type)) return '';
|
||||
|
||||
const thumb = await new Promise(resolve => {
|
||||
return new Promise<string | ArrayBuffer>(resolve => {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => resolve(reader.result || '');
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
return thumb;
|
||||
};
|
||||
|
||||
export const fakeUploader = ({
|
||||
|
@ -73,9 +71,6 @@ export const fakeUploader = ({
|
|||
});
|
||||
};
|
||||
|
||||
export const getFileType = (file: File): keyof typeof UPLOAD_TYPES => {
|
||||
return (
|
||||
export const getFileType = (file: File): keyof typeof UPLOAD_TYPES | undefined =>
|
||||
(file.type && Object.keys(FILE_MIMES).find(mime => FILE_MIMES[mime].includes(file.type))) ||
|
||||
null
|
||||
);
|
||||
};
|
||||
undefined;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue