feat(project): add timeout option

Author: olavoparno

.eslintrc.js

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 module.exports = {
   env: {
     browser: true,
@@ -22,18 +23,18 @@ module.exports = {
   settings: {
     'import/resolver': {
       node: {
-        extensions: ['.jsx', '.ts', '.tsx'],
+        extensions: ['.ts', '.tsx', '.json'],
       },
     },
   },
   rules: {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
     '@typescript-eslint/explicit-function-return-type': 'off',
-    'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }],
+    'react/jsx-filename-extension': ['error', { extensions: ['.tsx'] }],
     'react/prop-types': 'off',
     'react/jsx-one-expression-per-line': 'off',
-    'import/extensions': ['error', 'never'],
+    'import/extensions': 0,
     'import/prefer-default-export': 'off',
     'import/no-unresolved': ['error', { ignore: ['react-hooks-fetch'] }],
     camelcase: [

.gitignore

@@ -24,3 +24,4 @@ yarn-error.log*
 .vercel
 
 coverage
+.dccache

README.md

@@ -87,15 +87,15 @@ export default function App() {
 
 - An object with the following keys:
 
-| key          | description                      | arguments                               |
-| ------------ | -------------------------------- | --------------------------------------- |
-| size         | size in bytes                    | n/a                                     |
-| elapsed      | elapsed time in seconds          | n/a                                     |
-| percentage   | percentage in string             | n/a                                     |
-| download     | download function handler        | (downloadUrl: string, filename: string) |
-| cancel       | cancel function handler          | n/a                                     |
-| error        | error object from the request    | n/a                                     |
-| isInProgress | boolean denoting download status | n/a                                     |
+| key          | description                      | arguments                                                 |
+| ------------ | -------------------------------- | --------------------------------------------------------- |
+| size         | size in bytes                    | n/a                                                       |
+| elapsed      | elapsed time in seconds          | n/a                                                       |
+| percentage   | percentage in string             | n/a                                                       |
+| download     | download function handler        | (downloadUrl: string, filename: string, timeout?: number) |
+| cancel       | cancel function handler          | n/a                                                       |
+| error        | error object from the request    | n/a                                                       |
+| isInProgress | boolean denoting download status | n/a                                                       |
 
 ```jsx
 const {

rollup.config.js

@@ -28,7 +28,7 @@ export default {
     url({ exclude: ['**/*.svg'] }),
     resolve(),
     typescript(),
-    commonjs({ extensions: ['.js', '.ts'] }),
+    commonjs({ extensions: ['.ts'] }),
     terser(),
   ],
 };

src/__tests__/index.spec.ts

@@ -1,9 +1,7 @@
-/* eslint-disable no-plusplus */
-/* eslint-disable no-prototype-builtins */
-import fetch from 'node-fetch';
 import { ReadableStream } from 'web-streams-polyfill/ponyfill';
 import { renderHook, act } from '@testing-library/react-hooks';
 import useDownloader, { jsDownload } from '../index';
+import { IWindowDownloaderEmbedded } from '../types';
 
 const expectedKeys = [
   'elapsed',
@@ -216,14 +214,18 @@ describe('useDownloader failures', () => {
 
   describe('Tests with msSaveBlob', () => {
     beforeAll(() => {
-      window.navigator.msSaveBlob = () => {
-        return true;
-      };
+      (window as unknown as IWindowDownloaderEmbedded).navigator.msSaveBlob =
+        () => {
+          return true;
+        };
     });
 
     it('should test with msSaveBlob', () => {
       console.error = jest.fn();
-      const msSaveBlobSpy = jest.spyOn(window.navigator, 'msSaveBlob');
+      const msSaveBlobSpy = jest.spyOn(
+        (window as unknown as IWindowDownloaderEmbedded).navigator,
+        'msSaveBlob'
+      );
 
       jsDownload(new Blob(['abcde']), 'test');
 
@@ -233,20 +235,23 @@ describe('useDownloader failures', () => {
 
   describe('Tests without msSaveBlob', () => {
     beforeAll(() => {
-      window.navigator.msSaveBlob = undefined;
+      (window as unknown as IWindowDownloaderEmbedded).navigator.msSaveBlob =
+        undefined;
       window.URL.createObjectURL = () => null;
       window.URL.revokeObjectURL = () => null;
     });
 
     it('should test with URL and being revoked', async () => {
+      jest.useFakeTimers('modern');
+
       const createObjectURLSpy = jest.spyOn(window.URL, 'createObjectURL');
       const revokeObjectURLSpy = jest.spyOn(window.URL, 'revokeObjectURL');
 
       jsDownload(new Blob(['abcde']), 'test');
 
       expect(createObjectURLSpy).toHaveBeenCalled();
 
-      await new Promise((resolve) => setTimeout(() => resolve(true), 250));
+      jest.runAllTimers();
 
       expect(revokeObjectURLSpy).toHaveBeenCalled();
     });

src/index.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { IResolverProps, IUseDownloader, TError } from './types';
+import { DownloadFunction, IResolverProps, IUseDownloader, IWindowDownloaderEmbedded, TError } from './types';
 
 export const resolver =
   ({
@@ -8,66 +8,66 @@ export const resolver =
     setPercentageCallback,
     setErrorCallback,
   }: IResolverProps) =>
-  (response: Response): Response => {
-    if (!response.ok) {
-      throw Error(`${response.status} ${response.type} ${response.statusText}`);
-    }
+    (response: Response): Response => {
+      if (!response.ok) {
+        throw Error(`${response.status} ${response.type} ${response.statusText}`);
+      }
 
-    if (!response.body) {
-      throw Error('ReadableStream not yet supported in this browser.');
-    }
+      if (!response.body) {
+        throw Error('ReadableStream not yet supported in this browser.');
+      }
 
-    const responseBody = response.body;
+      const responseBody = response.body;
 
-    const contentEncoding = response.headers.get('content-encoding');
-    const contentLength = response.headers.get(
-      contentEncoding ? 'x-file-size' : 'content-length'
-    );
+      const contentEncoding = response.headers.get('content-encoding');
+      const contentLength = response.headers.get(
+        contentEncoding ? 'x-file-size' : 'content-length'
+      );
 
-    const total = parseInt(contentLength || '0', 10);
+      const total = parseInt(contentLength || '0', 10);
 
-    setSize(() => total);
+      setSize(() => total);
 
-    let loaded = 0;
+      let loaded = 0;
 
-    const stream = new ReadableStream<Uint8Array>({
-      start(controller) {
-        setControllerCallback(controller);
+      const stream = new ReadableStream<Uint8Array>({
+        start(controller) {
+          setControllerCallback(controller);
 
-        const reader = responseBody.getReader();
+          const reader = responseBody.getReader();
 
-        async function read(): Promise<void> {
-          return reader
-            .read()
-            .then(({ done, value }) => {
-              if (done) {
-                return controller.close();
-              }
+          async function read(): Promise<void> {
+            return reader
+              .read()
+              .then(({ done, value }) => {
+                if (done) {
+                  return controller.close();
+                }
 
-              loaded += value?.byteLength || 0;
+                loaded += value?.byteLength || 0;
 
-              if (value) {
-                controller.enqueue(value);
-              }
+                if (value) {
+                  controller.enqueue(value);
+                }
 
-              setPercentageCallback({ loaded, total });
+                setPercentageCallback({ loaded, total });
 
-              return read();
-            })
-            .catch((error: Error) => {
-              setErrorCallback(error);
-              reader.cancel('Cancelled');
+                return read();
+              })
+              .catch((error: Error) => {
+                setErrorCallback(error);
+                reader.cancel('Cancelled');
 
-              return controller.error(error);
-            });
-        }
+                return controller.error(error);
+              });
+          }
 
-        return read();
-      },
-    });
+          return read();
+        },
+      });
 
-    return new Response(stream);
-  };
+      return new Response(stream);
+    };
 
 export const jsDownload = (
   data: Blob,
@@ -79,8 +79,8 @@ export const jsDownload = (
     type: mime || 'application/octet-stream',
   });
 
-  if (typeof window.navigator.msSaveBlob !== 'undefined') {
-    return window.navigator.msSaveBlob(blob, filename);
+  if (typeof (window as unknown as IWindowDownloaderEmbedded).navigator.msSaveBlob !== 'undefined') {
+    return (window as unknown as IWindowDownloaderEmbedded).navigator.msSaveBlob(blob, filename);
   }
 
   const blobURL =
@@ -128,6 +128,7 @@ export default function useDownloader(): IUseDownloader {
     const errorMap = {
       "Failed to execute 'enqueue' on 'ReadableStreamDefaultController': Cannot enqueue a chunk into an errored readable stream":
         'Download canceled',
+      'The user aborted a request.': 'Download timed out',
     };
     setError(() => {
       const resolvedError = errorMap[err.message]
@@ -138,7 +139,7 @@ export default function useDownloader(): IUseDownloader {
     });
   }, []);
 
-  const setControllerCallback = useCallback((controller) => {
+  const setControllerCallback = useCallback((controller: ReadableStreamController<Uint8Array> | null) => {
     controllerRef.current = controller;
   }, []);
 
@@ -157,15 +158,15 @@ export default function useDownloader(): IUseDownloader {
     setIsInProgress(() => false);
   }, [setControllerCallback]);
 
-  const handleDownload = useCallback(
-    async (downloadUrl, filename) => {
+  const handleDownload: DownloadFunction = useCallback(
+    async (downloadUrl, filename, timeout = 0) => {
       if (isInProgress) return null;
 
       clearAllStateCallback();
       setError(() => null);
       setIsInProgress(() => true);
 
-      const interval = setInterval(
+      const intervalId = setInterval(
         () => setElapsed((prevValue) => prevValue + 1),
         debugMode ? 1 : 1000
       );
@@ -176,8 +177,14 @@ export default function useDownloader(): IUseDownloader {
         setErrorCallback,
       });
 
+      const fetchController = new AbortController();
+      const timeoutId = setTimeout(() => {
+        if (timeout > 0) fetchController.abort();
+      }, timeout);
+
       return fetch(downloadUrl, {
         method: 'GET',
+        signal: fetchController.signal
       })
         .then(resolverWithProgress)
         .then((data) => {
@@ -187,7 +194,7 @@ export default function useDownloader(): IUseDownloader {
         .then(() => {
           clearAllStateCallback();
 
-          return clearInterval(interval);
+          return clearInterval(intervalId);
         })
         .catch((err) => {
           clearAllStateCallback();
@@ -203,7 +210,8 @@ export default function useDownloader(): IUseDownloader {
             return prevValue;
           });
 
-          return clearInterval(interval);
+          clearTimeout(timeoutId);
+          return clearInterval(intervalId);
         });
     },
     [

src/types.ts

@@ -4,13 +4,36 @@ export type TError = {
   errorMessage: string;
 } | null
 
+export type DownloadFunction = (
+  /** Download url
+   * @example https://upload.wikimedia.org/wikipedia/commons/4/4d/%D0%93%D0%BE%D0%B2%D0%B5%D1%80%D0%BB%D0%B0_%D1%96_%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D1%81_%D0%B2_%D0%BF%D1%80%D0%BE%D0%BC%D1%96%D0%BD%D1%8F%D1%85_%D0%B2%D1%80%D0%B0%D0%BD%D1%96%D1%88%D0%BD%D1%8C%D0%BE%D0%B3%D0%BE_%D1%81%D0%BE%D0%BD%D1%86%D1%8F.jpg
+  */
+  downloadUrl: string,
+  /** File name
+   * @example carpathia.jpeg
+  */
+  filename: string,
+  /** Optional timeout to download items */
+  timeout?: number) => Promise<void | null>;
+
 export interface IUseDownloader {
+  /** Size in bytes */
+  size: number;
+  /**	Elapsed time in seconds */
   elapsed: number;
+  /** Percentage in string */
   percentage: number;
-  size: number;
-  download: (downloadUrl: string, filename: string) => Promise<void | null>;
+  /**
+   * Download function handler
+   * @example await download('https://example.com/file.zip', 'file.zip')
+   * @example await download('https://example.com/file.zip', 'file.zip', 500) timeouts after 500ms
+   * */
+  download: DownloadFunction
+  /** Cancel function handler */
   cancel: () => void;
+  /** Error object from the request */
   error: TError;
+  /** Boolean denoting download status */
   isInProgress: boolean;
 }
 
@@ -19,4 +42,12 @@ export interface IResolverProps {
   setControllerCallback: (controller: ReadableStreamController<Uint8Array>) => void
   setPercentageCallback: ({ loaded, total }: { loaded: number; total: number; }) => void;
   setErrorCallback: (err: Error) => void;
-}
+}
+
+interface CustomNavigator extends Navigator {
+  msSaveBlob: (blob?: Blob, filename?: string) => boolean | NodeJS.Timeout;
+}
+
+export interface IWindowDownloaderEmbedded extends Window {
+  navigator: CustomNavigator
+}