fix: #272

reset selectedsport if in current day we don't have this sportId

src/features/HeaderFilters/store/hooks/index.tsx

@@ -5,15 +5,20 @@ import {
   useState,
 } from 'react'
 import { useLocation } from 'react-router-dom'
+
 import { isToday } from 'date-fns'
 
 import type { TournamentType } from 'requests/getMatches/types'
 
 import { useQueryParamStore } from 'hooks'
 
+import { getSportLexic } from 'helpers'
+
+import { SPORT_NAMES, SportTypes } from 'config'
+
 import { filterKeys } from '../config'
 import { isValidDate } from '../helpers/isValidDate'
-import { Match } from '../../../Matches'
+import type { Match } from '../../../Matches'
 
 export const useFilters = () => {
   const { search } = useLocation()
@@ -32,13 +37,26 @@ export const useFilters = () => {
   const [sportIds, setSportIds] = useState<any>()
   const isTodaySelected = isToday(selectedDate)
 
-  const getSportIds = useCallback((matches:Array<Match>) => {
+  const compareSport = useCallback((match: Match, sportNames: Array<string>) => {
+    if (sportNames[0] === 'all_sports') {
+      return true
+    }
+    const sport = getSportLexic(match.sportType)
+    return (sportNames.indexOf(sport) >= 0 || sportNames.indexOf(`${sport}_popup`) >= 0)
+  }, [])
+
+  const updateSportIds = useCallback((matches:Array<Match>) => {
     const sportTypeIds = new Set<number>([])
     matches.forEach((match) => {
       sportTypeIds.add(match.sportType)
     })
     setSportIds(Array.from(sportTypeIds))
-  }, [])
+
+    if (!Array.from(sportTypeIds)?.some((id: SportTypes) => SPORT_NAMES[id] === selectedSport[0])
+    ) {
+      setSelectedSport(['all_sports'])
+    }
+  }, [selectedSport])
 
   const resetFilters = useCallback(() => {
     setIsShowTournament(true)
@@ -70,7 +88,7 @@ export const useFilters = () => {
   ])
 
   const store = useMemo(() => ({
-    getSportIds,
+    compareSport,
     isShowTournament,
     isTodaySelected,
     resetFilters,
@@ -88,8 +106,9 @@ export const useFilters = () => {
     setSportIds,
     sportIds,
     updateDate,
+    updateSportIds,
   }), [
-    getSportIds,
+    compareSport,
     isShowTournament,
     isTodaySelected,
     resetFilters,
@@ -107,6 +126,7 @@ export const useFilters = () => {
     setSportIds,
     sportIds,
     updateDate,
+    updateSportIds,
   ])
 
   return store

src/features/MatchesGrid/index.tsx

@@ -18,11 +18,13 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => {
   const isHomePage = useRouteMatch(PAGES.home)?.isExact
 
   const {
-    getSportIds,
+    compareSport,
     isShowTournament,
     selectedDate,
     selectedFilters,
     selectedLeague,
+    selectedSport,
+    updateSportIds,
   } = useHeaderFiltersStore()
 
   const filteredMatches = () => {
@@ -38,11 +40,11 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => {
       return matches.filter((match) => ((selectedLeague.indexOf(match.tournament.id) >= 0
       || selectedLeague[0] === 'all_competitions')))
     }
-    return matches
-  }
 
+    return matches.filter((match) => compareSport(match, selectedSport))
+  }
   useEffect(() => {
-    getSportIds(matches)
+    updateSportIds(matches)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDate, matches])
 

src/features/NoNetworkPopup/index.tsx

@@ -1,6 +1,4 @@
-import { useState } from 'react'
-
-import { useNoNetworkPopupStore } from 'features/NoNetworkPopup'
+import { useToggle } from 'hooks'
 
 import {
   ArrowLoader,
@@ -11,24 +9,26 @@ import {
   ScButton,
 } from './styled'
 
+import { useNoNetworkPopupStore } from './store'
+
 export * from './store'
 
 export const NoNetworkPopup = () => {
-  const [isClose, setIsClose] = useState(false)
   const { isOnline } = useNoNetworkPopupStore()
+  const { isOpen, toggle } = useToggle()
 
   if (isOnline) return null
 
   return (
     <ScModalContainer
-      isOpen={!isOnline && !isClose}
+      isOpen={!isOnline && !isOpen}
       withCloseButton={false}
     >
       <ScBody>
         <ArrowLoader />
         <Title t='lost_connection' />
         <SubTitle t='check_connection' />
-        <ScButton onClick={() => setIsClose(true)}>Ok</ScButton>
+        <ScButton onClick={toggle}>Ok</ScButton>
       </ScBody>
     </ScModalContainer>
   )

src/features/NoNetworkPopup/styled.tsx

@@ -20,10 +20,10 @@ export const ScModalContainer = styled(BaseModal)`
 
     ${isMobileDevice
     ? css`
-          padding: 20px 0;
-          width: 332px;
-          height: 210px;
-       `
+     padding: 20px 0;
+     width: 332px;
+     height: 210px;
+         `
     : ''};
   }
 `
@@ -82,14 +82,14 @@ export const ScButton = styled(ButtonSolid)`
 
   ${isMobileDevice
     ? css`
-          margin-top: 9px;
-          border-radius: 2px;
-          width: 156px;
-          height: 44px;
-          font-weight: 600;
-          font-size: 15px;
-          line-height: 22px;
-          letter-spacing: -0.408px;
+      margin-top: 9px;
+      border-radius: 2px;
+      width: 156px;
+      height: 44px;
+      font-weight: 600;
+      font-size: 15px;
+      line-height: 22px;
+      letter-spacing: -0.408px;
        `
     : ''};
 `

src/features/SportsFilter/components/SelectSportPopup/index.tsx

@@ -30,9 +30,7 @@ export const SelectSportPopup = ({
   sportIds,
   sports,
 }: Props) => {
-  const sportNames = sportIds
-  && Array.from(sportIds)
-    .map((id) => String(getSportLexic(Number(id))))
+  const sportNames = sportIds?.map((id) => String(getSportLexic(Number(id))))
   sportNames?.unshift('all_sports')
 
   return (

src/features/TournamentList/hooks.tsx

@@ -2,8 +2,6 @@ import { useMemo } from 'react'
 
 import orderBy from 'lodash/orderBy'
 
-import { getSportLexic } from 'helpers/getSportLexic'
-
 import { ProfileTypes } from 'config'
 import { TournamentListProps } from 'features/TournamentList'
 import type { Match } from 'features/Matches'
@@ -19,19 +17,12 @@ interface TournamentsSortProps {
 
 export const useTournaments = (matches: Array<Match>) => {
   const {
+    compareSport,
     selectedLeague,
     selectedSport,
   } = useHeaderFiltersStore()
   const { isInFavorites } = useUserFavoritesStore()
 
-  const compareSport = (match: Match, sportNames: Array<string>) => {
-    if (sportNames[0] === 'all_sports') {
-      return true
-    }
-    const sport = getSportLexic(match.sportType)
-    return (sportNames.indexOf(sport) >= 0 || sportNames.indexOf(`${sport}_popup`) >= 0)
-  }
-
   const compareLeague = (id: number) => {
     if (selectedLeague[0] === 'all_competitions') {
       return true
@@ -95,6 +86,7 @@ export const useTournaments = (matches: Array<Match>) => {
   ), [tournamentSort])
 
   return {
+    compareSport,
     tournamentSort: tournamentsSorted,
     tournaments,
   }