diff --git a/src/components/SelectFilter/styled.tsx b/src/components/SelectFilter/styled.tsx index c926476d..981ebf5d 100644 --- a/src/components/SelectFilter/styled.tsx +++ b/src/components/SelectFilter/styled.tsx @@ -4,14 +4,12 @@ import { isMobileDevice } from 'config/userAgent' import { Icon } from 'features/Icon' export const ScSelectFilter = styled.div` - display: flex; color: white; - font-size: 14px; - width: auto; text-transform: uppercase; font-weight: 700; - align-items: center; - cursor: pointer; + font-size: 18px; + line-height: 22px; + white-space: nowrap; ${isMobileDevice ? css` diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 27f7b4c9..e6cbd6c3 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -35,6 +35,7 @@ export const useFilters = () => { currentFilters, filtersList, filtersSize, + getDropdownList, handleSetFilters, inputValue, isEmptyFilters, @@ -50,6 +51,7 @@ export const useFilters = () => { const [isShowTournament, setIsShowTournament] = useState(true) const [selectTournament, setSelectTournament] = useState() const [sportIds, setSportIds] = useState() + const [isFiltersShown, setIsFiltersShown] = useState(true) const isTodaySelected = isToday(selectedDate) const resetFilters = useCallback(() => { @@ -93,9 +95,11 @@ export const useFilters = () => { currentFilters, filtersList, filtersSize, + getDropdownList, handleSetFilters, inputValue, isEmptyFilters, + isFiltersShown, isOpenList, isShowTournament, isTodaySelected, @@ -109,6 +113,7 @@ export const useFilters = () => { selectedLeague, selectedSport, setFilters, + setIsFiltersShown, setIsShowTournament, setSelectTournament, setSelectedDate, @@ -130,9 +135,11 @@ export const useFilters = () => { currentFilters, filtersList, filtersSize, + getDropdownList, handleSetFilters, inputValue, isEmptyFilters, + isFiltersShown, isOpenList, isShowTournament, isTodaySelected, @@ -146,6 +153,7 @@ export const useFilters = () => { selectedLeague, selectedSport, setFilters, + setIsFiltersShown, setIsShowTournament, setSelectTournament, setSelectedDate, diff --git a/src/features/HeaderFilters/store/hooks/useMatchFilters.tsx b/src/features/HeaderFilters/store/hooks/useMatchFilters.tsx index 09f52cf0..35126857 100644 --- a/src/features/HeaderFilters/store/hooks/useMatchFilters.tsx +++ b/src/features/HeaderFilters/store/hooks/useMatchFilters.tsx @@ -7,17 +7,27 @@ import { ChangeEvent, } from 'react' +import every from 'lodash/every' import some from 'lodash/some' import isNil from 'lodash/isNil' import includes from 'lodash/includes' import filter from 'lodash/filter' import isEmpty from 'lodash/isEmpty' -import map from 'lodash/map' import reduce from 'lodash/reduce' import size from 'lodash/size' import { format } from 'date-fns' +import { + getAge, + getArena, + getDivision, + getGender, + getMainTeam, + getRound, + getSport, +} from 'features/HomePage/components/Dropdown/helpers' + import { getHomeMatches, Match, @@ -35,12 +45,7 @@ const getTimezoneOffset = (date: Date) => { const getDate = (date: Date) => format(date, 'yyyy-MM-dd') export type TActiveFilters = { - arena?: Array, - division?: Array, - gender?: Array, - main_team?: Array, - round?: Array, - youth_age?: Array, + [key: string]: Array, } export type TDefaultType = { id: number, @@ -49,7 +54,7 @@ export type TDefaultType = { } export const useMatchFilters = (selectedDate: Date) => { - const [filtersList, setFiltersList] = useState>() + const [filtersList, setFiltersList] = useState>([]) const [isOpenList, setOpenList] = useState('') const [activeFilters, setActiveFilters] = useState({}) const [inputValue, setInputValue] = useState('') @@ -81,8 +86,30 @@ export const useMatchFilters = (selectedDate: Date) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedDate]) - const currentFilters = useMemo(() => { + const getDropdownList = (filterName: string, queryString: string) => { + switch (filterName) { + case 'gender': + return getGender(filtersList) + case 'youth_age': + return getAge(filtersList) + case 'division': + return getDivision(filtersList) + case 'main_team': + return getMainTeam(filtersList) + case 'arena': + return getArena(filtersList, queryString) + case 'round': + return getRound(filtersList) + case 'sport': + return getSport(filtersList) + default: + return [] + } + } + + const filters = useMemo(() => { const arr = [] + if (some(filtersList, (item) => !isNil(item.sport))) arr.push('sport') if (some(filtersList, (item) => !isNil(item.arena?.id))) arr.push('arena') if (some(filtersList, (item) => !isNil(item.round?.id))) arr.push('round') if (some(filtersList, (item) => !isNil(item.team1?.main_team) || !isNil(item.team2?.main_team))) arr.push('main_team') @@ -92,15 +119,19 @@ export const useMatchFilters = (selectedDate: Date) => { return arr }, [filtersList]) - const handleSetFilters = (filterName: string, value: any) => { - const isFilterPresent = !isNil(activeFilters[filterName as keyof typeof activeFilters]) + const filtersWitnMoreThenOneValue = filter(filters, (filterName) => ( + getDropdownList(filterName, '').length > 1 + )) + + const handleSetFilters = (filterName: string, value: number) => { + const activeFilter = activeFilters[filterName as keyof typeof activeFilters] + const isFilterPresent = !isNil(activeFilter) + if (isFilterPresent) { - const isValuePresent = includes( - activeFilters[filterName as keyof typeof activeFilters], value, - ) + const isValuePresent = includes(activeFilter, value) const currentValue = isValuePresent - ? filter(activeFilters[filterName as keyof typeof activeFilters], (item) => item !== value) - : [...activeFilters[filterName as keyof typeof activeFilters]!, value] + ? filter(activeFilter, (item) => item !== value) + : [...activeFilter, value] return setActiveFilters({ ...activeFilters, @@ -127,20 +158,20 @@ export const useMatchFilters = (selectedDate: Date) => { setActiveFilters({}) } - const isEmptyFilters = some(activeFilters, (filterItem) => isEmpty(filterItem)) - || isEmpty(activeFilters) + const isEmptyFilters = every(activeFilters, (filterItem) => isEmpty(filterItem)) const queryParams: TQueryParams = useMemo(() => { const params = { - arena: map(activeFilters.arena, (item) => item.id), - division: map(activeFilters.division, (item) => item.id), - gender: map(activeFilters.gender, (item) => item.id), - main_team: map(activeFilters.main_team, (item) => item.id), - round: map(activeFilters.round, (item) => item.id), + arena: activeFilters.arena, + division: activeFilters.division, + gender: activeFilters.gender, + main_team: activeFilters.main_team, + round: activeFilters.round, + sport: activeFilters.sport, youth_age: activeFilters.youth_age, } - return (params) + return params }, [activeFilters]) const changeInput = (e: ChangeEvent) => { @@ -162,8 +193,10 @@ export const useMatchFilters = (selectedDate: Date) => { } const filtersSize = reduce(activeFilters, - (result, - value) => result + size(value), 0) + ( + result, + value, + ) => result + size(value), 0) return { activeFilters, @@ -174,9 +207,10 @@ export const useMatchFilters = (selectedDate: Date) => { clickClearAll, closeDropdownList, confirmClear, - currentFilters, + currentFilters: filtersWitnMoreThenOneValue, filtersList, filtersSize, + getDropdownList, handleSetFilters, inputValue, isEmptyFilters, diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx index ca3a6b18..280063fc 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -1,13 +1,9 @@ -import { useRecoilValue } from 'recoil' - import { isIOS } from 'config/userAgent' -import { isLffClient } from 'config/clients' +import { isInSportsClient } from 'config/clients' import { HeaderMenu } from 'features/HeaderMenu' import { DateFilter } from 'features/HeaderFilters' import { ScoreSwitch } from 'features/MatchSwitches' -import { SportsFilter } from 'features/SportsFilter' -import { isSportFilterShownAtom } from 'features/HomePage/Atoms/HomePageAtoms' import { SmartBanner } from 'components/SmartBanner' import { MobileMatchesFilters } from 'features/HomePage/components/MobileMatchesFilters' @@ -22,31 +18,22 @@ type HeaderBannerProps = { setIsOpenDownload: (open: boolean) => void, } -export const HeaderMobile = ({ isOpenDownload, setIsOpenDownload }: HeaderBannerProps) => { - const isSportFilterShown = useRecoilValue(isSportFilterShownAtom) - - return ( - <> - { - isOpenDownload +export const HeaderMobile = ({ isOpenDownload, setIsOpenDownload }: HeaderBannerProps) => ( + <> + { + isOpenDownload && !isIOS && - } - - - - - {!isLffClient && isSportFilterShown ? ( - <> - - - - ) : null} - - - - - - - ) -} + } + + + + + {isInSportsClient && } + + + + + + +) diff --git a/src/features/HomePage/Atoms/HomePageAtoms.tsx b/src/features/HomePage/Atoms/HomePageAtoms.tsx deleted file mode 100644 index 9e65d944..00000000 --- a/src/features/HomePage/Atoms/HomePageAtoms.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil' - -export const isSportFilterShownAtom = atom({ - default: true, - key: 'isSportFilterShownAtom', -}) diff --git a/src/features/HomePage/components/Dropdown/helpers.tsx b/src/features/HomePage/components/Dropdown/helpers.tsx index caffc6fc..c0be6591 100644 --- a/src/features/HomePage/components/Dropdown/helpers.tsx +++ b/src/features/HomePage/components/Dropdown/helpers.tsx @@ -2,6 +2,7 @@ import map from 'lodash/map' import some from 'lodash/some' import filter from 'lodash/filter' import uniq from 'lodash/uniq' +import uniqBy from 'lodash/uniqBy' import flatten from 'lodash/flatten' import compact from 'lodash/compact' import startsWith from 'lodash/startsWith' @@ -12,6 +13,7 @@ import { Match } from 'requests' const checkStartString = (text: string, searchString: string) => startsWith( toLower(text), toLower(searchString), ) + export const getAge = (filterList: Array) => compact( uniq( flatten( @@ -46,17 +48,27 @@ export const getArena = (filterList: Array, inputValue: string) => filter || checkStartString(item.name_rus, inputValue)), ) -export const getRound = (filterList: Array) => filter( - map( - filterList, (item) => item.round, - ), (item) => item?.id, +export const getSport = (filterList: Array) => uniqBy( + filter( + map( + filterList, (item) => item.sport_info, + ), (item) => item?.id, + ), 'id', +) + +export const getRound = (filterList: Array) => uniqBy( + filter( + map( + filterList, (item) => item.round, + ), (item) => item?.id, + ), 'id', ) export const getGender = (filterList: Array) => { const list = [] - if (some(filterList, (item) => item.team1.gender === 1 || item.team2.gender === 1)) list.push({ id: 1, title: 'gender_male_long' }) - if (some(filterList, (item) => item.team1.gender === 2 || item.team2.gender === 2)) list.push({ id: 2, title: 'gender_female_long' }) + if (some(filterList, (item) => item.team1.gender === 1 || item.team2.gender === 1)) list.push({ id: 1, lexic: 'gender_male_long' }) + if (some(filterList, (item) => item.team1.gender === 2 || item.team2.gender === 2)) list.push({ id: 2, lexic: 'gender_female_long' }) return list } diff --git a/src/features/HomePage/components/Dropdown/index.tsx b/src/features/HomePage/components/Dropdown/index.tsx index 29be08cc..59a83888 100644 --- a/src/features/HomePage/components/Dropdown/index.tsx +++ b/src/features/HomePage/components/Dropdown/index.tsx @@ -1,22 +1,17 @@ -import React, { useMemo } from 'react' +import { ChangeEvent, MouseEvent } from 'react' import map from 'lodash/map' import isEmpty from 'lodash/isEmpty' import includes from 'lodash/includes' +import isNumber from 'lodash/isNumber' import { T9n } from 'features/T9n' import { Name } from 'features/Name' import { useLexicsStore } from 'features/LexicsStore' +import { useHeaderFiltersStore } from 'features/HeaderFilters' + import { isMobileDevice } from 'config/userAgent' -import { - getAge, - getArena, - getDivision, - getGender, - getMainTeam, - getRound, -} from './helpers' import { TDropDownProps, TFilterItem, @@ -35,46 +30,23 @@ import { BackButton, } from './styled' -const Label = ({ item }: TFilterItem) => { - const isNumber = typeof item === 'number' - - return ( - <> - {isNumber ? (<>U{item}) : ()} - - ) -} +const Label = ({ item }: TFilterItem) => ( + isNumber(item) ? <>U{item} : +) export const DropDown = ({ activeFilters, changeInput, clearFilters, closeDropdownList, - filterList, filterTitle, inputValue, setFilters, }: TDropDownProps) => { const { translate } = useLexicsStore() + const { getDropdownList } = useHeaderFiltersStore() - const dropDownList = useMemo(() => { - switch (filterTitle) { - case 'gender': - return getGender(filterList) - case 'youth_age': - return getAge(filterList) - case 'division': - return getDivision(filterList) - case 'main_team': - return getMainTeam(filterList) - case 'arena': - return getArena(filterList, inputValue) - case 'round': - return getRound(filterList) - default: - return [] - } - }, [filterTitle, filterList, inputValue]) as Array | Array + const dropdownList = getDropdownList(filterTitle, inputValue) as Array const currentActiveFilter = activeFilters[filterTitle as keyof typeof activeFilters] @@ -115,45 +87,37 @@ export const DropDown = ({ - {!isEmpty(dropDownList) && map(dropDownList, (filterItem, i) => ( - <> + {map(dropdownList, (filterItem) => { + const filterValue = isNumber(filterItem) ? filterItem : filterItem.id + const handleClick = (e: ChangeEvent | MouseEvent) => { + e.preventDefault() + e.stopPropagation() + setFilters(filterTitle, filterValue) + } + + return ( { - e.preventDefault() - e.stopPropagation() - setFilters(filterTitle, filterItem) - }} + key={filterValue} + onClick={handleClick} > - {filterTitle === 'gender' + {includes(['gender', 'sport'], filterTitle) ? ( { - e.preventDefault() - e.stopPropagation() - setFilters(filterTitle, filterItem) - }} - labelLexic={filterItem.title} + checked={includes(currentActiveFilter, filterValue)} + onChange={handleClick} + labelLexic={!isNumber(filterItem) ? filterItem.lexic : ''} /> ) : ( { - e.preventDefault() - e.stopPropagation() - setFilters(filterTitle, filterItem) - }} + checked={includes(currentActiveFilter, filterValue)} + onChange={handleClick} label={( - - ))} + ) + })} ) diff --git a/src/features/HomePage/components/Dropdown/types.tsx b/src/features/HomePage/components/Dropdown/types.tsx index 77c26e29..35e9ffab 100644 --- a/src/features/HomePage/components/Dropdown/types.tsx +++ b/src/features/HomePage/components/Dropdown/types.tsx @@ -1,5 +1,4 @@ import { MouseEvent, ChangeEvent } from 'react' -import { Match } from 'requests' import { TActiveFilters } from 'features/HeaderFilters/store/hooks/useMatchFilters' export type TDropDownProps = { @@ -7,7 +6,6 @@ export type TDropDownProps = { changeInput: (e: ChangeEvent) => void, clearFilters: (filterName: string) => (e: MouseEvent | ChangeEvent) => void, closeDropdownList?: () => void, - filterList: Array, filterTitle: string, inputValue: string, setFilters: (filterName: string, value: number) => void, @@ -15,6 +13,7 @@ export type TDropDownProps = { export type TItem = { id: number, + lexic?: string, name_eng: string, name_rus: string, } diff --git a/src/features/HomePage/components/HeaderFilters/index.tsx b/src/features/HomePage/components/HeaderFilters/index.tsx index 781164e1..f82197d3 100644 --- a/src/features/HomePage/components/HeaderFilters/index.tsx +++ b/src/features/HomePage/components/HeaderFilters/index.tsx @@ -1,8 +1,5 @@ -import { useRecoilValue } from 'recoil' +import { isInSportsClient } from 'config/clients' -import { isLffClient, isInSportsClient } from 'config/clients' - -import { SportsFilter } from 'features/SportsFilter' import { SelectFilter } from 'components/SelectFilter' import { useHeaderFiltersStore } from 'features/HeaderFilters' import { T9n } from 'features/T9n' @@ -15,10 +12,8 @@ import { ModalWindow } from 'features/Modal/styled' import { ScArrow, ScHeaderFilters, - ScFilterItemsWrap, - ScFilterItem, + SelectFilterWrapper, } from './styled' -import { isSportFilterShownAtom } from '../../Atoms/HomePageAtoms' import { ClearFiltersPopup } from '../ClearFiltersPopup' import { MatchesFilters } from '../MatchesFilters' @@ -32,8 +27,8 @@ export const Modal = styled(BaseModal)` const ClearButton = styled.span` cursor: pointer; position: absolute; - left: 5px; - top: 38px; + left: 36px; + top: 30px; font-style: normal; font-weight: 400; font-size: 18px; @@ -46,81 +41,45 @@ export const HeaderFilters = () => { const { clickClearAll, isEmptyFilters, + isFiltersShown, isShowTournament, - selectedFilters, selectTournament, setIsShowTournament, - setSelectedFilters, setSelectedLeague, } = useHeaderFiltersStore() - const isSportFilterShown = useRecoilValue(isSportFilterShownAtom) - - const isActiveFilter = (filterItem: string) => selectedFilters.indexOf(filterItem) >= 0 - - const checkFilter = (item: string) => { - isActiveFilter(item) - ? setSelectedFilters((prev) => prev.filter((check) => item !== check)) - : setSelectedFilters([...selectedFilters, item]) - } const handleClickBack = () => { setIsShowTournament(true) - setSelectedFilters([]) setSelectedLeague(['all_competitions']) } + return ( {!isShowTournament && ( - <> + handleClickBack()} /> - + )} - {!isLffClient && isShowTournament && isSportFilterShown && } - {!isEmptyFilters && ( )} - {!isLffClient && ( + {isInSportsClient && isFiltersShown && ( <> - )} - {isShowTournament && !isInSportsClient && ( - - checkFilter('live')} - > - - - checkFilter('upcoming')} - > - - - checkFilter('completed')} - > - - - - )} ) } diff --git a/src/features/HomePage/components/HeaderFilters/styled.tsx b/src/features/HomePage/components/HeaderFilters/styled.tsx index ec1b9067..ef2ec3bf 100644 --- a/src/features/HomePage/components/HeaderFilters/styled.tsx +++ b/src/features/HomePage/components/HeaderFilters/styled.tsx @@ -19,6 +19,12 @@ export const ScHeaderFilters = styled.div` } ` +export const SelectFilterWrapper = styled.div` + display: flex; + align-items: center; + cursor: pointer; +` + export const ScFilterItemsWrap = styled.div` display: flex; flex-direction: row; @@ -45,7 +51,12 @@ export const ScFilterItem = styled.div` export const ScArrow = styled(Icon)` margin-right: 15px; - cursor: pointer; + height: 20px; + + svg { + width: 20px; + height: 12px; + } :hover { /* background-color: rgba(255, 255, 255, 0.5);; */ diff --git a/src/features/HomePage/components/MatchesFilters/index.tsx b/src/features/HomePage/components/MatchesFilters/index.tsx index 60f28325..f7163802 100644 --- a/src/features/HomePage/components/MatchesFilters/index.tsx +++ b/src/features/HomePage/components/MatchesFilters/index.tsx @@ -1,12 +1,13 @@ -import React from 'react' - import map from 'lodash/map' import isNil from 'lodash/isNil' import size from 'lodash/size' +import find from 'lodash/find' +import includes from 'lodash/includes' import { useName } from 'features/Name' import { T9n } from 'features/T9n' import { useHeaderFiltersStore } from 'features/HeaderFilters' + import { isMobileDevice } from 'config/userAgent' import { @@ -18,16 +19,25 @@ import { CloseButton, } from './styled' import { DropDown } from '../Dropdown' +import { TItem } from '../Dropdown/types' import { checkSize, truncateString } from './helpers' type TProps = { + dropdownList: Array, filterTitle: string, - item: any, + item: number, } -const ActiveFilterText = ({ filterTitle, item }: TProps) => { - const name = useName(item) - if (filterTitle === 'gender') return () +const ActiveFilterText = ({ + dropdownList, + filterTitle, + item, +}: TProps) => { + const currentItem = find(dropdownList, { id: item }) as TItem + const name = useName(currentItem) + + if (includes(['gender', 'sport'], filterTitle)) return + return ( <> {truncateString(name)} @@ -46,6 +56,7 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => { currentFilters, filtersList, filtersSize, + getDropdownList, handleSetFilters, inputValue, isOpenList, @@ -54,7 +65,7 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => { return ( - {map(currentFilters, (filterTitle, index) => { + {map(currentFilters, (filterTitle) => { const currentActiveFilters = activeFilters[filterTitle as keyof typeof activeFilters] const isShrinkFilters = filtersSize >= 7 || size(currentActiveFilters) >= 7 @@ -64,20 +75,28 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => { ? [currentActiveFilters[0], currentActiveFilters[1]] : currentActiveFilters + const dropdownList = getDropdownList(filterTitle, inputValue) as Array + return ( {/* */} {filterTitle} - {map(shrinkedActiveFilters, (item, i) => ( - - {typeof item === 'number' + {map(shrinkedActiveFilters, (item) => ( + + {filterTitle === 'youth_age' ? `U${item}` - : ()} + : ( + + )} { e.stopPropagation() handleSetFilters(filterTitle, item) @@ -100,7 +119,6 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => { activeFilters={activeFilters} setFilters={handleSetFilters} filterTitle={filterTitle} - filterList={filtersList} /> )} diff --git a/src/features/HomePage/components/MatchesFilters/styled.tsx b/src/features/HomePage/components/MatchesFilters/styled.tsx index 656c771b..1cdd75fe 100644 --- a/src/features/HomePage/components/MatchesFilters/styled.tsx +++ b/src/features/HomePage/components/MatchesFilters/styled.tsx @@ -18,7 +18,7 @@ ${isMobileDevice : css` gap: 30px; flex-direction: row; - padding-right: 25px; + padding-right: 10px; `} ` @@ -100,12 +100,10 @@ ${({ active }) => active && !isMobileDevice && css` left: 0; width: 20px; `} - - } span { ${({ active }) => (active && css` - z-index:12; + z-index: 12; position: relative; `)} } @@ -158,12 +156,12 @@ ${isMobileDevice :hover { background: #ffff; color: #000000; - + ${CloseButton} { background: url(/images/closeBlack.svg) no-repeat; } }`} - + ` export const FiltersCount = styled(ActiveFilter)`` diff --git a/src/features/HomePage/components/MobileMatchesFilters/index.tsx b/src/features/HomePage/components/MobileMatchesFilters/index.tsx index 7a88f86c..7bad3595 100644 --- a/src/features/HomePage/components/MobileMatchesFilters/index.tsx +++ b/src/features/HomePage/components/MobileMatchesFilters/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import isEmpty from 'lodash/isEmpty' import isNil from 'lodash/isNil' @@ -74,7 +74,6 @@ export const MobileMatchesFilters = () => { activeFilters={activeFilters} setFilters={handleSetFilters} filterTitle={isOpenList} - filterList={filtersList} closeDropdownList={closeDropdownList} /> )} diff --git a/src/features/HomePage/components/MobileMatchesFilters/styled.tsx b/src/features/HomePage/components/MobileMatchesFilters/styled.tsx index 1b40d4f8..5f64308a 100644 --- a/src/features/HomePage/components/MobileMatchesFilters/styled.tsx +++ b/src/features/HomePage/components/MobileMatchesFilters/styled.tsx @@ -38,7 +38,6 @@ text-transform: uppercase; color: #FFFFFF; padding-left: 22px; position: relative; -margin-left: 20px; :before{ content: ''; diff --git a/src/features/HomePage/hooks.tsx b/src/features/HomePage/hooks.tsx index 6f14c4d1..16875978 100644 --- a/src/features/HomePage/hooks.tsx +++ b/src/features/HomePage/hooks.tsx @@ -6,19 +6,12 @@ import { import { format } from 'date-fns' -import { useSetRecoilState } from 'recoil' - -import { client } from 'config/clients' -import { ClientNames } from 'config/clients/types' - import { useAuthStore } from 'features/AuthStore' import { useHeaderFiltersStore } from 'features/HeaderFilters' import { getHomeMatches } from 'requests/getMatches' import { getAgreements, setAgreements } from 'requests/getAgreements' -import { isSportFilterShownAtom } from './Atoms/HomePageAtoms' - /** * возвращает смещение в минутах относительно UTC * @@ -38,7 +31,6 @@ export const useHomePage = () => { const { queryParams, selectedDate } = useHeaderFiltersStore() const [isOpenDownload, setIsOpenDownload] = useState(false) const [isShowConfirmPopup, setIsShowConfirmPopup] = useState(false) - const setIsSportFilterShown = useSetRecoilState(isSportFilterShownAtom) const handleCloseConfirmPopup = useCallback(async () => { await setAgreements(user?.profile?.email || '') @@ -74,12 +66,6 @@ export const useHomePage = () => { }, ), [selectedDate, queryParams]) - useEffect(() => { - if (client.name === ClientNames.Facr) { - setIsSportFilterShown(false) - } - }, [setIsSportFilterShown]) - return { fetchMatches, handleCloseConfirmPopup, diff --git a/src/features/TournamentList/components/CollapseTournament/index.tsx b/src/features/TournamentList/components/CollapseTournament/index.tsx index d6b8d406..34095d52 100644 --- a/src/features/TournamentList/components/CollapseTournament/index.tsx +++ b/src/features/TournamentList/components/CollapseTournament/index.tsx @@ -33,6 +33,7 @@ export const CollapseTournament = ({ tournamentMatches, }: TournamentProps) => { const { + setIsFiltersShown, setIsShowTournament, setSelectedLeague, setSelectTournament, @@ -45,6 +46,7 @@ export const CollapseTournament = ({ } = tournament const handleClick = () => { + setIsFiltersShown(true) setIsShowTournament(false) setSelectedLeague([tournament.id]) setSelectTournament(tournament) diff --git a/src/features/TournamentList/index.tsx b/src/features/TournamentList/index.tsx index 96215326..4a56bf77 100644 --- a/src/features/TournamentList/index.tsx +++ b/src/features/TournamentList/index.tsx @@ -1,7 +1,9 @@ +import { useEffect } from 'react' import { useRouteMatch } from 'react-router-dom' import type { Match } from 'features/Matches' import { MatchCard } from 'features/MatchCard' +import { useHeaderFiltersStore } from 'features/HeaderFilters' import type { TournamentType } from 'requests/getMatches/types' @@ -33,6 +35,19 @@ export type TournamentListProps = { export const TournamentList = ({ matches }: TournamentTypeProps) => { const { tournaments, tournamentSort } = useTournaments(matches) const isHomePage = useRouteMatch(PAGES.home)?.isExact + const { setIsFiltersShown } = useHeaderFiltersStore() + + useEffect(() => { + if (isHomePage && matches.length >= 12) { + setIsFiltersShown(false) + } else { + setIsFiltersShown(true) + } + }, [ + isHomePage, + matches.length, + setIsFiltersShown, + ]) switch (true) { case isMobileDevice && isHomePage: diff --git a/src/requests/getMatches/getHomeMatches.tsx b/src/requests/getMatches/getHomeMatches.tsx index f1519251..194c5b4a 100644 --- a/src/requests/getMatches/getHomeMatches.tsx +++ b/src/requests/getMatches/getHomeMatches.tsx @@ -15,6 +15,7 @@ export type TQueryParams = { gender?: Array, main_team?: Array, round?: Array, + sport?: Array, youth_age?: Array, } @@ -45,6 +46,7 @@ export const getHomeMatches = async ({ main_team: !isEmpty(queryParams?.main_team) ? queryParams?.main_team : undefined, offset: String(offset), round: !isEmpty(queryParams?.round) ? queryParams?.round : undefined, + sport: !isEmpty(queryParams?.sport) ? queryParams?.sport : undefined, youth_age: !isEmpty(queryParams?.youth_age) ? queryParams?.youth_age : undefined, ...client.requests?.[proc], }, diff --git a/src/requests/getMatches/types.tsx b/src/requests/getMatches/types.tsx index ff130b6f..75bbc9c8 100644 --- a/src/requests/getMatches/types.tsx +++ b/src/requests/getMatches/types.tsx @@ -12,6 +12,7 @@ export type TDefaultType = { name_eng: string, name_rus: string, } + type Team = { division?: TDefaultType, // Дивизион gender?: number, // ИД пола