fix(#2341): fix click on tournament

src/components/SelectFilter/index.tsx

@@ -1,20 +1,34 @@
-import { T9n } from 'features/T9n'
+import { useName } from 'features/Name'
 
-import { ScSelectFilter, ScArrow } from './styled'
+import { TournamentType } from 'requests/getMatches/types'
+
+import {
+  ScSelectFilter,
+  ScArrow,
+  ScTournamentName,
+} from './styled'
 
 type SportsFilterProps = {
-  onModalOpen: () => void,
+  onModalOpen?: () => void,
   open: boolean,
-  selectItem: string,
+  selectItem: TournamentType | undefined,
+  withArrow?: boolean,
 }
 
 export const SelectFilter = ({
   onModalOpen,
   open,
   selectItem,
-}: SportsFilterProps) => (
-  <ScSelectFilter onClick={onModalOpen}>
-    <T9n t={selectItem} />
-    <ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />
-  </ScSelectFilter>
-)
+  withArrow,
+}: SportsFilterProps) => {
+// eslint-disable-next-line
+    const tournamentName = selectItem && useName(selectItem)
+  return (
+    <ScSelectFilter onClick={onModalOpen}>
+      <ScTournamentName>{tournamentName}</ScTournamentName>
+      {withArrow && (
+        <ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />
+      )}
+    </ScSelectFilter>
+  )
+}

src/components/SelectFilter/styled.tsx

@@ -24,3 +24,6 @@ export const ScSelectFilter = styled.div`
 export const ScArrow = styled(Icon)`
   margin-left: 14px;
 `
+
+export const ScTournamentName = styled.div`
+`

src/features/HeaderFilters/store/hooks/index.tsx

@@ -7,6 +7,8 @@ import {
 import { useLocation } from 'react-router-dom'
 import { isToday } from 'date-fns'
 
+import type { TournamentType } from 'requests/getMatches/types'
+
 import { useQueryParamStore } from 'hooks'
 
 import { filterKeys } from '../config'
@@ -27,6 +29,7 @@ export const useFilters = () => {
   const [selectedLeague, setSelectedLeague] = useState<Array<string | number>>(['all_competitions'])
   const [selectedFilters, setSelectedFilters] = useState<Array<string>>([])
   const [isShowTournament, setIsShowTournament] = useState(true)
+  const [selectTournament, setSelectTournament] = useState<TournamentType>()
   const [sportIds, setSportIds] = useState<any>()
   const isTodaySelected = isToday(selectedDate)
 
@@ -47,11 +50,13 @@ export const useFilters = () => {
   const store = useMemo(() => ({
     isShowTournament,
     isTodaySelected,
+    selectTournament,
     selectedDate,
     selectedFilters,
     selectedLeague,
     selectedSport,
     setIsShowTournament,
+    setSelectTournament,
     setSelectedDate,
     setSelectedFilters,
     setSelectedLeague,
@@ -65,6 +70,8 @@ export const useFilters = () => {
     selectedFilters,
     selectedLeague,
     selectedSport,
+    selectTournament,
+    setSelectTournament,
     setIsShowTournament,
     setSelectedDate,
     setSelectedFilters,

src/features/HomePage/components/HeaderFilters/index.tsx

@@ -1,4 +1,5 @@
 import { SportsFilter } from 'features/SportsFilter'
+import { SelectFilter } from 'components/SelectFilter'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 import { T9n } from 'features/T9n'
 
@@ -13,10 +14,10 @@ export const HeaderFilters = () => {
   const {
     isShowTournament,
     selectedFilters,
+    selectTournament,
     setIsShowTournament,
     setSelectedFilters,
     setSelectedLeague,
-    setSelectedSport,
   } = useHeaderFiltersStore()
 
   const isActiveFilter = (filterItem: string) => selectedFilters.indexOf(filterItem) >= 0
@@ -30,39 +31,51 @@ export const HeaderFilters = () => {
   const handleClickBack = () => {
     setIsShowTournament(true)
     setSelectedFilters([])
-    setSelectedSport(['all_sports'])
     setSelectedLeague(['all_competitions'])
   }
 
   return (
     <ScHeaderFilters>
-      {!isShowTournament && <ScArrow refIcon='Arrow' color='#ffffff' direction={90} onClick={() => handleClickBack()} />}
-      <SportsFilter />
-      {/* <SelectFilter
-        onModalOpen={() => console.log(1)}
-        open={false}
-        selectItem='all_competitions'
-      /> */}
-      <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>
+      {!isShowTournament && (
+        <>
+          <ScArrow
+            refIcon='Arrow'
+            color='#ffffff'
+            direction={90}
+            onClick={() => handleClickBack()}
+          />
+          <SelectFilter
+            // onModalOpen={() => console.log()}
+            open={false}
+            selectItem={selectTournament}
+            withArrow={false}
+          />
+        </>
+      )}
+      {isShowTournament && <SportsFilter />}
+
+      {isShowTournament && (
+        <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/Matches/hooks.tsx

@@ -21,7 +21,7 @@ export type Props = {
   fetch: (limit: number, offset: number) => Promise<MatchesBySection>,
 }
 
-const MATCHES_LIMIT = isMobileDevice ? 1000 : 60
+const MATCHES_LIMIT = 1000
 
 const initialState = {
   broadcast: [],

src/features/MatchesGrid/index.tsx

@@ -23,14 +23,12 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => {
     selectedLeague,
   } = useHeaderFiltersStore()
 
-  const filteredMatches = isHomePage && selectedFilters?.length
+  const filteredMatches = isHomePage && selectedFilters.length
     ? matches.filter((match) => (
       ((match.live
       && selectedFilters.indexOf('live') >= 0)
       || (selectedFilters.indexOf('upcoming') >= 0 && match.date > new Date())
       || (selectedFilters.indexOf('completed') >= 0 && match.is_finished))))
-      .filter((match) => ((selectedLeague.indexOf(match.tournament.id) >= 0
-      || selectedLeague[0] === 'all_competitions')))
     : matches
 
   return (
@@ -38,7 +36,8 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => {
       {isHomePage && isShowTournament ? (
         <TournamentList matches={filteredMatches} />
       ) : (
-        filteredMatches.map((match) => <MatchCard key={match.id} match={match} />)
+        filteredMatches.filter((match) => ((selectedLeague.indexOf(match.tournament.id) >= 0
+        || selectedLeague[0] === 'all_competitions'))).map((match) => <MatchCard key={match.id} match={match} />)
       )}
     </Wrapper>
   )

src/features/SportsFilter/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 
@@ -31,7 +31,8 @@ export const SportsFilter = () => {
       ])
     } else {
       setSelectedSport((prev) => [
-        ...prev.filter((item) => item !== 'all_sports' && item === sport),
+        ...prev.filter((item) => item !== 'all_sports'
+        && item !== sport),
       ])
     }
     setSelectedLeague(['all_competitions'])
@@ -47,6 +48,10 @@ export const SportsFilter = () => {
     setIsOpen(false)
   }
 
+  useEffect(() => {
+    if (selectedSport.length === 0) setSelectedSport(['all_sports'])
+  }, [selectedSport, setSelectedSport])
+
   return (
     <>
       <SelectSport

src/features/TournamentList/components/CollapseTournament/index.tsx

@@ -1,7 +1,5 @@
 import { ProfileTypes } from 'config'
 
-import { getSportLexic } from 'helpers'
-
 import { T9n } from 'features/T9n'
 import { useUserFavoritesStore } from 'features/UserFavorites/store'
 import { Icon } from 'features/Icon'
@@ -35,7 +33,7 @@ export const CollapseTournament = ({
   const {
     setIsShowTournament,
     setSelectedLeague,
-    setSelectedSport,
+    setSelectTournament,
   } = useHeaderFiltersStore()
   const { isInFavorites } = useUserFavoritesStore()
   const {
@@ -50,10 +48,9 @@ export const CollapseTournament = ({
   )
 
   const handleClick = () => {
-    const sportName = getSportLexic(sportType)
     setIsShowTournament(false)
-    setSelectedSport([sportName])
     setSelectedLeague([tournament.id])
+    setSelectTournament(tournament)
   }
 
   return (

src/features/TournamentList/hooks.tsx

@@ -7,6 +7,7 @@ import { useHeaderFiltersStore } from 'features/HeaderFilters'
 
 export const useTournaments = (matches: Array<Match>) => {
   const {
+    selectedDate,
     selectedLeague,
     selectedSport,
     setSportIds,
@@ -67,7 +68,7 @@ export const useTournaments = (matches: Array<Match>) => {
   useEffect(() => {
     sportIds && setSportIds(sportIds)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [matches])
+  }, [selectedDate, matches])
 
   return {
     tournamentSort,