diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 8530987c..de574a11 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -13,6 +13,7 @@ import { useQueryParamStore } from 'hooks' import { filterKeys } from '../config' import { isValidDate } from '../helpers/isValidDate' +import { Match } from '../../../Matches' export const useFilters = () => { const { search } = useLocation() @@ -31,6 +32,14 @@ export const useFilters = () => { const [sportIds, setSportIds] = useState() const isTodaySelected = isToday(selectedDate) + const getSportIds = useCallback((matches:Array) => { + const sportTypeIds = new Set([]) + matches.forEach((match) => { + sportTypeIds.add(match.sportType) + }) + setSportIds(Array.from(sportTypeIds)) + }, []) + const resetFilters = useCallback(() => { setIsShowTournament(true) setSelectedFilters([]) @@ -61,6 +70,7 @@ export const useFilters = () => { ]) const store = useMemo(() => ({ + getSportIds, isShowTournament, isTodaySelected, resetFilters, @@ -79,6 +89,7 @@ export const useFilters = () => { sportIds, updateDate, }), [ + getSportIds, isShowTournament, isTodaySelected, resetFilters, diff --git a/src/features/MatchesGrid/index.tsx b/src/features/MatchesGrid/index.tsx index 415e4384..ed780a88 100644 --- a/src/features/MatchesGrid/index.tsx +++ b/src/features/MatchesGrid/index.tsx @@ -1,4 +1,4 @@ -import { memo } from 'react' +import { memo, useEffect } from 'react' import { useRouteMatch } from 'react-router-dom' import { PAGES } from 'config/pages' @@ -18,7 +18,9 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => { const isHomePage = useRouteMatch(PAGES.home)?.isExact const { + getSportIds, isShowTournament, + selectedDate, selectedFilters, selectedLeague, } = useHeaderFiltersStore() @@ -39,6 +41,11 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => { return matches } + useEffect(() => { + getSportIds(matches) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedDate, matches]) + return ( {isHomePage && isShowTournament ? ( diff --git a/src/features/TournamentList/hooks.tsx b/src/features/TournamentList/hooks.tsx index 93a69933..b8e68adb 100644 --- a/src/features/TournamentList/hooks.tsx +++ b/src/features/TournamentList/hooks.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo } from 'react' +import { useMemo } from 'react' import orderBy from 'lodash/orderBy' @@ -19,10 +19,8 @@ interface TournamentsSortProps { export const useTournaments = (matches: Array) => { const { - selectedDate, selectedLeague, selectedSport, - setSportIds, } = useHeaderFiltersStore() const { isInFavorites } = useUserFavoritesStore() @@ -43,7 +41,6 @@ export const useTournaments = (matches: Array) => { // eslint-disable-next-line react-hooks/exhaustive-deps const tournamentSort: Array = [] - const sportIds = new Set([]) const tournaments = matches.reduce((acc: TournamentListProps, match: Match) => { if (matches.length === 0) return {} @@ -76,7 +73,6 @@ export const useTournaments = (matches: Array) => { isLive: match.live, isSuperTournament: Boolean(match.tournament.is_super_tournament), }) - sportIds.add(match.sportType) } else if (compareSport(match, selectedSport) && compareLeague(match.tournament.id)) { acc[match.tournament.id] = { ...acc[match.tournament.id], @@ -98,11 +94,6 @@ export const useTournaments = (matches: Array) => { ['desc', 'desc', 'desc'], ), [tournamentSort]) - useEffect(() => { - sportIds && setSportIds(sportIds) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedDate, matches]) - return { tournamentSort: tournamentsSorted, tournaments,