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

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

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

Loading…
Cancel
Save