diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx index 137ef5a1..80a7f890 100644 --- a/src/components/editors/ImageGrid/index.tsx +++ b/src/components/editors/ImageGrid/index.tsx @@ -6,6 +6,7 @@ import * as styles from './styles.scss'; import { ImageUpload } from '~/components/upload/ImageUpload'; import { IFile } from '~/redux/types'; import { IUploadStatus } from '~/redux/uploads/reducer'; +import { getURL } from '~/utils/dom'; interface IProps { items: IFile[]; @@ -30,9 +31,10 @@ const SortableList = SortableContainer(
{items.map((file, index) => ( - + ))} + {locked.map((item, index) => ( diff --git a/src/components/node/ImageSwitcher/index.tsx b/src/components/node/ImageSwitcher/index.tsx index c4dbc03f..ac91c6a3 100644 --- a/src/components/node/ImageSwitcher/index.tsx +++ b/src/components/node/ImageSwitcher/index.tsx @@ -1,7 +1,8 @@ import React, { FC } from 'react'; -import * as styles from './styles.scss'; import range from 'ramda/es/range'; -import classNames = require("classnames"); +import * as styles from './styles.scss'; + +import classNames = require('classnames'); interface IProps { total: number; @@ -11,11 +12,9 @@ interface IProps { const ImageSwitcher: FC = ({ total, current }) => (
- { - range(0, total).map((item) => ( -
- )) - } + {range(0, total).map(item => ( +
+ ))}
); diff --git a/src/components/upload/ImageUpload/index.tsx b/src/components/upload/ImageUpload/index.tsx index e157332b..3f6edd72 100644 --- a/src/components/upload/ImageUpload/index.tsx +++ b/src/components/upload/ImageUpload/index.tsx @@ -16,12 +16,7 @@ const ImageUpload: FC = ({ }) => (
- {thumb && ( -
- )} + {thumb &&
} {is_uploading && (
diff --git a/src/redux/auth/sagas.ts b/src/redux/auth/sagas.ts index ff5d751c..87aee580 100644 --- a/src/redux/auth/sagas.ts +++ b/src/redux/auth/sagas.ts @@ -17,20 +17,14 @@ import { IUser } from './types'; export function* reqWrapper(requestAction, props = {}): ReturnType { const access = yield select(selectToken); - console.log('firing reqWrapper'); - const result = yield call(requestAction, { access, ...props }); - console.log('at reqWrapper', { result }); - if (result && result.status === 401) { yield put(push(URLS.BASE)); yield put(modalShowDialog(DIALOGS.LOGIN)); return result; } - - console.log('reqWrapper will return'); return result; } diff --git a/src/redux/types.ts b/src/redux/types.ts index e9589ea5..739473a8 100644 --- a/src/redux/types.ts +++ b/src/redux/types.ts @@ -112,4 +112,4 @@ export interface INode { updatedAt?: string; } -export type IUploadProgressHandler = (current: number, total: number) => void; +export type IUploadProgressHandler = (progressEvent: any) => void; diff --git a/src/redux/uploads/api.ts b/src/redux/uploads/api.ts index a5c7aa23..23361f58 100644 --- a/src/redux/uploads/api.ts +++ b/src/redux/uploads/api.ts @@ -9,6 +9,7 @@ export const postUploadFile = ({ file, target = 'others', type = 'image', + onProgress, }: IFileWithUUID & { access: string; onProgress: IUploadProgressHandler; @@ -16,5 +17,9 @@ export const postUploadFile = ({ const data = new FormData(); data.append('file', file); - return api.post(API.USER.UPLOAD(target, type), data, configWithToken(access)); + return api.post( + API.USER.UPLOAD(target, type), + data, + configWithToken(access, { onUploadProgress: onProgress }) + ); }; diff --git a/src/redux/uploads/sagas.ts b/src/redux/uploads/sagas.ts index ab64576c..6d86e21a 100644 --- a/src/redux/uploads/sagas.ts +++ b/src/redux/uploads/sagas.ts @@ -57,18 +57,20 @@ function* uploadWorker({ { temp_id, target, type } ); - fork(onUploadProgress, chan); + yield fork(onUploadProgress, chan); - return yield call(promise, { + const result = yield call(promise, { temp_id, file, target, type, }); + + return result; } function* uploadFile({ - file, temp_id, type, target, subject, + file, temp_id, type, target, }: IFileWithUUID) { if (!file.type || !VALIDATORS.IS_IMAGE_MIME(file.type)) { return { error: 'File_Not_Image', status: HTTP_RESPONSES.BAD_REQUEST, data: {} }; diff --git a/src/utils/dom.ts b/src/utils/dom.ts index c1524398..8e2c61c5 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -11,11 +11,11 @@ export const getStyle = (oElm: any, strCssRule: string) => { }; function polarToCartesian(centerX, centerY, radius, angleInDegrees) { - const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; + const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0; return { - x: centerX + (radius * Math.cos(angleInRadians)), - y: centerY + (radius * Math.sin(angleInRadians)), + x: centerX + radius * Math.cos(angleInRadians), + y: centerY + radius * Math.sin(angleInRadians), }; } @@ -24,7 +24,7 @@ export const describeArc = ( y: number, radius: number, startAngle: number = 0, - endAngle: number = 360, + endAngle: number = 360 ): string => { const start = polarToCartesian(x, y, radius, endAngle); const end = polarToCartesian(x, y, radius, startAngle); @@ -32,9 +32,24 @@ export const describeArc = ( const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1; return [ - 'M', start.x, start.y, - 'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y, - 'L', x, y, - 'L', start.x, start.y, + 'M', + start.x, + start.y, + 'A', + radius, + radius, + 0, + largeArcFlag, + 0, + end.x, + end.y, + 'L', + x, + y, + 'L', + start.x, + start.y, ].join(' '); }; + +export const getURL = url => `${process.env.API_HOST}${url}`; diff --git a/src/utils/uploader.ts b/src/utils/uploader.ts index 4d8d20cf..ee407e71 100644 --- a/src/utils/uploader.ts +++ b/src/utils/uploader.ts @@ -10,7 +10,10 @@ export const IMAGE_MIME_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/ export function createUploader( callback: (args: any) => any, payload: R -): [(args: T) => (args: T & { onProgress: (current: number, total: number) => void }) => any, EventChannel] { +): [ + (args: T) => (args: T & { onProgress: (current: number, total: number) => void }) => any, + EventChannel +] { let emit; const chan = eventChannel((emitter) => { @@ -18,8 +21,8 @@ export function createUploader( return () => null; }); - const onProgress = (current: number, total: number): void => { - emit(current >= total ? END : { ...payload, progress: parseFloat((current / total).toFixed(1)) }); + const onProgress = ({ loaded, total }: { loaded: number; total: number }): void => { + emit(loaded >= total ? END : { ...payload, progress: parseFloat((loaded / total).toFixed(1)) }); }; const wrappedCallback = args => callback({ ...args, onProgress }); @@ -40,7 +43,7 @@ export const uploadGetThumb = async (file) => { export const fakeUploader = ({ file, onProgress, - mustSucceed + mustSucceed, }: { file: { url?: string; error?: string }; onProgress: (current: number, total: number) => void;