fix(#in-272): fix refresh list of the sports in filter

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<any>()
   const isTodaySelected = isToday(selectedDate)
 
+  const getSportIds = useCallback((matches:Array<Match>) => {
+    const sportTypeIds = new Set<number>([])
+    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,

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 (
     <Wrapper>
       {isHomePage && isShowTournament ? (

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<Match>) => {
   const {
-    selectedDate,
     selectedLeague,
     selectedSport,
-    setSportIds,
   } = useHeaderFiltersStore()
   const { isInFavorites } = useUserFavoritesStore()
 
@@ -43,7 +41,6 @@ export const useTournaments = (matches: Array<Match>) => {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const tournamentSort: Array<TournamentsSortProps> = []
-  const sportIds = new Set<number>([])
 
   const tournaments = matches.reduce((acc: TournamentListProps, match: Match) => {
     if (matches.length === 0) return {}
@@ -76,7 +73,6 @@ export const useTournaments = (matches: Array<Match>) => {
         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<Match>) => {
     ['desc', 'desc', 'desc'],
   ), [tournamentSort])
 
-  useEffect(() => {
-    sportIds && setSportIds(sportIds)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedDate, matches])
-
   return {
     tournamentSort: tournamentsSorted,
     tournaments,