You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.2 KiB
110 lines
3.2 KiB
import { memo, useEffect } from 'react'
|
|
import { useRouteMatch } from 'react-router-dom'
|
|
import { useQuery } from 'react-query'
|
|
|
|
import { isMobileDevice, PAGES } from 'config'
|
|
|
|
import type { AdType, LiveScore } from 'requests'
|
|
import { getLiveScores } from 'requests'
|
|
|
|
import { MatchCard } from 'features/MatchCard'
|
|
import { TournamentList } from 'features/TournamentList'
|
|
import type { Match } from 'features/Matches'
|
|
import { useHeaderFiltersStore } from 'features/HeaderFilters'
|
|
|
|
import { readToken } from 'helpers'
|
|
|
|
import { useRecoilValue } from 'recoil'
|
|
import { Wrapper } from './styled'
|
|
import { useMatchSwitchesStore } from '../MatchSwitches'
|
|
import { querieKeys } from '../../config'
|
|
import { AdComponent } from '../../components/Ads/components/AdComponent'
|
|
import { adsStore } from '../../pages/HighlightsPage/storeHighlightsAtoms'
|
|
|
|
type MatchesGridProps = {
|
|
matches: Array<Match>,
|
|
}
|
|
|
|
export const MatchesGrid = memo(({ matches }: MatchesGridProps) => {
|
|
const isHomePage = useRouteMatch(PAGES.home)?.isExact
|
|
const { isScoreHidden } = useMatchSwitchesStore()
|
|
|
|
const ads = useRecoilValue(adsStore)
|
|
|
|
const currentAds = ads?.match_cell?.length ? ads?.match_cell : ads?.block
|
|
|
|
const {
|
|
compareSport,
|
|
isShowTournament,
|
|
selectedDate,
|
|
selectedFilters,
|
|
selectedLeague,
|
|
selectedSport,
|
|
updateSportIds,
|
|
} = useHeaderFiltersStore()
|
|
|
|
const filteredMatches = () => {
|
|
if (isHomePage && selectedFilters.length && isShowTournament) {
|
|
return matches.filter(
|
|
(match) => (match.live && selectedFilters.indexOf('live') >= 0)
|
|
|| (selectedFilters.indexOf('upcoming') >= 0
|
|
&& match.date > new Date())
|
|
|| (selectedFilters.indexOf('completed') >= 0 && match.is_finished),
|
|
)
|
|
}
|
|
if (isHomePage && selectedLeague.length && !isShowTournament) {
|
|
return matches.filter((match) => ((selectedLeague.indexOf(`${match.sportType}_${match.tournament.id}`) >= 0
|
|
|| selectedLeague[0] === 'all_competitions')))
|
|
}
|
|
|
|
if (isHomePage && selectedSport) {
|
|
return matches.filter((match) => compareSport(match, selectedSport))
|
|
}
|
|
|
|
return matches
|
|
}
|
|
|
|
const { data: liveMatchScores } = useQuery({
|
|
queryFn: async () => {
|
|
if (!isScoreHidden && matches.filter(({ live }) => live)?.length > 0) {
|
|
const scores = await getLiveScores()
|
|
return scores
|
|
}
|
|
return []
|
|
},
|
|
queryKey: querieKeys.liveMatchScores,
|
|
refetchInterval: 5000,
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (!isHomePage) return
|
|
|
|
updateSportIds(matches)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [selectedDate, matches])
|
|
|
|
return (
|
|
<Wrapper>
|
|
{!isMobileDevice
|
|
&& readToken()
|
|
&& currentAds
|
|
&& (
|
|
currentAds?.map((ad: AdType) => <AdComponent ad={ad} />)
|
|
)}
|
|
{isHomePage && isShowTournament ? (
|
|
<TournamentList matches={filteredMatches()} />
|
|
) : (
|
|
filteredMatches().map((match) => (
|
|
<MatchCard
|
|
key={match.id}
|
|
match={match}
|
|
score={liveMatchScores?.find(
|
|
({ match_id, sport_id }: LiveScore) => match_id === match.id
|
|
&& sport_id === match.sportType,
|
|
)}
|
|
/>
|
|
))
|
|
)}
|
|
</Wrapper>
|
|
)
|
|
})
|
|
|