fix(#168): fix download video for completed status

src/features/MatchPage/components/MatchDownloadPopup/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useQuery } from 'react-query'
 
 import { T9n } from 'features/T9n'
@@ -61,10 +61,7 @@ export const MatchDownloadPopup = ({
   }
   const { refetch } = useQuery(
     querieKeys.downloadPlaylist,
-    () => {
-      setPlaylistConfig(config)
-      downloadPlaylist(config)
-    },
+    () => downloadPlaylist(config),
     {
       enabled: false, // disable this query from automatically running
       refetchOnWindowFocus: false,
@@ -82,6 +79,13 @@ export const MatchDownloadPopup = ({
     openDownloadNotification()
   }
 
+  useEffect(() => {
+    setPlaylistConfig(config)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    downloadConfig,
+  ])
+
   const handleChange = (id: string) => {
     setDownloadConfig((prev) => Object.keys(prev)
       .reduce((result: typeof initialRadioBtns, key: keyof typeof initialRadioBtns) => ({

src/features/MatchSidePlaylists/components/MatchDownloadButton/index.tsx

@@ -77,12 +77,11 @@ export const MatchDownloadButton = ({
   const { start, stop } = useInterval({
     callback: refetch,
     intervalDuration: INTERVAL_CHECK_DOWNLOAD_STATUS,
-    startImmediate: false,
+    startImmediate: true,
   })
 
   useEffect(() => {
     if (!data) return undefined
-
     if (data?.status === 'COMPLETED' && data.urls) {
       downloadFile(data.urls)
       closeDownloadNotification()
@@ -93,7 +92,7 @@ export const MatchDownloadButton = ({
 
     return () => stop()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data?.status, refetch])
+  }, [data?.status, refetch, playlistConfig])
 
   const isNeedDownloadButton = user && (isAvailableTournaments() || isAvailableTeams())