From e8dac0541dc286479508b7cd2e374d5f1c207f29 Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Tue, 7 Feb 2023 22:47:37 +0700 Subject: [PATCH] fix: #272 reset selectedsport if in current day we don't have this sportId --- .../HeaderFilters/store/hooks/index.tsx | 30 +++++++++++++++---- src/features/MatchesGrid/index.tsx | 10 ++++--- src/features/NoNetworkPopup/index.tsx | 12 ++++---- src/features/NoNetworkPopup/styled.tsx | 24 +++++++-------- .../components/SelectSportPopup/index.tsx | 4 +-- src/features/TournamentList/hooks.tsx | 12 ++------ 6 files changed, 52 insertions(+), 40 deletions(-) diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index de574a11..524cf521 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/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() const isTodaySelected = isToday(selectedDate) - const getSportIds = useCallback((matches:Array) => { + const compareSport = useCallback((match: Match, sportNames: Array) => { + 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) => { const sportTypeIds = new Set([]) 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 diff --git a/src/features/MatchesGrid/index.tsx b/src/features/MatchesGrid/index.tsx index ed780a88..fbefccf6 100644 --- a/src/features/MatchesGrid/index.tsx +++ b/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]) diff --git a/src/features/NoNetworkPopup/index.tsx b/src/features/NoNetworkPopup/index.tsx index b207aca0..cc5abc13 100644 --- a/src/features/NoNetworkPopup/index.tsx +++ b/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 ( <SubTitle t='check_connection' /> - <ScButton onClick={() => setIsClose(true)}>Ok</ScButton> + <ScButton onClick={toggle}>Ok</ScButton> </ScBody> </ScModalContainer> ) diff --git a/src/features/NoNetworkPopup/styled.tsx b/src/features/NoNetworkPopup/styled.tsx index 7cc896c4..03048032 100644 --- a/src/features/NoNetworkPopup/styled.tsx +++ b/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; ` : ''}; ` diff --git a/src/features/SportsFilter/components/SelectSportPopup/index.tsx b/src/features/SportsFilter/components/SelectSportPopup/index.tsx index ca598393..9545543b 100644 --- a/src/features/SportsFilter/components/SelectSportPopup/index.tsx +++ b/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 ( diff --git a/src/features/TournamentList/hooks.tsx b/src/features/TournamentList/hooks.tsx index b8e68adb..7d13b3a7 100644 --- a/src/features/TournamentList/hooks.tsx +++ b/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, }