diff --git a/src/features/Common/RadioButtons/index.tsx b/src/features/Common/RadioButtons/index.tsx index 628fa33a..9acf71b5 100644 --- a/src/features/Common/RadioButtons/index.tsx +++ b/src/features/Common/RadioButtons/index.tsx @@ -13,6 +13,7 @@ export const RadioButtonGroup = styled.div.attrs({ type RadioButtonProps = { buttonWidth?: number, + disabled?: boolean, selected?: boolean, upperCase?: boolean, } @@ -64,6 +65,14 @@ export const RadioButton = styled.button.attrs(({ selected }: RadioButtonProps) upperCase ? 'text-transform: uppercase;' : '' )} + ${({ disabled }) => ( + disabled + && css` + pointer-events: none; + opacity: 0.7; + ` + )} + :not(:last-child) { border-right: 1px solid #222222; } diff --git a/src/features/HeaderFilters/components/MatchStatusFilter/index.tsx b/src/features/HeaderFilters/components/MatchStatusFilter/index.tsx index 4379d1c2..4d174342 100644 --- a/src/features/HeaderFilters/components/MatchStatusFilter/index.tsx +++ b/src/features/HeaderFilters/components/MatchStatusFilter/index.tsx @@ -7,7 +7,12 @@ import { import { MatchStatuses, useHeaderFiltersStore } from '../../store' export const MatchStatusFilter = () => { - const { selectedMatchStatus, setSelectedMatchStatus } = useHeaderFiltersStore() + const { + isTodaySelected, + selectedMatchStatus, + setSelectedMatchStatus, + } = useHeaderFiltersStore() + return ( { selected={selectedMatchStatus === MatchStatuses.Live} onClick={() => setSelectedMatchStatus(MatchStatuses.Live)} buttonWidth={80} + disabled={!isTodaySelected} > @@ -22,6 +28,7 @@ export const MatchStatusFilter = () => { selected={selectedMatchStatus === MatchStatuses.Finished} onClick={() => setSelectedMatchStatus(MatchStatuses.Finished)} buttonWidth={121} + disabled={!isTodaySelected} > @@ -29,6 +36,7 @@ export const MatchStatusFilter = () => { selected={selectedMatchStatus === MatchStatuses.Soon} onClick={() => setSelectedMatchStatus(MatchStatuses.Soon)} buttonWidth={87} + disabled={!isTodaySelected} > diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index e183474f..cd8aad89 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -5,6 +5,7 @@ import { useCallback, } from 'react' import { useLocation } from 'react-router-dom' +import { isToday } from 'date-fns' import { SportTypes } from 'config' @@ -31,6 +32,8 @@ export const useFilters = () => { validator: isValidDate, }) + const isTodaySelected = isToday(selectedDate) + const [ selectedMatchStatus, setMatchStatus, @@ -82,9 +85,18 @@ export const useFilters = () => { if (!search) { resetFilters() } - }, [search, resetFilters]) + if (!isTodaySelected) { + setMatchStatus(null) + } + }, [ + isTodaySelected, + resetFilters, + search, + setMatchStatus, + ]) const store = useMemo(() => ({ + isTodaySelected, selectedDate, selectedDateFormatted: getMoscowDate(selectedDate), selectedMatchStatus, @@ -95,6 +107,7 @@ export const useFilters = () => { setSelectedSportTypeId, setSelectedTournamentId, }), [ + isTodaySelected, selectedDate, selectedMatchStatus, selectedSportTypeId,