fix(#2949): reset filters after click logo

keep-around/3d3716c8eecddecc93aa1855ad3f52b67b2f7b4b
Andrei Dekterev 3 years ago
parent 35b5d122c0
commit 936aa388ed
  1. 15
      src/features/HeaderFilters/components/DateFilter/index.tsx
  2. 14
      src/features/HeaderFilters/store/hooks/index.tsx
  3. 59
      src/features/HomePage/components/Header/index.tsx
  4. 1
      src/features/HomePage/components/HeaderFilters/index.tsx

@ -22,6 +22,8 @@ import {
WeekNumber,
} from './styled'
import { useHeaderFiltersStore } from '../../store'
export const DateFilter = () => {
const {
close,
@ -35,6 +37,11 @@ export const DateFilter = () => {
selectedDate,
week,
} = useDateFilter()
const {
resetFilters,
} = useHeaderFiltersStore()
return (
<Wrapper>
<MonthWrapper>
@ -59,7 +66,13 @@ export const DateFilter = () => {
<WeekDay
key={day.name}
selected={day.date.getDate() === selectedDate.getDate()}
onClick={() => onWeekDayClick(day.date)}
onClick={() => {
if (day.date.getDate() !== selectedDate.getDate()) {
onWeekDayClick(day.date)
} else {
resetFilters()
}
}}
>
<WeekName>{day.name.slice(0, 3)}</WeekName>
<WeekNumber>{day.date.getDate()}</WeekNumber>

@ -32,6 +32,12 @@ export const useFilters = () => {
const isTodaySelected = isToday(selectedDate)
const resetFilters = useCallback(() => {
setIsShowTournament(true)
setSelectedFilters([])
setSelectedLeague(['all_competitions'])
}, [])
const updateDate = useCallback(() => {
setSelectedDate(new Date())
}, [setSelectedDate])
@ -46,17 +52,18 @@ export const useFilters = () => {
useEffect(() => {
if (!search) {
resetFilters()
updateDate()
}
}, [
isTodaySelected,
resetFilters,
updateDate,
search,
])
const store = useMemo(() => ({
isShowTournament,
isTodaySelected,
resetFilters,
selectTournament,
selectedDate,
selectedFilters,
@ -70,9 +77,11 @@ export const useFilters = () => {
setSelectedSport,
setSportIds,
sportIds,
updateDate,
}), [
isShowTournament,
isTodaySelected,
resetFilters,
selectedDate,
selectedFilters,
selectedLeague,
@ -86,6 +95,7 @@ export const useFilters = () => {
setSelectedSport,
setSportIds,
sportIds,
updateDate,
])
return store

@ -6,7 +6,7 @@ import { client } from 'config/clients'
import { Menu } from 'features/Menu'
import { ScoreSwitch } from 'features/MatchSwitches'
import { Search } from 'features/Search'
import { DateFilter } from 'features/HeaderFilters'
import { DateFilter, useHeaderFiltersStore } from 'features/HeaderFilters'
import {
HeaderStyled,
@ -15,25 +15,38 @@ import {
Position,
} from 'features/ProfileHeader/styled'
export const Header = () => (
<HeaderStyled>
<Position
top={client.styles.logoTop}
left={client.styles.logoLeft}
>
<HeaderGroup>
<Link to={PAGES.home}>
<HeaderLogo />
</Link>
<Search />
</HeaderGroup>
</Position>
<DateFilter />
<Position right={0.71}>
<HeaderGroup>
<ScoreSwitch />
<Menu />
</HeaderGroup>
</Position>
</HeaderStyled>
)
export const Header = () => {
const {
resetFilters,
updateDate,
} = useHeaderFiltersStore()
return (
<HeaderStyled>
<Position
top={client.styles.logoTop}
left={client.styles.logoLeft}
>
<HeaderGroup>
<Link
to={PAGES.home}
onClick={() => {
updateDate()
resetFilters()
}}
>
<HeaderLogo />
</Link>
<Search />
</HeaderGroup>
</Position>
<DateFilter />
<Position right={0.71}>
<HeaderGroup>
<ScoreSwitch />
<Menu />
</HeaderGroup>
</Position>
</HeaderStyled>
)
}

@ -52,7 +52,6 @@ export const HeaderFilters = () => {
onClick={() => handleClickBack()}
/>
<SelectFilter
// onModalOpen={() => console.log()}
open={false}
selectItem={selectTournament}
withArrow={false}

Loading…
Cancel
Save