Feat request timeout (#25)

* feat: add request timeout * feat: add prop `requestTimeout` * add docs for `requestTimeout` prop * Update README.md Co-authored-by: Thomas P. <[email protected]> Co-authored-by: Thomas P. <[email protected]>
flyerhq · Jan 27, 2022 · 5ecd937 · 5ecd937
1 parent 16d6892
commit 5ecd937
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -54,6 +54,7 @@ return (
 | renderTitle                   | (string) => ReactNode                                                                      | Custom title render prop                                     |
 | textContainerStyle            | [ViewStyle](https://reactnative.dev/docs/view-style-props)                                 | Text, title, description and minimized image container style |
 | touchableWithoutFeedbackProps | TouchableWithoutFeedbackProps                                                              | Top level touchable props                                    |
+| requestTimeout | number  | Timeout after which request to get preview data should abort   |
 
 ## License
 

diff --git a/src/LinkPreview.tsx b/src/LinkPreview.tsx
@@ -37,7 +37,8 @@ export interface LinkPreviewProps {
   renderTitle?: (title: string) => React.ReactNode
   text: string
   textContainerStyle?: StyleProp<ViewStyle>
-  touchableWithoutFeedbackProps?: TouchableWithoutFeedbackProps
+  touchableWithoutFeedbackProps?: TouchableWithoutFeedbackProps,
+  requestTimeout?:number
 }
 
 export const LinkPreview = React.memo(
@@ -59,6 +60,7 @@ export const LinkPreview = React.memo(
     text,
     textContainerStyle,
     touchableWithoutFeedbackProps,
+    requestTimeout = 5000
   }: LinkPreviewProps) => {
     const [containerWidth, setContainerWidth] = React.useState(0)
     const [data, setData] = React.useState(previewData)
@@ -75,7 +77,7 @@ export const LinkPreview = React.memo(
 
       const fetchData = async () => {
         setData(undefined)
-        const newData = await getPreviewData(text)
+        const newData = await getPreviewData(text, requestTimeout)
         // Set data only if component is still mounted
         /* istanbul ignore next */
         if (!isCancelled) {

diff --git a/src/utils.ts b/src/utils.ts
@@ -54,7 +54,7 @@ export const getImageSize = (url: string) => {
 
 // Functions below use functions from the same file and mocks are not working
 /* istanbul ignore next */
-export const getPreviewData = async (text: string) => {
+export const getPreviewData = async (text: string, requestTimeout=5000) => {
   const previewData: PreviewData = {
     description: undefined,
     image: undefined,
@@ -77,13 +77,24 @@ export const getPreviewData = async (text: string) => {
       url = 'https://' + url
     }
 
-    const response = await fetch(url, {
+    let abortControllerTimeout: NodeJS.Timeout;
+    const abortController = new AbortController();
+
+    const request = fetch(url, {
       headers: {
         'User-Agent':
           'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36',
       },
+      signal:abortController.signal
     })
 
+    abortControllerTimeout = setTimeout(() => {
+      abortController.abort();
+    }, requestTimeout);
+    const response = await request;
+
+    clearTimeout(abortControllerTimeout);
+
     previewData.link = url
 
     const contentType = response.headers.get('content-type') ?? ''