Merge pull request #4 from dskelton-r7/feature/timeouts

timeouts

Author: chrislaughlin

README.md

@@ -33,4 +33,68 @@ const Example = () => {
         </p>
     )
 }
+
+```
+
+### Aborting a request via custom timeout
+
+```jsx
+import useFetch from '@chrislaughlin/usefetch'
+
+const CustomTimeout = () => {
+    const { isLoading, error, data } = useFetch('https://get.geojs.io/v1/ip/country.json?ip=8.8.8.8', {timeout: 1000});
+
+    if (isLoading) {
+        return <p>Loading.....</p>
+    }
+
+    if (error) {
+        return <p>{JSON.stringify(error)}</p>
+    }
+
+    return (
+        <div>
+            <p>
+                {JSON.stringify(data)}
+            </p>
+        </div>
+    )
+};
+```
+
+### Aborting a request via consuming application
+
+```jsx
+import useFetch from '@chrislaughlin/usefetch'
+
+const AbortExample = () => {
+    const { isLoading, error, data, abortController } = useFetch('https://get.geojs.io/v1/ip/country.json?ip=8.8.8.8');
+
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            if (isLoading) {
+                console.log('aborted after 100ms');
+                abortController.abort();
+            }
+        }, 100);
+
+        return () => clearTimeout(timer);
+    }, [isLoading])
+
+    if (isLoading) {
+        return <p>Loading.....</p>
+    }
+
+    if (error) {
+        return <p>{JSON.stringify(error)}</p>
+    }
+
+    return (
+        <div>
+            <p>
+                {JSON.stringify(data)}
+            </p>
+        </div>
+    )
+};
 ```

demo/src/examples/aborts.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import useFetch from '../../../src'
+
+const Aborts = () => {
+    const { isLoading, error, data, abortController } = useFetch('https://get.geojs.io/v1/ip/country.json?ip=8.8.8.8');
+
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            if (isLoading) {
+                console.log('aborted after 100ms');
+                abortController.abort();
+            }
+        }, 100);
+
+        return () => clearTimeout(timer);
+    }, [isLoading])
+
+    if (isLoading) {
+        return <p>Loading.....</p>
+    }
+
+    if (error) {
+        return <p>{JSON.stringify(error)}</p>
+    }
+
+    return (
+        <div>
+            <p>
+                {JSON.stringify(data)}
+            </p>
+        </div>
+    )
+};
+
+export default Aborts;

demo/src/index.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import {render} from 'react-dom'
-
 import useFetch from '../../src'
+import Example2 from './examples/aborts'; 
 
 const Example = () => {
-    const { isLoading, error, data} = useFetch('https://get.geojs.io/v1/ip/country.json?ip=8.8.8.8')
+    const { isLoading, error, data } = useFetch('https://get.geojs.io/v1/ip/country.json?ip=8.8.8.8');
 
     if (isLoading) {
         return <p>Loading.....</p>
@@ -23,4 +23,11 @@ const Example = () => {
     )
 }
 
-render(<Example/>, document.querySelector('#demo'))
+const Examples = () => (
+    <>
+        <Example />
+        <Example2 />
+    </>
+);
+
+render(<Examples />, document.querySelector('#demo'))

src/index.js

@@ -1,29 +1,56 @@
-import { useState, useEffect } from 'react';
+import {
+  useState,
+  useEffect,
+  useRef,
+} from 'react';
 
 const useFetch = (url, options) => {
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [data, setData] = useState(null);
+  const abortControllerRef = useRef();
 
   useEffect(() => {
-    fetch(url, options || {})
+
+    abortControllerRef.current = new AbortController();
+
+    setIsLoading(true);
+
+    const fetchOptions = options || {};
+    
+    let timeout;
+
+    if (fetchOptions.timeout) {
+      timeout = setTimeout(() => abortControllerRef.current.abort(), fetchOptions.timeout);
+    }
+
+    fetch(url, {...fetchOptions, signal: abortControllerRef.current.signal})
         .then(res => res.json())
         .then(response => {
           setData(response);
           setIsLoading(false);
           setError(null);
         })
-        .catch(error => {
+      .catch(error => {
           setData(null);
           setIsLoading(false);
           setError(error);
         })
-  }, [url, options])
+      
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      
+      abortControllerRef.current.abort();
+    }
+  }, [url])
 
   return {
     isLoading,
     error,
-    data
+    data,
+    abortController: abortControllerRef.current,
   }
 };