Fix: Upload complete event for large files (#47)

- Upload complete event didn't contain correct data for files uploaded through multi-put
- Prettier run over all files

Author: tonyjin

src/api/ChunkedUpload.js

@@ -8,7 +8,7 @@ import noop from 'lodash.noop';
 import Rusha from 'rusha';
 import Chunk from './Chunk';
 import Base from './Base';
-import type { StringAnyMap } from '../flowTypes';
+import type { BoxItem, StringAnyMap } from '../flowTypes';
 import int32ArrayToBase64 from '../util/base64';
 
 const DEFAULT_RETRY_COMMIT_DELAY_MS = 3000; // Wait 3s before retrying a chunk
@@ -201,7 +201,7 @@ class ChunkedUpload extends Base {
                     sha1: int32ArrayToBase64(new Rusha().rawDigest(buffer)),
                     totalSize: this.file.size,
                     successCallback: this.handleChunkSuccess,
-                    errorCallback: this.handleChunkError,
+                    errorCallback: this.handleUploadError,
                     progressCallback: (progressEvent) => this.handleChunkProgress(chunk, progressEvent)
                 });
 
@@ -231,18 +231,6 @@ class ChunkedUpload extends Base {
             });
     };
 
-    /**
-     * Handles upload error for a chunk.
-     *
-     * @private
-     * @param {Error} error - Progress error
-     * @return {void}
-     */
-    handleChunkError = (error: Error) => {
-        this.cancel();
-        this.errorCallback(error);
-    };
-
     /**
      * Handles upload progress event for a chunk.
      *
@@ -251,7 +239,7 @@ class ChunkedUpload extends Base {
      * @param {ProgressEvent} event - Progress event
      * @return {void}
      */
-    handleChunkProgress = (chunk: Chunk, event: ProgressEvent) => {
+    handleChunkProgress = (chunk: Chunk, event: ProgressEvent): void => {
         if (!event.lengthComputable) {
             return;
         }
@@ -306,24 +294,54 @@ class ChunkedUpload extends Base {
                 Digest: `SHA=${digest}`
             };
 
-            this.xhr.post(this.getUploadSessionUrl(this.sessionId, 'commit'), postData, headers).then((response) => {
-                // Retry after a delay since server is still processing chunks
-                if (response.status === 202) {
-                    this.finished = false;
-                    const retryAfterSec = parseInt(response.headers.get('Retry-After'), 10);
-
-                    if (isNaN(retryAfterSec)) {
-                        setTimeout(() => this.commitFile(), DEFAULT_RETRY_COMMIT_DELAY_MS);
-                    } else {
-                        setTimeout(() => this.commitFile(), retryAfterSec * 1000);
-                    }
-                } else {
-                    this.successCallback(response);
-                }
-            });
+            this.xhr
+                .post(this.getUploadSessionUrl(this.sessionId, 'commit'), postData, headers)
+                .then(this.handleCommitSuccess)
+                .catch(this.handleUploadError);
         });
     }
 
+    /**
+     * Handles a successful commit file response.
+     *
+     * @param {Response} response - Fetch response object
+     * @return {void}
+     */
+    handleCommitSuccess = ({
+        entries,
+        headers,
+        status
+    }: {
+        entries: BoxItem[],
+        headers: Headers,
+        status: number
+    }): void => {
+        // Retry after a delay since server is still processing chunks
+        if (status === 202) {
+            this.finished = false;
+            const retryAfterSec = parseInt(headers.get('Retry-After'), 10);
+
+            if (isNaN(retryAfterSec)) {
+                setTimeout(() => this.commitFile(), DEFAULT_RETRY_COMMIT_DELAY_MS);
+            } else {
+                setTimeout(() => this.commitFile(), retryAfterSec * 1000);
+            }
+        } else if (entries) {
+            this.successCallback(entries);
+        }
+    };
+
+    /**
+     * Handles an upload error. Cancels the pending upload and executes error callback.
+     *
+     * @param {Error} error - Error
+     * @return {void}
+     */
+    handleUploadError = (error: Error): void => {
+        this.cancel();
+        this.errorCallback(error);
+    };
+
     /**
      * Updates SHA1 digest, ensuring that parts are added in the right order.
      *

src/components/Breadcrumbs/Breadcrumb.js

@@ -18,7 +18,13 @@ type Props = {
 };
 
 const Breadcrumb = ({ name = '', onClick, isLast, delimiter }: Props) => {
-    const title = onClick ? <PlainButton onClick={onClick}>{name}</PlainButton> : <span>{name}</span>;
+    const title = onClick
+        ? <PlainButton onClick={onClick}>
+            {name}
+        </PlainButton>
+        : <span>
+            {name}
+        </span>;
     return (
         <span className='buik-breadcrumb'>
             {title}

src/components/Breadcrumbs/BreadcrumbDelimiter.js

@@ -15,7 +15,9 @@ type Props = {
 
 const BreadcrumbDelimiter = ({ delimiter }: Props) =>
     delimiter === DELIMITER_CARET
-        ? <span className='buik-breadcrumb-seperator'><IconRightArrow /></span>
+        ? <span className='buik-breadcrumb-seperator'>
+            <IconRightArrow />
+        </span>
         : <span>/</span>;
 
 export default BreadcrumbDelimiter;

src/components/Breadcrumbs/BreadcrumbDropdown.js

@@ -19,9 +19,7 @@ type Props = {
 
 const BreadcrumbDropdown = ({ crumbs, onCrumbClick, className = '' }: Props) =>
     <DropdownMenu constrainToScrollParent>
-        <PlainButton className={`buik-breadcrumbs-drop-down ${className}`}>
-            ···
-        </PlainButton>
+        <PlainButton className={`buik-breadcrumbs-drop-down ${className}`}>···</PlainButton>
         <Menu>
             {crumbs.map(({ id, name }: Crumb) =>
                 <MenuItem key={id} onClick={() => onCrumbClick(id)}>

src/components/Button/Button.js

@@ -88,7 +88,9 @@ class Button extends PureComponent<DefaultProps, Props, void> {
 
         return (
             <button className={styleClassName} type={type} onClick={this.handleClick} {...buttonProps}>
-                <span className={CLASS_BUTTON_CONTENT_SPAN}>{children}</span>
+                <span className={CLASS_BUTTON_CONTENT_SPAN}>
+                    {children}
+                </span>
                 {isLoading && <LoadingIndicator className='buik-btn-loading-indicator' />}
             </button>
         );

src/components/Button/__tests__/Button-test.js

@@ -12,7 +12,11 @@ describe('Button/Button', () => {
     it('should correctly render children in button', () => {
         const children = 'yooo';
 
-        const wrapper = shallow(<Button>{children}</Button>);
+        const wrapper = shallow(
+            <Button>
+                {children}
+            </Button>
+        );
 
         assert.isTrue(wrapper.hasClass('buik-btn'));
         assert.equal(wrapper.find('.buik-btn-content').length, 1);

src/components/Button/__tests__/PrimaryButton-test.js

@@ -12,7 +12,11 @@ describe('Button/PrimaryButton', () => {
     it('should correctly render children in primary button', () => {
         const children = 'yooo';
 
-        const wrapper = shallow(<PrimaryButton>{children}</PrimaryButton>);
+        const wrapper = shallow(
+            <PrimaryButton>
+                {children}
+            </PrimaryButton>
+        );
 
         assert.equal(wrapper.find(Button).length, 1);
         assert.isTrue(wrapper.hasClass('buik-btn-primary'), true);

src/components/ContentPicker/cellRendererHelper.js

@@ -17,9 +17,8 @@ function isRowSelectable(
     const shouldAllowSelection: boolean = hasHitSelectionLimit ? !!selected : true;
     const isTypeSelectable: boolean = !!type && selectableType.indexOf(type) > -1;
     const isFilePicker: boolean = selectableType.indexOf(TYPE_FILE) > -1;
-    const isExtensionWhitelisted: boolean = isFilePicker && extensionsWhitelist.length
-        ? extensionsWhitelist.indexOf(extension) > -1
-        : true;
+    const isExtensionWhitelisted: boolean =
+        isFilePicker && extensionsWhitelist.length ? extensionsWhitelist.indexOf(extension) > -1 : true;
 
     return shouldAllowSelection && isTypeSelectable && isExtensionWhitelisted;
 }

src/components/ContentUploader/ItemName.js

@@ -10,6 +10,9 @@ type Props = {
     name: string
 };
 
-const ItemName = ({ name }: Props) => <span className='bcu-item-label'>{name}</span>;
+const ItemName = ({ name }: Props) =>
+    <span className='bcu-item-label'>
+        {name}
+    </span>;
 
 export default ItemName;

src/components/ContentUploader/ItemProgress.js

@@ -14,7 +14,9 @@ type Props = {
 const ItemProgress = ({ progress }: Props) =>
     <div className='bcu-item-progress'>
         <ProgressBar percent={progress} />
-        <div className='bcu-progress-label'>{progress}%</div>
+        <div className='bcu-progress-label'>
+            {progress}%
+        </div>
     </div>;
 
 export default ItemProgress;