fix(#168): fix refetch status download

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

@@ -31,6 +31,7 @@ type Props = {
   closePopup: () => void,
   isModalOpen: boolean,
   openDownloadNotification: () => void,
+  setPlaylistConfig: (config: DownloadPlaylistProps) => void,
 }
 
 const fileType: Record<'download_single_file'| 'download_files_for_periods', string> = {
@@ -47,6 +48,7 @@ export const MatchDownloadPopup = ({
   closePopup,
   isModalOpen,
   openDownloadNotification,
+  setPlaylistConfig,
 }: Props) => {
   const [downloadConfig, setDownloadConfig] = useState<typeof initialRadioBtns>(initialRadioBtns)
 
@@ -59,10 +61,14 @@ export const MatchDownloadPopup = ({
   }
   const { refetch } = useQuery(
     querieKeys.downloadPlaylist,
-    () => downloadPlaylist(config),
+    () => {
+      setPlaylistConfig(config)
+      downloadPlaylist(config)
+    },
     {
       enabled: false, // disable this query from automatically running
       refetchOnWindowFocus: false,
+      staleTime: 0,
     },
   )
 

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

@@ -11,25 +11,30 @@ import { MatchDownloadPopup } from 'features/MatchPage/components/MatchDownloadP
 
 import { usePageParams } from 'hooks/usePageParams'
 
-import { useQueryClient } from 'react-query'
-import { DownloadResponse } from 'requests/downloadPlaylist'
+import { useQuery } from 'react-query'
+import { downloadPlaylist, type DownloadPlaylistProps } from 'requests/downloadPlaylist'
 import { querieKeys } from 'config'
 import { useInterval } from 'hooks'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { downloadFile } from 'helpers'
 import { DownloadButton, Title } from '../../styled'
 import { Item } from '../MatchPlaylists'
 
 type TMatchDownloadButton = {
+  close: () => void,
   open: () => void,
 }
 
 const INTERVAL_CHECK_DOWNLOAD_STATUS = 60 * 1000
 
-export const MatchDownloadButton = ({ open: openDownloadNotification }:TMatchDownloadButton) => {
+export const MatchDownloadButton = ({
+  close: closeDownloadNotification,
+  open: openDownloadNotification,
+}:TMatchDownloadButton) => {
   const { user, userInfo } = useAuthStore()
   const { profile } = useMatchPageStore()
   const { sportType } = usePageParams()
+  const [playlistConfig, setPlaylistConfig] = useState<DownloadPlaylistProps | null>(null)
 
   const {
     close,
@@ -59,25 +64,28 @@ export const MatchDownloadButton = ({ open: openDownloadNotification }:TMatchDow
     return null
   }
 
-  const client = useQueryClient()
-
-  const data = client.getQueryData<DownloadResponse>(querieKeys.downloadPlaylist)
-
-  const handleRefetch = () => {
-    client.refetchQueries(querieKeys.downloadPlaylist)
-  }
+  const { data, refetch } = useQuery(
+    querieKeys.downloadPlaylist,
+    () => playlistConfig && downloadPlaylist(playlistConfig),
+    {
+      enabled: false,
+      refetchOnWindowFocus: false,
+      staleTime: 0,
+    },
+  )
 
   const { start, stop } = useInterval({
-    callback: handleRefetch,
+    callback: refetch,
     intervalDuration: INTERVAL_CHECK_DOWNLOAD_STATUS,
     startImmediate: false,
   })
 
   useEffect(() => {
-    start()
+    if (!data) return undefined
 
     if (data?.status === 'COMPLETED' && data.urls) {
       downloadFile(data.urls)
+      closeDownloadNotification()
       stop()
     } else if (data?.status === 'ERROR') {
       stop()
@@ -85,7 +93,7 @@ export const MatchDownloadButton = ({ open: openDownloadNotification }:TMatchDow
 
     return () => stop()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data?.status])
+  }, [data?.status, refetch])
 
   const isNeedDownloadButton = user && (isAvailableTournaments() || isAvailableTeams())
 
@@ -97,8 +105,15 @@ export const MatchDownloadButton = ({ open: openDownloadNotification }:TMatchDow
         isModalOpen={isOpen}
         closePopup={close}
         openDownloadNotification={openDownloadNotification}
+        setPlaylistConfig={setPlaylistConfig}
       />
-      <DownloadButton onClick={open}>
+      <DownloadButton onClick={
+        () => {
+          open()
+          start()
+        }
+      }
+      >
         <Title>
           <T9n t='download_full_match' />
         </Title>

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

@@ -126,7 +126,7 @@ export const MatchPlaylists = forwardRef(
               </PlayButton>
             </Item>
           ))}
-        <MatchDownloadButton open={open} />
+        <MatchDownloadButton open={open} close={close} />
       </List>
     )
   },