feat(ott-879): disabled match filters for non current date selected (#316)

* feat(ott-879): disabled match filters for non current date selected

* feat(ott-879): refactor for PR

* feat(ott-879): short fix PR

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;
   }

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 (
     <RadioButtonGroup>
       <RadioButton
@@ -15,6 +20,7 @@ export const MatchStatusFilter = () => {
         selected={selectedMatchStatus === MatchStatuses.Live}
         onClick={() => setSelectedMatchStatus(MatchStatuses.Live)}
         buttonWidth={80}
+        disabled={!isTodaySelected}
       >
         <T9n t='match_status_live' />
       </RadioButton>
@@ -22,6 +28,7 @@ export const MatchStatusFilter = () => {
         selected={selectedMatchStatus === MatchStatuses.Finished}
         onClick={() => setSelectedMatchStatus(MatchStatuses.Finished)}
         buttonWidth={121}
+        disabled={!isTodaySelected}
       >
         <T9n t='match_status_finished' />
       </RadioButton>
@@ -29,6 +36,7 @@ export const MatchStatusFilter = () => {
         selected={selectedMatchStatus === MatchStatuses.Soon}
         onClick={() => setSelectedMatchStatus(MatchStatuses.Soon)}
         buttonWidth={87}
+        disabled={!isTodaySelected}
       >
         <T9n t='match_status_soon' />
       </RadioButton>

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,