fix(589): added 2 sec timeout to /stream request (#234)

src/features/MatchPage/hooks/useVideoData.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useState } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 
-import isNull from 'lodash/isNull'
-import isEmpty from 'lodash/isEmpty'
 import filter from 'lodash/filter'
 
 import type { LiveVideos, Videos } from 'requests'
@@ -17,22 +19,21 @@ export const useVideoData = () => {
   const { sportType } = useSportNameParam()
   const matchId = usePageId()
 
+  const fetchMatchVideos = useCallback(async () => {
+    const videosResponse = await getVideos(sportType, matchId)
+    const filteredVideosResponseByAbc = filter(videosResponse, (vid) => vid.abc !== 1)
+    setVideos(filteredVideosResponseByAbc)
+  }, [sportType, matchId])
+
   useEffect(() => {
-    const requestVideos = async () => {
-      const live = await getLiveVideos(sportType, matchId)
-      if (isNull(live) || isEmpty(live)) {
-        const videosResponse = await getVideos(sportType, matchId)
-        const filteredVideosResponseByAbc = filter(videosResponse, (vid) => vid.abc !== 1)
-        setVideos(filteredVideosResponseByAbc)
-      } else {
-        setLiveVideos(live)
-      }
-    }
-    requestVideos()
+    getLiveVideos(sportType, matchId)
+      .then(setLiveVideos)
+      .catch(fetchMatchVideos)
   },
   [
     sportType,
     matchId,
+    fetchMatchVideos,
   ])
 
   return {

src/helpers/callApi/index.tsx

@@ -21,16 +21,33 @@ export const callApiBase = ({
   return fetch(url, requestConfig)
 }
 
-export const callApi = ({
-  abortSignal,
-  config,
-  url,
-}: CallApiArgs) => (
-  callApiBase({
-    abortSignal,
-    config,
-    url,
-  }).then(checkStatus)
+const callApiWithTimeout = (args: CallApiArgs) => {
+  const { abortSignal, timeout } = args
+  const abortController = new AbortController()
+  const timeoutId = setTimeout(
+    () => abortController.abort(),
+    timeout,
+  )
+
+  if (abortSignal) {
+    abortSignal.addEventListener('abort', () => abortController.abort())
+  }
+
+  return callApiBase({
+    ...args,
+    abortSignal: abortSignal || abortController.signal,
+  })
+    .then(checkStatus)
     .then(parseJSON)
     .catch(logoutIfUnauthorized)
-)
+    .finally(() => clearTimeout(timeoutId))
+}
+
+export const callApi = (args: CallApiArgs) => {
+  if (args.timeout) return callApiWithTimeout(args)
+
+  return callApiBase(args)
+    .then(checkStatus)
+    .then(parseJSON)
+    .catch(logoutIfUnauthorized)
+}

src/helpers/callApi/types.tsx

@@ -7,5 +7,6 @@ export type RequestConfig = {
 export type CallApiArgs = {
   abortSignal?: AbortSignal,
   config: RequestConfig,
+  timeout?: number,
   url: string,
 }

src/requests/getLiveVideos.tsx

@@ -1,3 +1,5 @@
+import isEmpty from 'lodash/isEmpty'
+
 import { API_ROOT, SportTypes } from 'config'
 import { callApi } from 'helpers'
 
@@ -16,6 +18,10 @@ export const getLiveVideos = (
 
   return callApi({
     config,
+    timeout: 2000,
     url: `${API_ROOT}/video/stream`,
+  }).then((videos: LiveVideos) => {
+    if (isEmpty(videos)) return Promise.reject()
+    return videos
   })
 }