fixed uploads

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(
     <div className={styles.grid}>
       {items.map((file, index) => (
         <SortableItem key={file.id} index={index} collection={0}>
-          <ImageUpload id={file.id} thumb={file.url} />
+          <ImageUpload id={file.id} thumb={getURL(file.url)} />
         </SortableItem>
       ))}
+
       {locked.map((item, index) => (
         <SortableItem key={item.temp_id} index={index} collection={1} disabled>
           <ImageUpload thumb={item.preview} progress={item.progress} is_uploading />

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<IProps> = ({ total, current }) => (
   <div className={styles.wrap}>
     <div className={styles.switcher}>
-      {
-        range(0, total).map((item) => (
-          <div className={classNames({ is_active: item === current })} />
-        ))
-      }
+      {range(0, total).map(item => (
+        <div className={classNames({ is_active: item === current })} key={item} />
+      ))}
     </div>
   </div>
 );

src/components/upload/ImageUpload/index.tsx

@@ -16,12 +16,7 @@ const ImageUpload: FC<IProps> = ({
 }) => (
   <div className={styles.wrap}>
     <div className={classNames(styles.thumb_wrap, { is_uploading })}>
-      {thumb && (
-        <div
-          className={styles.thumb}
-          style={{ backgroundImage: `url("${process.env.API_HOST}${thumb}")` }}
-        />
-      )}
+      {thumb && <div className={styles.thumb} style={{ backgroundImage: `url("${thumb}")` }} />}
       {is_uploading && (
         <div className={styles.progress}>
           <ArcProgress size={72} progress={progress} />

src/redux/auth/sagas.ts

@@ -17,20 +17,14 @@ import { IUser } from './types';
 export function* reqWrapper(requestAction, props = {}): ReturnType<typeof requestAction> {
   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;
 }

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;

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 })
+  );
 };

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: {} };

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}`;

src/utils/uploader.ts

@@ -10,7 +10,10 @@ export const IMAGE_MIME_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/
 export function createUploader<T extends {}, R extends {}>(
   callback: (args: any) => any,
   payload: R
-): [(args: T) => (args: T & { onProgress: (current: number, total: number) => void }) => any, EventChannel<any>] {
+): [
+  (args: T) => (args: T & { onProgress: (current: number, total: number) => void }) => any,
+  EventChannel<any>
+] {
   let emit;
 
   const chan = eventChannel((emitter) => {
@@ -18,8 +21,8 @@ export function createUploader<T extends {}, R extends {}>(
     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;