From 61a2661a1c7b0f958a65795b5393822fb1d16524 Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Thu, 27 Oct 2022 18:33:07 +0300 Subject: [PATCH] Revert "fix(ott-2710): minor fixes" This reverts commit 26cbef87630a24dbd342dc7d559b1dbe4a5ebbfd. --- src/components/SelectFilter/index.tsx | 2 +- src/components/SelectFilter/styled.tsx | 8 +- .../components/DateFilter/hooks/index.tsx | 5 +- .../HeaderFilters/store/hooks/index.tsx | 80 ++--- .../store/hooks/useMatchFilters.tsx | 215 ++++--------- src/features/HeaderMobile/index.tsx | 51 ++-- src/features/HomePage/Atoms/HomePageAtoms.tsx | 6 + .../components/ClearFiltersPopup/index.tsx | 2 +- .../components/ClearFiltersPopup/styled.tsx | 141 +++++---- .../HomePage/components/Dropdown/Dropdown.tsx | 160 ++++++++++ .../HomePage/components/Dropdown/helpers.tsx | 32 +- .../HomePage/components/Dropdown/index.tsx | 127 -------- .../HomePage/components/Dropdown/styled.tsx | 283 ++++++++---------- .../HomePage/components/Dropdown/types.tsx | 3 +- .../HomePage/components/Header/index.tsx | 8 +- .../components/HeaderFilters/index.tsx | 82 ++++- .../components/HeaderFilters/styled.tsx | 13 +- .../components/MatchesFilters/index.tsx | 68 ++--- .../components/MatchesFilters/styled.tsx | 262 ++++++++-------- .../components/MobileMatchesFilters/index.tsx | 36 +-- .../MobileMatchesFilters/styled.tsx | 91 +++--- src/features/HomePage/hooks.tsx | 14 + src/features/HomePage/index.tsx | 4 +- .../Matches/helpers/prepareMatches.tsx | 4 - src/features/OutsideClick/index.tsx | 2 +- src/features/ProfileHeader/styled.tsx | 12 +- .../components/CollapseTournament/index.tsx | 4 +- src/requests/getMatches/getHomeMatches.tsx | 2 - src/requests/getMatches/types.tsx | 1 - 29 files changed, 808 insertions(+), 910 deletions(-) create mode 100644 src/features/HomePage/Atoms/HomePageAtoms.tsx create mode 100644 src/features/HomePage/components/Dropdown/Dropdown.tsx delete mode 100644 src/features/HomePage/components/Dropdown/index.tsx diff --git a/src/components/SelectFilter/index.tsx b/src/components/SelectFilter/index.tsx index 8f24c661..435a53d3 100644 --- a/src/components/SelectFilter/index.tsx +++ b/src/components/SelectFilter/index.tsx @@ -11,7 +11,7 @@ import { type SportsFilterProps = { onModalOpen?: () => void, open: boolean, - selectItem: TournamentType | null, + selectItem: TournamentType | undefined, withArrow?: boolean, } diff --git a/src/components/SelectFilter/styled.tsx b/src/components/SelectFilter/styled.tsx index 981ebf5d..c926476d 100644 --- a/src/components/SelectFilter/styled.tsx +++ b/src/components/SelectFilter/styled.tsx @@ -4,12 +4,14 @@ 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; - font-size: 18px; - line-height: 22px; - white-space: nowrap; + align-items: center; + cursor: pointer; ${isMobileDevice ? css` diff --git a/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx b/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx index 8ef7b9a2..e462d1a2 100644 --- a/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx +++ b/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx @@ -24,7 +24,7 @@ export const useDateFilter = () => { setSelectedDate, setSelectedFilters, setSelectedLeague, - setSelectedTournament, + setSelectTournament, } = useHeaderFiltersStore() const { lang } = useLexicsStore() @@ -52,11 +52,10 @@ export const useDateFilter = () => { && parseFilters.selectedLeague[0] !== 'all_competitions') { setIsShowTournament(false) setSelectedLeague(parseFilters.selectedLeague) - setSelectedTournament(parseFilters.selectedTournament) + setSelectTournament(parseFilters.selectTournament) } else { setIsShowTournament(true) setSelectedFilters([]) - setSelectedTournament(null) setSelectedLeague(['all_competitions']) } // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 87ac6009..27f7b4c9 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -23,14 +23,6 @@ export const useFilters = () => { key: filterKeys.DATE, validator: isValidDate, }) - const [selectedSport, setSelectedSport] = useState(['all_sports']) - const [selectedLeague, setSelectedLeague] = useState>(['all_competitions']) - const [selectedFilters, setSelectedFilters] = useState>([]) - const [isShowTournament, setIsShowTournament] = useState(true) - const [selectedTournament, setSelectedTournament] = useState(null) - const [sportIds, setSportIds] = useState() - const isTodaySelected = isToday(selectedDate) - const { activeFilters, changeInput, @@ -41,22 +33,24 @@ export const useFilters = () => { closeDropdownList, confirmClear, currentFilters, - filtersListName, + filtersList, filtersSize, - getDropdownList, handleSetFilters, inputValue, isEmptyFilters, - isFiltersShown, - matchesList, + isOpenList, + openDropdownList, openPopup, queryParams, - setTournamentMatches, - toggleDropdownList, - } = useMatchFilters({ - selectedDate, - selectedTournament, - }) + setFilters, + } = useMatchFilters(selectedDate) + const [selectedSport, setSelectedSport] = useState(['all_sports']) + const [selectedLeague, setSelectedLeague] = useState>(['all_competitions']) + const [selectedFilters, setSelectedFilters] = useState>([]) + const [isShowTournament, setIsShowTournament] = useState(true) + const [selectTournament, setSelectTournament] = useState() + const [sportIds, setSportIds] = useState() + const isTodaySelected = isToday(selectedDate) const resetFilters = useCallback(() => { setIsShowTournament(true) @@ -70,9 +64,9 @@ export const useFilters = () => { useEffect(() => { localStorage.setItem('filters', JSON.stringify({ + selectTournament, selectedDate: selectedDate.getDate(), selectedLeague, - selectedTournament, })) // eslint-disable-next-line }, [selectedLeague]) @@ -87,20 +81,6 @@ export const useFilters = () => { search, ]) - const handleClickBack = useCallback(() => { - setTournamentMatches([]) - clearAllFilters() - setIsShowTournament(true) - setSelectedTournament(null) - setSelectedLeague(['all_competitions']) - }, [ - clearAllFilters, - setTournamentMatches, - setIsShowTournament, - setSelectedTournament, - setSelectedLeague, - ]) - const store = useMemo(() => ({ activeFilters, changeInput, @@ -111,73 +91,69 @@ export const useFilters = () => { closeDropdownList, confirmClear, currentFilters, - filtersListName, + filtersList, filtersSize, - getDropdownList, - handleClickBack, handleSetFilters, inputValue, isEmptyFilters, - isFiltersShown, + isOpenList, isShowTournament, isTodaySelected, - matchesList, + openDropdownList, openPopup, queryParams, resetFilters, + selectTournament, selectedDate, selectedFilters, selectedLeague, selectedSport, - selectedTournament, + setFilters, setIsShowTournament, + setSelectTournament, setSelectedDate, setSelectedFilters, setSelectedLeague, setSelectedSport, - setSelectedTournament, setSportIds, sportIds, - toggleDropdownList, updateDate, }), [ activeFilters, + clickCancel, + clickClearAll, + confirmClear, changeInput, clearAllFilters, clearFilters, - clickCancel, - clickClearAll, closeDropdownList, - confirmClear, currentFilters, - filtersListName, + filtersList, filtersSize, - getDropdownList, - handleClickBack, handleSetFilters, inputValue, isEmptyFilters, - isFiltersShown, + isOpenList, isShowTournament, isTodaySelected, - matchesList, openPopup, + openDropdownList, queryParams, resetFilters, + selectTournament, selectedDate, selectedFilters, selectedLeague, selectedSport, - selectedTournament, + setFilters, setIsShowTournament, + setSelectTournament, setSelectedDate, setSelectedFilters, setSelectedLeague, setSelectedSport, - setSelectedTournament, setSportIds, sportIds, - toggleDropdownList, updateDate, ]) diff --git a/src/features/HeaderFilters/store/hooks/useMatchFilters.tsx b/src/features/HeaderFilters/store/hooks/useMatchFilters.tsx index 27add7eb..3455c590 100644 --- a/src/features/HeaderFilters/store/hooks/useMatchFilters.tsx +++ b/src/features/HeaderFilters/store/hooks/useMatchFilters.tsx @@ -6,37 +6,22 @@ import { MouseEvent, 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, TQueryParams, } from 'requests' -import type { TournamentType } from 'requests/getMatches/types' - -const MATCHES_LIMIT = 1000 -const OFFSET = 0 const getTimezoneOffset = (date: Date) => { const offset = date.getTimezoneOffset() @@ -46,52 +31,37 @@ const getTimezoneOffset = (date: Date) => { const getDate = (date: Date) => format(date, 'yyyy-MM-dd') export type TActiveFilters = { - [key: string]: Array, + arena?: Array, + division?: Array, + gender?: Array, + main_team?: Array, + round?: Array, + youth_age?: Array, } - export type TDefaultType = { id: number, name_eng: string, name_rus: string, } -type TUseMatchFilters = { - selectedDate: Date, - selectedTournament: TournamentType | null, -} - -const DEFAULT_FILTERS = {} - -export const useMatchFilters = ({ - selectedDate, - selectedTournament, -}: TUseMatchFilters) => { - const [matchesList, setMatchesList] = useState>([]) - const [tournamentMatches, setTournamentMatches] = useState>([]) - const [filtersListName, setFiltersListName] = useState('') - const [activeFilters, setActiveFilters] = useState(DEFAULT_FILTERS) +export const useMatchFilters = (selectedDate: Date) => { + const [filtersList, setFiltersList] = useState>() + const [isOpenList, setOpenList] = useState('') + const [activeFilters, setActiveFilters] = useState({}) const [inputValue, setInputValue] = useState('') const [openPopup, setOpenPopup] = useState(false) - const toggleDropdownList = (title: string) => () => { - if (title === filtersListName) { - setFiltersListName('') - setInputValue('') - } else { - setFiltersListName(title) - } + const setFilters = (filters: Array) => { + setFiltersList(filters) } - const closeDropdownList = () => { - setFiltersListName('') - setInputValue('') + const openDropdownList = (title: string) => () => { + setOpenList(title === isOpenList ? '' : title) } - const clearAllFilters = () => { - setInputValue('') - setActiveFilters(DEFAULT_FILTERS) + const closeDropdownList = () => { + setOpenList('') } - const fetchMatches = useCallback( (limit: number, offset: number) => getHomeMatches({ date: getDate(selectedDate), @@ -103,101 +73,36 @@ export const useMatchFilters = ({ ) useEffect(() => { - clearAllFilters() - setMatchesList([]) - setTournamentMatches([]) - - fetchMatches(MATCHES_LIMIT, OFFSET).then(({ broadcast }) => { - setMatchesList(broadcast) - }) - // eslint-disable-next-line react-hooks/exhaustive-deps + fetchMatches(1000, 0).then((resp) => setFiltersList(resp.broadcast)) + // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedDate]) - useEffect(() => { - if (selectedTournament) { - setTournamentMatches( - filter(matchesList, - (match) => match.tournament.id === selectedTournament.id), - ) - } - }, [ - matchesList, - selectedTournament, - ]) - - const matchesForFilters = useMemo(() => ( - selectedTournament ? tournamentMatches : matchesList), - [ - matchesList, - selectedTournament, - tournamentMatches, - ]) - - const getDropdownList = useCallback((filterName: string, queryString: string) => { - switch (filterName) { - case 'gender': - return getGender(matchesForFilters) - case 'youth_age': - return getAge(matchesForFilters) - case 'division': - return getDivision(matchesForFilters) - case 'main_team': - return getMainTeam(matchesForFilters) - case 'arena': - return getArena(matchesForFilters, queryString) - case 'round': - return getRound(matchesForFilters) - case 'sport': - return getSport(matchesForFilters) - default: - return [] - } - }, [matchesForFilters]) - const currentFilters = useMemo(() => { const arr = [] - - const hasArena = some(matchesForFilters, (item) => !isNil(item.arena?.id)) - const hasRound = some(matchesForFilters, (item) => !isNil(item.round?.id)) - const hasSport = some(matchesForFilters, (item) => !isNil(item.sport)) - const hasMainTeam = some(matchesForFilters, - (item) => !isNil(item.team1?.main_team) || !isNil(item.team2?.main_team)) - const hasGender = some(matchesForFilters, - (item) => !isNil(item.team1?.gender) || !isNil(item.team2?.gender)) - const hasDivision = some(matchesForFilters, - (item) => !isNil(item.team1?.division?.id) || !isNil(item.team2?.division?.id)) - const hasYouthAge = some(matchesForFilters, - (item) => !isNil(item.team1?.youth_age) || !isNil(item.team2?.youth_age)) - - if (hasSport) arr.push('sport') - if (hasArena) arr.push('arena') - if (hasRound) arr.push('round') - if (hasMainTeam) arr.push('main_team') - if (hasYouthAge) arr.push('youth_age') - if (hasGender) arr.push('gender') - if (hasDivision) arr.push('division') - - return filter(arr, (filterName) => ( - getDropdownList(filterName, '').length > 1 - )) - }, [getDropdownList, matchesForFilters]) - - const handleSetFilters = (filterName: string, value: number) => { - const activeFilter = activeFilters[filterName as keyof typeof activeFilters] - const isFilterPresent = !isNil(activeFilter) - + 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') + if (some(filtersList, (item) => !isNil(item.team1?.youth_age) || !isNil(item.team2?.youth_age))) arr.push('youth_age') + if (some(filtersList, (item) => !isNil(item.team1?.gender) || !isNil(item.team2?.gender))) arr.push('gender') + if (some(filtersList, (item) => !isNil(item.team1?.division?.id) || !isNil(item.team2?.division?.id))) arr.push('division') + return arr + }, [filtersList]) + + const handleSetFilters = (filterName: string, value: any) => { + const isFilterPresent = !isNil(activeFilters[filterName as keyof typeof activeFilters]) if (isFilterPresent) { - const isValuePresent = includes(activeFilter, value) + const isValuePresent = includes( + activeFilters[filterName as keyof typeof activeFilters], value, + ) const currentValue = isValuePresent - ? filter(activeFilter, (item) => item !== value) - : [...activeFilter, value] + ? filter(activeFilters[filterName as keyof typeof activeFilters], (item) => item !== value) + : [...activeFilters[filterName as keyof typeof activeFilters]!, value] return setActiveFilters({ ...activeFilters, [filterName]: currentValue, }) } - return setActiveFilters({ ...activeFilters, [filterName]: [value], @@ -207,31 +112,31 @@ export const useMatchFilters = ({ const clearFilters = (filterName: string) => (e: MouseEvent | ChangeEvent) => { e.stopPropagation() e.preventDefault() - - if (filterName === 'arena') { - setInputValue('') - } - - setActiveFilters({ + return setActiveFilters({ ...activeFilters, [filterName]: [], }) } - const isEmptyFilters = every(activeFilters, (filterItem) => isEmpty(filterItem)) + const clearAllFilters = (e: MouseEvent) => { + e.stopPropagation() + setActiveFilters({}) + } + + const isEmptyFilters = some(activeFilters, (filterItem) => isEmpty(filterItem)) + || isEmpty(activeFilters) const queryParams: TQueryParams = useMemo(() => { const params = { - arena: activeFilters.arena, - division: activeFilters.division, - gender: activeFilters.gender, - main_team: activeFilters.main_team, - round: activeFilters.round, - sport: activeFilters.sport, + 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), youth_age: activeFilters.youth_age, } - return params + return (params) }, [activeFilters]) const changeInput = (e: ChangeEvent) => { @@ -245,7 +150,7 @@ export const useMatchFilters = ({ const confirmClear = (e: MouseEvent) => { setOpenPopup(false) - clearAllFilters() + clearAllFilters(e) } const clickCancel = () => { @@ -253,14 +158,8 @@ export const useMatchFilters = ({ } const filtersSize = reduce(activeFilters, - ( - result, - value, - ) => result + size(value), 0) - - const isFiltersShown = useMemo(() => ( - size(matchesList) < 12 || selectedTournament), - [matchesList, selectedTournament]) + (result, + value) => result + size(value), 0) return { activeFilters, @@ -272,17 +171,15 @@ export const useMatchFilters = ({ closeDropdownList, confirmClear, currentFilters, - filtersListName, + filtersList, filtersSize, - getDropdownList, handleSetFilters, inputValue, isEmptyFilters, - isFiltersShown, - matchesList, + isOpenList, + openDropdownList, openPopup, queryParams, - setTournamentMatches, - toggleDropdownList, + setFilters, } } diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx index 280063fc..6076bce9 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -1,12 +1,16 @@ +import { useRecoilValue } from 'recoil' + import { isIOS } from 'config/userAgent' -import { isInSportsClient } from 'config/clients' +import { isLffClient } 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' +import { MobileMathesFilters } from 'features/HomePage/components/MobileMatchesFilters' import { HeaderStyled, ScoreSwitchWrapper, @@ -18,22 +22,31 @@ type HeaderBannerProps = { setIsOpenDownload: (open: boolean) => void, } -export const HeaderMobile = ({ isOpenDownload, setIsOpenDownload }: HeaderBannerProps) => ( - <> - { - isOpenDownload +export const HeaderMobile = ({ isOpenDownload, setIsOpenDownload }: HeaderBannerProps) => { + const isSportFilterShown = useRecoilValue(isSportFilterShownAtom) + + return ( + <> + { + isOpenDownload && !isIOS && - } - - - - - {isInSportsClient && } - - - - - - -) + } + + + + + {!isLffClient && isSportFilterShown ? ( + <> + + + + ) : null} + + + + + + + ) +} diff --git a/src/features/HomePage/Atoms/HomePageAtoms.tsx b/src/features/HomePage/Atoms/HomePageAtoms.tsx new file mode 100644 index 00000000..9e65d944 --- /dev/null +++ b/src/features/HomePage/Atoms/HomePageAtoms.tsx @@ -0,0 +1,6 @@ +import { atom } from 'recoil' + +export const isSportFilterShownAtom = atom({ + default: true, + key: 'isSportFilterShownAtom', +}) diff --git a/src/features/HomePage/components/ClearFiltersPopup/index.tsx b/src/features/HomePage/components/ClearFiltersPopup/index.tsx index 1c1ac54d..3a510448 100644 --- a/src/features/HomePage/components/ClearFiltersPopup/index.tsx +++ b/src/features/HomePage/components/ClearFiltersPopup/index.tsx @@ -1,6 +1,6 @@ import { useHeaderFiltersStore } from 'features/HeaderFilters' import { T9n } from 'features/T9n' - +import React from 'react' import { ButtonsContainer, CancelButton, diff --git a/src/features/HomePage/components/ClearFiltersPopup/styled.tsx b/src/features/HomePage/components/ClearFiltersPopup/styled.tsx index caebc2a2..690d81cb 100644 --- a/src/features/HomePage/components/ClearFiltersPopup/styled.tsx +++ b/src/features/HomePage/components/ClearFiltersPopup/styled.tsx @@ -1,120 +1,113 @@ import styled, { css } from 'styled-components/macro' import { ModalWindow } from 'features/Modal/styled' -import { OutsideClickWrapper } from 'features/OutsideClick' import { Modal as BaseModal, } from 'features/AuthServiceApp/components/RegisterPopup/styled' import { isMobileDevice } from 'config/userAgent' export const Modal = styled(BaseModal)` - ${OutsideClickWrapper} { - ${isMobileDevice - ? css`height: 100%;` - : ''} - } - ${ModalWindow} { ${isMobileDevice ? css` - min-height: 201px; - max-width: 351px; - padding: 26px 15px 33px 15px; - top: 19vh; + min-height: 201px; + max-width: 351px; + padding: 26px 19px 33px 19px; ` : css` - min-height: 220px; - max-width: 611px; - padding: 37px 0 39px 0; + min-height: 220px; + max-width: 611px; + padding: 37px 0 39px 0; `} } ` export const PopupContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-style: normal; - color: #FFFFFF; +display: flex; +flex-direction: column; +align-items: center; +justify-content: center; +font-style: normal; +color: #FFFFFF; - ${isMobileDevice - ? '' - : css`min-width: 611px;`} +${isMobileDevice + ? css`` + : css` + min-width: 611px;`} ` export const PopupTitle = styled.div` - font-weight: 700; - font-size: 24px; - line-height: 24px; - margin-bottom: 45px; - - ${isMobileDevice +font-weight: 700; +font-size: 24px; +line-height: 24px; +margin-bottom: 45px; +${isMobileDevice ? css` - font-size: 20px; - line-height: 24px; - margin-bottom: 25px;` + font-size: 20px; + line-height: 24px; + margin-bottom: 25px;` : css` - font-size: 24px; - line-height: 24px; - margin-bottom: 45px;`} + font-size: 24px; + line-height: 24px; + margin-bottom: 45px;`} ` export const PopupText = styled.div` - font-weight: 400; +font-weight: 400; - ${isMobileDevice +${isMobileDevice ? css` - font-size: 16px; - line-height: 22px; - margin-bottom: 33px;` + font-size: 16px; + line-height: 22px; +margin-bottom: 33px;` : css` - font-size: 20px; - line-height: 28px; - margin-bottom: 55px;`} + font-size: 20px; + line-height: 28px; + margin-bottom: 55px;`} ` export const ButtonsContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - - ${isMobileDevice - ? css`gap: 15px;` - : css`gap: 20px;`} +display: flex; +flex-direction: row; +align-items: center; +${isMobileDevice + ? css` + gap: 15px;` + : css` + gap: 20px; + `} ` const Button = styled.button` - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - border-radius: 5px; - color: #FFFF; - font-weight: 600; +display: flex; +flex-direction: row; +justify-content: center; +align-items: center; +border-radius: 5px; +color: #FFFF; +font-weight: 600; - ${isMobileDevice +${isMobileDevice ? css` - font-size: 16px; - line-height: 16px; - width: 149px; - height: 38px;` + font-size: 16px; +line-height: 16px; +width: 149px; +height: 38px;` : css` - font-size: 20px; - line-height: 50px; - cursor: pointer; - width: 134px; - height: 50px;`} + font-size: 20px; + line-height: 50px; + cursor: pointer; + width: 134px; + height: 50px;`} ` export const ConfirmButton = styled(Button)` - background: #294FC4; - border: 1px solid #294FC4; - filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); +background: #294FC4; +border: 1px solid #294FC4; +filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); ` - export const CancelButton = styled(Button)` - border: 1px solid #FFFFFF; - background: none; - filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); +border: 1px solid #FFFFFF; +background: none; +filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); ` diff --git a/src/features/HomePage/components/Dropdown/Dropdown.tsx b/src/features/HomePage/components/Dropdown/Dropdown.tsx new file mode 100644 index 00000000..5ba084b7 --- /dev/null +++ b/src/features/HomePage/components/Dropdown/Dropdown.tsx @@ -0,0 +1,160 @@ +import React, { useMemo } from 'react' + +import map from 'lodash/map' +import isEmpty from 'lodash/isEmpty' +import includes from 'lodash/includes' + +import { T9n } from 'features/T9n' +import { Name } from 'features/Name' + +import { useLexicsStore } from 'features/LexicsStore' +import { isMobileDevice } from 'config/userAgent' +import { + getAge, + getArena, + getDivision, + getGender, + getMainTeam, + getRound, +} from './helpers' +import { + TDropDownProps, + TFilterItem, + TItem, +} from './types' +import { + DropDownContainer, + FiltersList, + FilterItem, + Checkbox, + CommonButtonsBlock, + ClearButtonContainer, + SearchWithAllContainer, + SearchContainer, + SearchInput, + BackButton, +} from './styled' + +const Label = ({ item }: TFilterItem) => { + const isNumber = typeof item === 'number' + + return ( + <> + {isNumber ? (<>U{item}) : ()} + + ) +} + +export const DropDown = ({ + activeFilters, + changeInput, + clearFilters, + closeDropdownList, + filterList, + filterTitle, + inputValue, + setFilters, +}: TDropDownProps) => { + const { translate } = useLexicsStore() + + 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 currentActiveFilter = activeFilters[filterTitle as keyof typeof activeFilters] + + return ( + + + + + {/* {isMobileDevice && ()} */} + {isMobileDevice && closeDropdownList + && ( + + {filterTitle} + + )} + {filterTitle === 'arena' && ( + + e.stopPropagation()} + placeholder={translate('search')} + /> + + )} + + + + + + + + {!isEmpty(dropDownList) && map(dropDownList, (filterItem, i) => ( + <> + { + e.preventDefault() + e.stopPropagation() + setFilters(filterTitle, filterItem) + }} + > + {filterTitle === 'gender' + ? ( + { + e.preventDefault() + e.stopPropagation() + setFilters(filterTitle, filterItem) + }} + labelLexic={filterItem.title} + /> + ) + : ( + { + e.preventDefault() + e.stopPropagation() + setFilters(filterTitle, filterItem) + }} + label={( + + ))} + + + ) +} diff --git a/src/features/HomePage/components/Dropdown/helpers.tsx b/src/features/HomePage/components/Dropdown/helpers.tsx index ec5415e0..caffc6fc 100644 --- a/src/features/HomePage/components/Dropdown/helpers.tsx +++ b/src/features/HomePage/components/Dropdown/helpers.tsx @@ -2,18 +2,16 @@ 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 includes from 'lodash/includes' +import startsWith from 'lodash/startsWith' import toLower from 'lodash/toLower' import { Match } from 'requests' -const checkString = (text: string, searchString: string) => includes( +const checkStartString = (text: string, searchString: string) => startsWith( toLower(text), toLower(searchString), ) - export const getAge = (filterList: Array) => compact( uniq( flatten( @@ -44,31 +42,21 @@ export const getArena = (filterList: Array, inputValue: string) => filter map( filterList, (item) => item.arena, ), (item) => item?.id - && (checkString(item.name_eng, inputValue) - || checkString(item.name_rus, inputValue)), -) - -export const getSport = (filterList: Array) => uniqBy( - filter( - map( - filterList, (item) => item.sport_info, - ), (item) => item?.id, - ), 'id', + && (checkStartString(item.name_eng, inputValue) + || checkStartString(item.name_rus, inputValue)), ) -export const getRound = (filterList: Array) => uniqBy( - filter( - map( - filterList, (item) => item.round, - ), (item) => item?.id, - ), 'id', +export const getRound = (filterList: Array) => filter( + map( + filterList, (item) => item.round, + ), (item) => item?.id, ) export const getGender = (filterList: Array) => { const list = [] - 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' }) + 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' }) return list } diff --git a/src/features/HomePage/components/Dropdown/index.tsx b/src/features/HomePage/components/Dropdown/index.tsx deleted file mode 100644 index 6116d5b0..00000000 --- a/src/features/HomePage/components/Dropdown/index.tsx +++ /dev/null @@ -1,127 +0,0 @@ -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 { - TDropDownProps, - TFilterItem, - TItem, -} from './types' -import { - DropDownContainer, - FiltersList, - FilterItem, - Checkbox, - CommonButtonsBlock, - ClearButtonContainer, - SearchWithAllContainer, - SearchContainer, - SearchInput, - BackButton, -} from './styled' -import { Title } from '../MatchesFilters/styled' - -const Label = ({ item }: TFilterItem) => ( - isNumber(item) ? <>U{item} : -) - -export const DropDown = ({ - activeFilters, - changeInput, - clearFilters, - closeDropdownList, - filterTitle, - inputValue, - setFilters, -}: TDropDownProps) => { - const { translate } = useLexicsStore() - const { getDropdownList } = useHeaderFiltersStore() - - const dropdownList = getDropdownList(filterTitle, inputValue) as Array - - const currentActiveFilter = activeFilters[filterTitle as keyof typeof activeFilters] - - return ( - - - - - {isMobileDevice && closeDropdownList - && ( - - {isMobileDevice && ()} - </BackButton> - )} - {filterTitle === 'arena' && ( - <SearchContainer> - <SearchInput - onChange={changeInput} - onClick={(e) => e.stopPropagation()} - placeholder={translate('search')} - value={inputValue} - /> - </SearchContainer> - )} - <Checkbox - onChange={clearFilters(filterTitle)} - checked={isEmpty(currentActiveFilter)} - labelLexic='all' - /> - </SearchWithAllContainer> - {!isEmpty(currentActiveFilter) && ( - <ClearButtonContainer - onClick={clearFilters(filterTitle)} - > - <T9n - className='clear_button' - t='clear' - /> - </ClearButtonContainer> - )} - </CommonButtonsBlock> - - {map(dropdownList, (filterItem) => { - const filterValue = isNumber(filterItem) ? filterItem : filterItem.id - const handleClick = (e: ChangeEvent | MouseEvent) => { - e.preventDefault() - e.stopPropagation() - setFilters(filterTitle, filterValue) - } - - return ( - <FilterItem - key={filterValue} - onClick={handleClick} - > - {includes(['gender', 'sport'], filterTitle) - ? ( - <Checkbox - checked={includes(currentActiveFilter, filterValue)} - onChange={handleClick} - labelLexic={!isNumber(filterItem) ? filterItem.lexic : ''} - /> - ) - : ( - <Checkbox - checked={includes(currentActiveFilter, filterValue)} - onChange={handleClick} - label={(<Label item={filterItem} />)} - /> - )} - </FilterItem> - ) - })} - </FiltersList> - </DropDownContainer> - ) -} diff --git a/src/features/HomePage/components/Dropdown/styled.tsx b/src/features/HomePage/components/Dropdown/styled.tsx index 9817904a..4cff2a99 100644 --- a/src/features/HomePage/components/Dropdown/styled.tsx +++ b/src/features/HomePage/components/Dropdown/styled.tsx @@ -1,5 +1,4 @@ import styled, { css } from 'styled-components/macro' - import { customScrollbar } from 'features/Common' import { Checkbox as BaseCheckbox } from 'features/Common/Checkbox' import { Label } from 'features/Common/Checkbox/styled' @@ -8,67 +7,56 @@ import { isMobileDevice } from 'config/userAgent' import { NameStyled } from 'features/Name' export const DropDownContainer = styled.div` - ${isMobileDevice - ? css` border-top: 1px solid #505050;` +${isMobileDevice + ? css` + border-top: 1px solid #505050;` : css` - position: absolute; - top: 57px; - right: -24px; - background: #333333; - border-radius: 3.5px; - z-index: 10;`} + position: absolute; + top: 57px; + right: -24px; + background: #333333; + border-radius: 3.5px; + z-index: 10;`} ` - export const FiltersList = styled.ul` - overflow-y: auto; - display: flex; - flex-direction: column; - max-height: 500px; - - ${isMobileDevice - ? css` - @media (orientation: landscape){ - max-height: 300px; - } - ` - : ''} - - ${customScrollbar} +${customScrollbar} +overflow-y: auto; +display: flex; +flex-direction: column; +max-height: 500px; ` - export const FilterItem = styled.li` - ${isMobileDevice + +${isMobileDevice ? css` - max-width: 280px; - white-space: nowrap; - padding: 10px 0 10px 13px; - ` + max-width: 280px; + white-space: nowrap; + padding: 10px 0 10px 13px; + ` : css` - min-width: 286px; - white-space: nowrap; - padding: 15px 26px;`} - - :hover { - background: rgba(255, 255, 255, 0.2); - } + min-width: 286px; + white-space: nowrap; + padding: 15px 26px;`} +:hover { + background: rgba(255, 255, 255, 0.2); +} ` - export const Checkbox = styled(BaseCheckbox)` display: block; text-transform: uppercase; ${Label} { - text-transform: uppercase; + text-transform: uppercase; font-weight: 700; - ${isMobileDevice ? css` font-size: 10px; - line-height: 11px;` + line-height: 11px; + ` : css` font-size: 18px; - line-height: 16px;`} - + line-height: 16px; + `} ${NameStyled} { overflow: hidden; text-overflow: ellipsis; @@ -76,159 +64,152 @@ export const Checkbox = styled(BaseCheckbox)` } ${({ checked }) => (checked - ? '' - : css`color: rgba(255, 255, 255, 0.6);`)} + ? css`` + : css` + color: rgba(255, 255, 255, 0.6);` + )} } ${CheckboxSvg} { margin-right: 8px; + flex: 0 0 auto; - ${isMobileDevice ? css` width: 14px; height: 14px; - ` - : css` + ` + : css` width: 20px; - height: 20px;`} + height: 20px; + `} } ` - type TCommonButtonsBlock = { isArena?: boolean, } export const CommonButtonsBlock = styled.div<TCommonButtonsBlock>` - display: flex; - justify-content: space-between; - - ${({ isArena }) => (isArena +display: flex; +justify-content: space-between; +${({ isArena }) => (isArena ? css` - align-items: flex-start; - padding: ${isMobileDevice ? '8px 25px 10px 13px' : '24px 26px 15px 26px'}; - ` + align-items: flex-start; + padding: ${isMobileDevice ? '8px 25px 10px 13px' : '24px 26px 15px 26px'}; + ` : css` - align-items: center; - padding:${isMobileDevice ? '8px 25px 10px 13px' : '15px 26px'};`)} - ` - + align-items: center; + padding:${isMobileDevice ? '8px 25px 10px 13px' : '15px 26px'}; + ` + )} +` export const ClearButtonContainer = styled.div` - ${isMobileDevice +${isMobileDevice ? css` - position: absolute; - top: 14px; - right: 36px;` + position: absolute; + top: 14px; + right: 36px;` : ''} - .clear_button { - ${isMobileDevice +.clear_button { + font-style: normal; + ${isMobileDevice ? css` font-size: 10px; line-height: 12px;` : css` font-size: 18px; line-height: 22px;`} - - font-style: normal; - font-weight: 400; - letter-spacing: 0.05em; - text-transform: uppercase; - color: rgba(255, 255, 255, 0.5); - cursor: pointer; - } + font-weight: 400; + + letter-spacing: 0.05em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.5); + cursor: pointer; +} ` - export const SearchContainer = styled.div` - padding-right: ${isMobileDevice ? '0px' : '20px'}; - position: relative; +padding-right: ${isMobileDevice ? '0px' : '20px'}; +position: relative; - :before { - content: ''; - background: url(/images/search.svg) no-repeat; - position: absolute; - - ${isMobileDevice +:before { + content: ''; + background: url(/images/search.svg) no-repeat; + position: absolute; + ${isMobileDevice ? css` - left: 8px; - top: 7px; - width: 11px; - height: 11px; - ` + left: 8px; + top: 7px;` : css` - left: 13px; - top: 10px; - width: 16px; - height: 16px;`} - - z-index: 2; - } + left: 13px; + top: 13px;`} + z-index: 2; + width: 13px; + height: 11px; +} ` export const SearchInput = styled.input` - border: none; - background: transparent; - outline: none; - width: 100%; - background: #292929; - border-radius: 10px; - margin-bottom: 15px; - color: #FFFF; - - ${isMobileDevice +border: none; +background: transparent; +outline: none; +width: 100%; +background: #292929; +border-radius: 10px; +margin-bottom: 15px; + +color: #FFFF; +${isMobileDevice ? css` - height: 24px; - min-width: 242px; - padding-left: 23px;` + height: 24px; + min-width: 242px; + padding-left: 23px;` : css` - min-width: 513px; - padding-left: 36px; - height: 36px;`} + min-width: 513px; + padding-left: 36px; + height: 36px;`} +::placeholder { - ${isMobileDevice +${isMobileDevice ? css` - font-size: 10px; - line-height: 15px;` - : css` - font-size: 18px; - line-height: 22px;`} + font-size: 10px; + line-height: 15px;` + : css` + font-size: 18px; + line-height: 22px;`} - ::placeholder { - text-transform: uppercase; - letter-spacing: 0.05em; - } + text-transform: uppercase; + letter-spacing: 0.05em; +} ` - export const SearchWithAllContainer = styled.div` - flex: 1 1 auto; +flex: 1 1 auto; ` - export const BackButton = styled.div` - font-style: normal; - font-weight: 700; - font-size: 10px; - line-height: 12px; - align-items: center; - letter-spacing: 0.05em; - text-transform: uppercase; - color: #FFFFFF; - cursor: pointer; +font-style: normal; +font-weight: 700; +font-size: 10px; +line-height: 12px; +align-items: center; +letter-spacing: 0.05em; +text-transform: uppercase; +color: #FFFFFF; +cursor: pointer; +position: absolute; +top: 12px; +left: 13px; +padding-left: 24px; +:before { + content: ''; + display: block; + background: url(/images/arrowUpWhite.svg) center no-repeat; + background-size: 12px 12xp; + transform: rotate(-90deg); + right: 0; + width: 12px; + height: 12px; position: absolute; - top: 12px; - left: 13px; - padding-left: 24px; - - :before { - content: ''; - display: block; - background: url(/images/arrowUpWhite.svg) center no-repeat; - background-size: 12px 12xp; - transform: rotate(-90deg); - right: 0; - width: 12px; - height: 12px; - position: absolute; - top: 0; - left: 0; - } + top: 0; + left: 0; +} ` diff --git a/src/features/HomePage/components/Dropdown/types.tsx b/src/features/HomePage/components/Dropdown/types.tsx index 35e9ffab..77c26e29 100644 --- a/src/features/HomePage/components/Dropdown/types.tsx +++ b/src/features/HomePage/components/Dropdown/types.tsx @@ -1,4 +1,5 @@ import { MouseEvent, ChangeEvent } from 'react' +import { Match } from 'requests' import { TActiveFilters } from 'features/HeaderFilters/store/hooks/useMatchFilters' export type TDropDownProps = { @@ -6,6 +7,7 @@ export type TDropDownProps = { changeInput: (e: ChangeEvent<HTMLInputElement>) => void, clearFilters: (filterName: string) => (e: MouseEvent | ChangeEvent<HTMLInputElement>) => void, closeDropdownList?: () => void, + filterList: Array<Match>, filterTitle: string, inputValue: string, setFilters: (filterName: string, value: number) => void, @@ -13,7 +15,6 @@ export type TDropDownProps = { export type TItem = { id: number, - lexic?: string, name_eng: string, name_rus: string, } diff --git a/src/features/HomePage/components/Header/index.tsx b/src/features/HomePage/components/Header/index.tsx index de8c84c2..21b639ab 100644 --- a/src/features/HomePage/components/Header/index.tsx +++ b/src/features/HomePage/components/Header/index.tsx @@ -15,18 +15,14 @@ import { Position, } from 'features/ProfileHeader/styled' -type THeader = { - disabled: boolean, -} - -export const Header = ({ disabled }: THeader) => { +export const Header = () => { const { resetFilters, updateDate, } = useHeaderFiltersStore() return ( - <HeaderStyled disabled={disabled}> + <HeaderStyled> <Position top={client.styles.logoTop} left={client.styles.logoLeft} diff --git a/src/features/HomePage/components/HeaderFilters/index.tsx b/src/features/HomePage/components/HeaderFilters/index.tsx index 3a573967..781164e1 100644 --- a/src/features/HomePage/components/HeaderFilters/index.tsx +++ b/src/features/HomePage/components/HeaderFilters/index.tsx @@ -1,23 +1,39 @@ -import styled from 'styled-components/macro' +import { useRecoilValue } from 'recoil' + +import { isLffClient, isInSportsClient } from 'config/clients' -import { isInSportsClient } from 'config/clients' +import { SportsFilter } from 'features/SportsFilter' import { SelectFilter } from 'components/SelectFilter' import { useHeaderFiltersStore } from 'features/HeaderFilters' import { T9n } from 'features/T9n' +import { + Modal as BaseModal, +} from 'features/AuthServiceApp/components/RegisterPopup/styled' +import styled from 'styled-components/macro' +import { ModalWindow } from 'features/Modal/styled' import { ScArrow, ScHeaderFilters, - SelectFilterWrapper, + ScFilterItemsWrap, + ScFilterItem, } from './styled' +import { isSportFilterShownAtom } from '../../Atoms/HomePageAtoms' import { ClearFiltersPopup } from '../ClearFiltersPopup' import { MatchesFilters } from '../MatchesFilters' +export const Modal = styled(BaseModal)` + ${ModalWindow} { + min-height: 452px; + max-width: 280px; + padding: 37px 0 39px 0; + } +` const ClearButton = styled.span` cursor: pointer; position: absolute; - left: 36px; - top: 30px; + left: 5px; + top: 38px; font-style: normal; font-weight: 400; font-size: 18px; @@ -29,40 +45,82 @@ const ClearButton = styled.span` export const HeaderFilters = () => { const { clickClearAll, - handleClickBack, isEmptyFilters, - isFiltersShown, isShowTournament, - selectedTournament, + 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 ( <ScHeaderFilters> {!isShowTournament && ( - <SelectFilterWrapper onClick={handleClickBack}> + <> <ScArrow refIcon='Arrow' color='#ffffff' direction={90} + onClick={() => handleClickBack()} /> <SelectFilter open={false} - selectItem={selectedTournament} + selectItem={selectTournament} withArrow={false} /> - </SelectFilterWrapper> + </> )} + {!isLffClient && isShowTournament && isSportFilterShown && <SportsFilter />} + {!isEmptyFilters && ( <ClearButton onClick={clickClearAll}> <T9n t='clear' /> </ClearButton> )} - {isInSportsClient && isFiltersShown && ( + {!isLffClient && ( <> <MatchesFilters /> + <ClearFiltersPopup /> </> )} + {isShowTournament && !isInSportsClient && ( + <ScFilterItemsWrap> + <ScFilterItem + className={isActiveFilter('live') ? 'activeLive' : ''} + onClick={() => checkFilter('live')} + > + <T9n t='live' /> + </ScFilterItem> + <ScFilterItem + className={isActiveFilter('upcoming') ? 'activeButton' : ''} + onClick={() => checkFilter('upcoming')} + > + <T9n t='upcoming' /> + </ScFilterItem> + <ScFilterItem + className={isActiveFilter('completed') ? 'activeButton' : ''} + onClick={() => checkFilter('completed')} + > + <T9n t='completed' /> + </ScFilterItem> + </ScFilterItemsWrap> + )} </ScHeaderFilters> ) } diff --git a/src/features/HomePage/components/HeaderFilters/styled.tsx b/src/features/HomePage/components/HeaderFilters/styled.tsx index ef2ec3bf..ec1b9067 100644 --- a/src/features/HomePage/components/HeaderFilters/styled.tsx +++ b/src/features/HomePage/components/HeaderFilters/styled.tsx @@ -19,12 +19,6 @@ 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; @@ -51,12 +45,7 @@ export const ScFilterItem = styled.div<Props>` export const ScArrow = styled(Icon)` margin-right: 15px; - height: 20px; - - svg { - width: 20px; - height: 12px; - } + cursor: pointer; :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 4a822d1f..15ff7714 100644 --- a/src/features/HomePage/components/MatchesFilters/index.tsx +++ b/src/features/HomePage/components/MatchesFilters/index.tsx @@ -1,15 +1,12 @@ +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 { FilterContainer, FiltersCount, @@ -18,27 +15,17 @@ import { ActiveFilter, CloseButton, } from './styled' -import { DropDown } from '../Dropdown' -import { TItem } from '../Dropdown/types' +import { DropDown } from '../Dropdown/Dropdown' import { checkSize, truncateString } from './helpers' -import { Title } from '../MatchesFilters/styled' type TProps = { - dropdownList: Array<TItem | number>, filterTitle: string, - item: number, + item: any, } -const ActiveFilterText = ({ - dropdownList, - filterTitle, - item, -}: TProps) => { - const currentItem = find(dropdownList, { id: item }) as TItem - const name = useName(currentItem) - - if (includes(['gender', 'sport'], filterTitle)) return <T9n t={currentItem.lexic!} /> - +const ActiveFilterText = ({ filterTitle, item }: TProps) => { + const name = useName(item) + if (filterTitle === 'gender') return (<T9n t={item.title} />) return ( <> {truncateString(name)} @@ -55,18 +42,17 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => { changeInput, clearFilters, currentFilters, - filtersListName, + filtersList, filtersSize, - getDropdownList, handleSetFilters, inputValue, - matchesList, - toggleDropdownList, + isOpenList, + openDropdownList, } = useHeaderFiltersStore() return ( <MatchFiltersContainer> - {map(currentFilters, (filterTitle) => { + {map(currentFilters, (filterTitle, index) => { const currentActiveFilters = activeFilters[filterTitle as keyof typeof activeFilters] const isShrinkFilters = filtersSize >= 7 || size(currentActiveFilters) >= 7 @@ -76,27 +62,20 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => { ? [currentActiveFilters[0], currentActiveFilters[1]] : currentActiveFilters - const dropdownList = getDropdownList(filterTitle, '') as Array<TItem | number> - return ( <FilterContainer - active={filtersListName === filterTitle} - key={filterTitle} - onClick={toggleDropdownList(filterTitle)} + active={isOpenList === filterTitle} + key={index} + onClick={openDropdownList(filterTitle)} > - <Title t={filterTitle} /> + {/* <T9n className='filter_title' t={filterTitle} /> */} + <span className='filter_title'>{filterTitle}</span> <ActiveFilters> - {map(shrinkedActiveFilters, (item) => ( - <ActiveFilter key={item}> - {filterTitle === 'youth_age' + {map(shrinkedActiveFilters, (item, i) => ( + <ActiveFilter key={i}> + {typeof item === 'number' ? `U${item}` - : ( - <ActiveFilterText - dropdownList={dropdownList} - filterTitle={filterTitle} - item={item} - /> - )} + : (<ActiveFilterText filterTitle={filterTitle} item={item} />)} <CloseButton onClick={(e) => { e.stopPropagation() handleSetFilters(filterTitle, item) @@ -111,14 +90,15 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => { </FiltersCount> )} </ActiveFilters> - {filtersListName === filterTitle && !isNil(matchesList) && !isMobileDevice && ( + {isOpenList === filterTitle && !isNil(filtersList) && !isMobileDevice && ( <DropDown - activeFilters={activeFilters} changeInput={changeInput} - clearFilters={clearFilters} - filterTitle={filterTitle} inputValue={inputValue} + clearFilters={clearFilters} + activeFilters={activeFilters} setFilters={handleSetFilters} + filterTitle={filterTitle} + filterList={filtersList} /> )} </FilterContainer> diff --git a/src/features/HomePage/components/MatchesFilters/styled.tsx b/src/features/HomePage/components/MatchesFilters/styled.tsx index 62c0aa72..656c771b 100644 --- a/src/features/HomePage/components/MatchesFilters/styled.tsx +++ b/src/features/HomePage/components/MatchesFilters/styled.tsx @@ -1,25 +1,25 @@ -import styled, { css } from 'styled-components/macro' - import { isMobileDevice } from 'config/userAgent' -import { T9n } from 'features/T9n' +import styled, { css } from 'styled-components/macro' export const MatchFiltersContainer = styled.div` - display: flex; - flex-wrap: no-wrap; - justify-content: flex-end; - width: 100%; +display: flex; +flex-wrap: no-wrap; +justify-content: flex-end; +width: 100%; - ${isMobileDevice +${isMobileDevice ? css` - flex-direction: column; - padding-right: 16px; - border-top: 1px solid #505050; - padding-top: 19px; - gap: 22px; - ` : css` - gap: 30px; - flex-direction: row; - padding-right: 10px;`} + flex-direction: column; + padding-right: 16px; + border-top: 1px solid #505050; + padding-top: 19px; + gap: 22px; + ` + : css` + gap: 30px; + flex-direction: row; + padding-right: 25px; + `} ` type TFilterContainer = { @@ -27,145 +27,143 @@ type TFilterContainer = { } export const FilterContainer = styled.div<TFilterContainer>` - font-style: normal; - font-weight: 700; - letter-spacing: 0.05em; - text-transform: uppercase; - position: relative; - display: flex; - - ${isMobileDevice +font-style: normal; +font-weight: 700; +letter-spacing: 0.05em; +text-transform: uppercase; +position: relative; +display: flex; + +${isMobileDevice ? css` - color:#8b8b8b; - font-size: 10px; - line-height: 14px; - padding-left: 19px; - flex-direction: row; - align-items: center; - ` + color:#8b8b8b; + font-size: 10px; + line-height: 14px; + padding-left: 19px; + flex-direction: row; + align-items: center; +` : css` - font-size: 18px; - line-height: 34px; - height: 34px; - color: #FFFFFF; - padding-left: 32px; - flex-direction: column;`} - - ${({ active }) => active && !isMobileDevice && css` - :after { - content: ''; - display: block; - position: fixed; - background: #000000; - opacity: 0.7; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - z-index: 9; - cursor: auto; - }`} + font-size: 18px; + line-height: 34px; + height: 34px; + color: #FFFFFF; + padding-left: 32px; + flex-direction: column;`} - :before { - display: block; - position: absolute; - top: 0; - content: ''; - height: 100%; - cursor: pointer; +.filter_title { + cursor: pointer; + ${isMobileDevice && 'margin-right: 6px;'} +} +${({ active }) => active && !isMobileDevice && css` +:after { + content: ''; + display: block; + position: fixed; + background: #000000; + opacity: 0.7; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 9; + cursor: auto; +}`} + + +:before { + display: block; + position: absolute; + top: 0; + content: ''; + height: 100%; + cursor: pointer; - ${({ active }) => (active + ${({ active }) => (active ? css` - z-index: 12; - ` + z-index: 12; + ` : css` - transform: rotate(180deg); - `)} + transform: rotate(180deg); + `)} - ${isMobileDevice + ${isMobileDevice ? css` - background: url(/images/arrowUpWhite.svg) center no-repeat; - transform: rotate(90deg); - right: 0; - width: 10px; - ` + background: url(/images/arrowUpWhite.svg) center no-repeat; + transform: rotate(90deg); + right: 0; + width: 10px; + ` : css` - background: url(/images/arrowUpWhite.svg) center no-repeat; - background-size: 20px 12px; - left: 0; - width: 20px; - `} + background: url(/images/arrowUpWhite.svg) center no-repeat; + background-size: 20px 12px; + left: 0; + width: 20px; + `} + + +} + span { + ${({ active }) => (active && css` + z-index:12; + position: relative; + `)} } - span { - ${({ active }) => (active && css` - z-index: 12; - position: relative; - `)} - } ` export const ActiveFilters = styled.div` - display: flex; - flex-direction: row; - - ${isMobileDevice +display: flex; +flex-direction: row; +${isMobileDevice ? css` - gap: 5px;` + gap: 5px;` : css` - gap: 10px;`} + gap: 10px;`} ` - export const CloseButton = styled.div` - background: url(/images/closeWhite.svg) no-repeat; +background: url(/images/closeWhite.svg) no-repeat; - ${isMobileDevice +${isMobileDevice ? css` - width: 7px; - height: 7px; - background-size: 7px;` + width: 7px; + height: 7px; + background-size: 7px;` : css` - height: 9px; - width: 9px; - background-size: 10px;`} -` + height: 9px; + width: 9px; + background-size: 10px;`} +` export const ActiveFilter = styled.span` - font-style: normal; - font-weight: 600; - display: flex; - align-items: center; - letter-spacing: 0.05em; - text-transform: uppercase; - color: #FFFFFF; - border: 1px solid #FFFFFF; - border-radius: 16px; - gap: 5px; - cursor: pointer; - - ${isMobileDevice +font-style: normal; +font-weight: 600; +display: flex; +align-items: center; +letter-spacing: 0.05em; +text-transform: uppercase; +color: #FFFFFF; +border: 1px solid #FFFFFF; +border-radius: 16px; +gap: 5px; +cursor: pointer; +${isMobileDevice ? css` - padding: 0 5px; - font-size: 10px; - line-height: 12px;` + padding: 0 5px; + font-size: 10px; + line-height: 12px;` : css` - padding: 0 10px; - font-size: 14px; - height: 17px; - - :hover { - background: #ffff; - color: #000000; + padding: 0 10px; + font-size: 14px; + height: 17px; + :hover { + background: #ffff; + color: #000000; + + ${CloseButton} { + background: url(/images/closeBlack.svg) no-repeat; + } + }`} + - ${CloseButton} { - background: url(/images/closeBlack.svg) no-repeat; - } - }`} ` - export const FiltersCount = styled(ActiveFilter)`` - -export const Title = styled(T9n)` - cursor: pointer; - - ${isMobileDevice ? css`margin-right: 6px;` : ''} -` diff --git a/src/features/HomePage/components/MobileMatchesFilters/index.tsx b/src/features/HomePage/components/MobileMatchesFilters/index.tsx index b21808f6..2547c38d 100644 --- a/src/features/HomePage/components/MobileMatchesFilters/index.tsx +++ b/src/features/HomePage/components/MobileMatchesFilters/index.tsx @@ -1,23 +1,19 @@ -import { useState } from 'react' - -import isEmpty from 'lodash/isEmpty' -import isNil from 'lodash/isNil' - import { useHeaderFiltersStore } from 'features/HeaderFilters' import { T9n } from 'features/T9n' - +import React, { useState } from 'react' +import isEmpty from 'lodash/isEmpty' +import isNil from 'lodash/isNil' import { MatchesFilters } from '../MatchesFilters' import { ClearButton, CloseButton, FilterContainer, - FiltersCount, Modal, } from './styled' -import { DropDown } from '../Dropdown' +import { DropDown } from '../Dropdown/Dropdown' import { ClearFiltersPopup } from '../ClearFiltersPopup' -export const MobileMatchesFilters = () => { +export const MobileMathesFilters = () => { const [isOpen, setOpen] = useState(false) const { activeFilters, @@ -26,12 +22,11 @@ export const MobileMatchesFilters = () => { clickClearAll, closeDropdownList, currentFilters, - filtersListName, + filtersList, filtersSize, handleSetFilters, inputValue, - isEmptyFilters, - matchesList, + isOpenList, } = useHeaderFiltersStore() const openFilters = () => setOpen(true) @@ -51,14 +46,14 @@ export const MobileMatchesFilters = () => { <> <FilterContainer active={filtersSize !== 0} onClick={openFilters}> <T9n t='filter' /> - {filtersSize !== 0 && <FiltersCount>{` ${filtersSize}`}</FiltersCount>} + {filtersSize !== 0 && ` ${filtersSize}`} </FilterContainer> <Modal isOpen={isOpen} withCloseButton={false}> - {!filtersListName + {isEmpty(isOpenList) ? ( <> <MatchesFilters isMobile /> - {!isEmptyFilters && ( + {filtersSize !== 0 && ( <ClearButton onClick={clearAllFilters}> <T9n t='clear' /> </ClearButton> @@ -68,15 +63,16 @@ export const MobileMatchesFilters = () => { ) : ( <> - {!isNil(matchesList) && ( + {!isNil(filtersList) && ( <DropDown - activeFilters={activeFilters} changeInput={changeInput} - clearFilters={clearFilters} - closeDropdownList={closeDropdownList} - filterTitle={filtersListName} inputValue={inputValue} + clearFilters={clearFilters} + activeFilters={activeFilters} setFilters={handleSetFilters} + filterTitle={isOpenList} + filterList={filtersList} + closeDropdownList={closeDropdownList} /> )} <CloseButton onClick={closeFilters} /> diff --git a/src/features/HomePage/components/MobileMatchesFilters/styled.tsx b/src/features/HomePage/components/MobileMatchesFilters/styled.tsx index 77b0961f..1b40d4f8 100644 --- a/src/features/HomePage/components/MobileMatchesFilters/styled.tsx +++ b/src/features/HomePage/components/MobileMatchesFilters/styled.tsx @@ -1,32 +1,27 @@ import styled, { css } from 'styled-components/macro' -import { OutsideClickWrapper } from 'features/OutsideClick' import { ModalWindow } from 'features/Modal/styled' import { Modal as BaseModal, } from 'features/AuthServiceApp/components/RegisterPopup/styled' export const Modal = styled(BaseModal)` - ${OutsideClickWrapper} { - height: 100%; - } - ${ModalWindow} { min-height: auto; + max-height: 452px; max-width: 293px; padding: 35px 0 9px 0; - top: 4vh; } ` export const CloseButton = styled.div` - position: absolute; - width: 13px; - height: 13px; - background:url(/images/closeWhite.svg) no-repeat; - background-size: 13px; - top: 13px; - right: 13px; +position: absolute; +width: 13px; +height: 13px; +background:url(/images/closeWhite.svg) no-repeat; +background-size: 13px; +top: 13px; +right: 13px; ` type TFilterProps = { @@ -34,47 +29,43 @@ type TFilterProps = { } export const FilterContainer = styled.div<TFilterProps>` - font-style: normal; - font-weight: 700; - font-size: 10px; - line-height: 14px; - letter-spacing: 0.05em; - text-transform: uppercase; - color: #FFFFFF; - padding-left: 22px; - position: relative; +font-style: normal; +font-weight: 700; +font-size: 10px; +line-height: 12px; +letter-spacing: 0.05em; +text-transform: uppercase; +color: #FFFFFF; +padding-left: 22px; +position: relative; +margin-left: 20px; - :before{ - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - width:14px; - height: 14px; - background-size: 14px 14px; - - ${({ active }) => (active +:before{ + content: ''; + display: block; + position: absolute; + left: 0; + top: 0; + width:14px; + height: 14px; + ${({ active }) => (active ? css` - background: url(/images/filter-white.svg) no-repeat;` + background: url(/images/filter-white.svg) no-repeat;` : css` - background: url(/images/filter-gray.svg) no-repeat;`)} - } + background: url(/images/filter-gray.svg) no-repeat;`)} + background-size: 14px 14px; +} ` export const ClearButton = styled.div` - font-style: normal; - position: absolute; - top: 14px; - right: 36px; - font-size: 10px; - line-height: 12px; - font-weight: 400; - letter-spacing: 0.05em; - text-transform: uppercase; - color: rgba(255,255,255,0.5); -` - -export const FiltersCount = styled.span` - font-weight: 400; +font-style: normal; +position: absolute; +top: 14px; +right: 36px; +font-size: 10px; +line-height: 12px; +font-weight: 400; +letter-spacing: 0.05em; +text-transform: uppercase; +color: rgba(255,255,255,0.5); ` diff --git a/src/features/HomePage/hooks.tsx b/src/features/HomePage/hooks.tsx index 16875978..6f14c4d1 100644 --- a/src/features/HomePage/hooks.tsx +++ b/src/features/HomePage/hooks.tsx @@ -6,12 +6,19 @@ 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 * @@ -31,6 +38,7 @@ 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 || '') @@ -66,6 +74,12 @@ export const useHomePage = () => { }, ), [selectedDate, queryParams]) + useEffect(() => { + if (client.name === ClientNames.Facr) { + setIsSportFilterShown(false) + } + }, [setIsSportFilterShown]) + return { fetchMatches, handleCloseConfirmPopup, diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx index 178a1346..6f9fd6ca 100644 --- a/src/features/HomePage/index.tsx +++ b/src/features/HomePage/index.tsx @@ -7,7 +7,6 @@ import { ConfirmPopup } from 'features/AuthServiceApp/components/ConfirmPopup' import { Matches } from 'features/Matches' import { HeaderFiltersStore, - useHeaderFiltersStore, } from 'features/HeaderFilters' import { @@ -31,7 +30,6 @@ const Home = () => { isShowConfirmPopup, setIsOpenDownload, } = useHomePage() - const { filtersListName } = useHeaderFiltersStore() return ( <PageWrapper> @@ -41,7 +39,7 @@ const Home = () => { setIsOpenDownload={setIsOpenDownload} /> ) : ( - <Header disabled={Boolean(filtersListName)} /> + <Header /> )} <Main> <UserFavorites /> diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx index 9a5a6fd6..f218cd87 100644 --- a/src/features/Matches/helpers/prepareMatches.tsx +++ b/src/features/Matches/helpers/prepareMatches.tsx @@ -10,7 +10,6 @@ import { getMatchAccess } from './getMatchClickAction' const prepareMatch = (match: Match) => { const { - arena, calc, country, country_id, @@ -22,7 +21,6 @@ const prepareMatch = (match: Match) => { live, preview, previewURL, - round, sport, sport_info, storage, @@ -34,7 +32,6 @@ const prepareMatch = (match: Match) => { const date = parseDate(matchDate) return { access: getMatchAccess(match), - arena, calc, countryId: country_id, countryInfo: country, @@ -47,7 +44,6 @@ const prepareMatch = (match: Match) => { live, preview, previewURL, - round, sportInfo: sport_info, sportType: sport, storage, diff --git a/src/features/OutsideClick/index.tsx b/src/features/OutsideClick/index.tsx index ff97d3a1..ddfa62aa 100644 --- a/src/features/OutsideClick/index.tsx +++ b/src/features/OutsideClick/index.tsx @@ -11,7 +11,7 @@ type Props = { onClick: (event?: MouseEvent) => void, } -export const OutsideClickWrapper = styled.div`` +const OutsideClickWrapper = styled.div`` export const OutsideClick = ({ children, diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index 084bbf3e..2c1f2b2f 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -44,7 +44,6 @@ export const defaultHeaderStyles = ( type HeaderProps = { color?: string, - disabled?: boolean, headerImage?: string | null, height?: number, isMatchPage?: boolean, @@ -64,12 +63,6 @@ export const HeaderStyled = styled.header<HeaderProps>` ` : '' )} - ${({ disabled }) => ( - disabled ? css` - pointer-events: none; - ` : '' - )} - ${({ isMatchPage }) => css` ${isMobileDevice ? css` @@ -78,6 +71,7 @@ export const HeaderStyled = styled.header<HeaderProps>` ` : ''} `} + ` type Props = { @@ -111,7 +105,7 @@ export const HeaderLogo = styled(Logo)` transform: translateX(-50%); position: absolute; - ${client.styles.matchPageMobileHeaderLogo} + ${client.styles.matchPageMobileHeaderLogo} ` : ''} ` : css` ${isMobileDevice ? css` @@ -125,6 +119,8 @@ export const HeaderLogo = styled(Logo)` } ` : ''} `)} + + ` type PositionProps = { diff --git a/src/features/TournamentList/components/CollapseTournament/index.tsx b/src/features/TournamentList/components/CollapseTournament/index.tsx index 7d5167d8..d6b8d406 100644 --- a/src/features/TournamentList/components/CollapseTournament/index.tsx +++ b/src/features/TournamentList/components/CollapseTournament/index.tsx @@ -35,7 +35,7 @@ export const CollapseTournament = ({ const { setIsShowTournament, setSelectedLeague, - setSelectedTournament, + setSelectTournament, } = useHeaderFiltersStore() const { countryId, @@ -47,7 +47,7 @@ export const CollapseTournament = ({ const handleClick = () => { setIsShowTournament(false) setSelectedLeague([tournament.id]) - setSelectedTournament(tournament) + setSelectTournament(tournament) } const { countryInfo, sportInfo } = tournamentMatches[0] diff --git a/src/requests/getMatches/getHomeMatches.tsx b/src/requests/getMatches/getHomeMatches.tsx index 194c5b4a..f1519251 100644 --- a/src/requests/getMatches/getHomeMatches.tsx +++ b/src/requests/getMatches/getHomeMatches.tsx @@ -15,7 +15,6 @@ export type TQueryParams = { gender?: Array<number>, main_team?: Array<number>, round?: Array<number>, - sport?: Array<number>, youth_age?: Array<number>, } @@ -46,7 +45,6 @@ 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 75bbc9c8..ff130b6f 100644 --- a/src/requests/getMatches/types.tsx +++ b/src/requests/getMatches/types.tsx @@ -12,7 +12,6 @@ export type TDefaultType = { name_eng: string, name_rus: string, } - type Team = { division?: TDefaultType, // Дивизион gender?: number, // ИД пола