diff --git a/src/features/MatchPage/components/MatchDownloadPopup/index.tsx b/src/features/MatchPage/components/MatchDownloadPopup/index.tsx index 87afc107..e1330332 100644 --- a/src/features/MatchPage/components/MatchDownloadPopup/index.tsx +++ b/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(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, }, ) diff --git a/src/features/MatchSidePlaylists/components/MatchDownloadButton/index.tsx b/src/features/MatchSidePlaylists/components/MatchDownloadButton/index.tsx index 866bed2f..7f25e529 100644 --- a/src/features/MatchSidePlaylists/components/MatchDownloadButton/index.tsx +++ b/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(null) const { close, @@ -59,25 +64,28 @@ export const MatchDownloadButton = ({ open: openDownloadNotification }:TMatchDow return null } - const client = useQueryClient() - - const data = client.getQueryData(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} /> - + { + open() + start() + } + } + > <T9n t='download_full_match' /> diff --git a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx index d881d2f9..550267ac 100644 --- a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx @@ -126,7 +126,7 @@ export const MatchPlaylists = forwardRef( ))} - + ) },