fix(ott-2710): test fixes

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`

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<TournamentType>()
   const [sportIds, setSportIds] = useState<any>()
+  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,

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<TDefaultType>,
-  division?: Array<TDefaultType>,
-  gender?: Array<TDefaultType>,
-  main_team?: Array<TDefaultType>,
-  round?: Array<TDefaultType>,
-  youth_age?: Array<number>,
+  [key: string]: Array<number>,
 }
 export type TDefaultType = {
   id: number,
@@ -49,7 +54,7 @@ export type TDefaultType = {
 }
 
 export const useMatchFilters = (selectedDate: Date) => {
-  const [filtersList, setFiltersList] = useState<Array<Match>>()
+  const [filtersList, setFiltersList] = useState<Array<Match>>([])
   const [isOpenList, setOpenList] = useState<string>('')
   const [activeFilters, setActiveFilters] = useState<TActiveFilters>({})
   const [inputValue, setInputValue] = useState<string>('')
@@ -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<HTMLInputElement>) => {
@@ -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,

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
         && <SmartBanner setIsOpenDownload={setIsOpenDownload} />
-      }
-      <HeaderStyled>
-        <HeaderMenu />
-        <DateFilter />
-        <ScSportsWrapper>
-          {!isLffClient && isSportFilterShown ? (
-            <>
-              <SportsFilter />
-              <MobileMatchesFilters />
-            </>
-          ) : null}
-          <ScoreSwitchWrapper>
-            <ScoreSwitch />
-          </ScoreSwitchWrapper>
-        </ScSportsWrapper>
-      </HeaderStyled>
-    </>
-  )
-}
+    }
+    <HeaderStyled>
+      <HeaderMenu />
+      <DateFilter />
+      <ScSportsWrapper>
+        {isInSportsClient && <MobileMatchesFilters />}
+        <ScoreSwitchWrapper>
+          <ScoreSwitch />
+        </ScoreSwitchWrapper>
+      </ScSportsWrapper>
+    </HeaderStyled>
+  </>
+)

src/features/HomePage/Atoms/HomePageAtoms.tsx

@@ -1,6 +0,0 @@
-import { atom } from 'recoil'
-
-export const isSportFilterShownAtom = atom({
-  default: true,
-  key: 'isSportFilterShownAtom',
-})

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<Match>) => compact(
   uniq(
     flatten(
@@ -46,17 +48,27 @@ export const getArena = (filterList: Array<Match>, inputValue: string) => filter
       || checkStartString(item.name_rus, inputValue)),
 )
 
-export const getRound = (filterList: Array<Match>) => filter(
-  map(
-    filterList, (item) => item.round,
-  ), (item) => item?.id,
+export const getSport = (filterList: Array<Match>) => uniqBy(
+  filter(
+    map(
+      filterList, (item) => item.sport_info,
+    ), (item) => item?.id,
+  ), 'id',
+)
+
+export const getRound = (filterList: Array<Match>) => uniqBy(
+  filter(
+    map(
+      filterList, (item) => item.round,
+    ), (item) => item?.id,
+  ), 'id',
 )
 
 export const getGender = (filterList: Array<Match>) => {
   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
 }

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}</>) : (<Name nameObj={item} />)}
-    </>
-  )
-}
+const Label = ({ item }: TFilterItem) => (
+  isNumber(item) ? <>U{item}</> : <Name nameObj={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<TItem> | Array<any>
+  const dropdownList = getDropdownList(filterTitle, inputValue) as Array<TItem | number>
 
   const currentActiveFilter = activeFilters[filterTitle as keyof typeof activeFilters]
 
@@ -115,45 +87,37 @@ export const DropDown = ({
           </ClearButtonContainer>
         </CommonButtonsBlock>
 
-        {!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 (
             <FilterItem
-              key={i}
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                setFilters(filterTitle, filterItem)
-              }}
+              key={filterValue}
+              onClick={handleClick}
             >
-              {filterTitle === 'gender'
+              {includes(['gender', 'sport'], filterTitle)
                 ? (
                   <Checkbox
-                    checked={includes(currentActiveFilter,
-                      filterItem || filterItem.name_eng
-                        || filterItem.name_rus)}
-                    onChange={(e) => {
-                      e.preventDefault()
-                      e.stopPropagation()
-                      setFilters(filterTitle, filterItem)
-                    }}
-                    labelLexic={filterItem.title}
+                    checked={includes(currentActiveFilter, filterValue)}
+                    onChange={handleClick}
+                    labelLexic={!isNumber(filterItem) ? filterItem.lexic : ''}
                   />
                 )
                 : (
                   <Checkbox
-                    checked={includes(currentActiveFilter,
-                      filterItem || filterItem.name_eng || filterItem.name_rus)}
-                    onChange={(e) => {
-                      e.preventDefault()
-                      e.stopPropagation()
-                      setFilters(filterTitle, filterItem)
-                    }}
+                    checked={includes(currentActiveFilter, filterValue)}
+                    onChange={handleClick}
                     label={(<Label item={filterItem} />)}
                   />
                 )}
             </FilterItem>
-          </>
-        ))}
+          )
+        })}
       </FiltersList>
     </DropDownContainer>
   )

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<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,
@@ -15,6 +13,7 @@ export type TDropDownProps = {
 
 export type TItem = {
   id: number,
+  lexic?: string,
   name_eng: string,
   name_rus: string,
 }

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 (
     <ScHeaderFilters>
       {!isShowTournament && (
-        <>
+        <SelectFilterWrapper onClick={handleClickBack}>
           <ScArrow
             refIcon='Arrow'
             color='#ffffff'
             direction={90}
-            onClick={() => handleClickBack()}
           />
           <SelectFilter
             open={false}
             selectItem={selectTournament}
             withArrow={false}
           />
-        </>
+        </SelectFilterWrapper>
       )}
-      {!isLffClient && isShowTournament && isSportFilterShown && <SportsFilter />}
-
       {!isEmptyFilters && (
         <ClearButton onClick={clickClearAll}>
           <T9n t='clear' />
         </ClearButton>
       )}
-      {!isLffClient && (
+      {isInSportsClient && isFiltersShown && (
         <>
           <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>
   )
 }

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<Props>`
 
 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);; */

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<TItem | number>,
   filterTitle: string,
-  item: any,
+  item: number,
 }
 
-const ActiveFilterText = ({ filterTitle, item }: TProps) => {
-  const name = useName(item)
-  if (filterTitle === 'gender') return (<T9n t={item.title} />)
+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!} />
+
   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 (
     <MatchFiltersContainer>
-      {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<TItem | number>
+
         return (
           <FilterContainer
             active={isOpenList === filterTitle}
-            key={index}
+            key={filterTitle}
             onClick={openDropdownList(filterTitle)}
           >
             {/* <T9n className='filter_title' t={filterTitle} /> */}
             <span className='filter_title'>{filterTitle}</span>
             <ActiveFilters>
-              {map(shrinkedActiveFilters, (item, i) => (
-                <ActiveFilter key={i}>
-                  {typeof item === 'number'
+              {map(shrinkedActiveFilters, (item) => (
+                <ActiveFilter key={item}>
+                  {filterTitle === 'youth_age'
                     ? `U${item}`
-                    : (<ActiveFilterText filterTitle={filterTitle} item={item} />)}
+                    : (
+                      <ActiveFilterText
+                        dropdownList={dropdownList}
+                        filterTitle={filterTitle}
+                        item={item}
+                      />
+                    )}
                   <CloseButton onClick={(e) => {
                     e.stopPropagation()
                     handleSetFilters(filterTitle, item)
@@ -100,7 +119,6 @@ export const MatchesFilters = ({ isMobile }: TFiltersProps) => {
                 activeFilters={activeFilters}
                 setFilters={handleSetFilters}
                 filterTitle={filterTitle}
-                filterList={filtersList}
               />
             )}
           </FilterContainer>

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)``

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}
                     />
                   )}

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: '';

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,

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)

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:

src/requests/getMatches/getHomeMatches.tsx

@@ -15,6 +15,7 @@ export type TQueryParams = {
   gender?: Array<number>,
   main_team?: Array<number>,
   round?: Array<number>,
+  sport?: Array<number>,
   youth_age?: Array<number>,
 }
 
@@ -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],
     },

src/requests/getMatches/types.tsx

@@ -12,6 +12,7 @@ export type TDefaultType = {
   name_eng: string,
   name_rus: string,
 }
+
 type Team = {
   division?: TDefaultType, // Дивизион
   gender?: number, // ИД пола