diff --git a/src/components/SelectFilter/index.tsx b/src/components/SelectFilter/index.tsx
index 377e2af1..435a53d3 100644
--- a/src/components/SelectFilter/index.tsx
+++ b/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) => (
-
-
-
-
-)
+ withArrow,
+}: SportsFilterProps) => {
+// eslint-disable-next-line
+ const tournamentName = selectItem && useName(selectItem)
+ return (
+
+ {tournamentName}
+ {withArrow && (
+
+ )}
+
+ )
+}
diff --git a/src/components/SelectFilter/styled.tsx b/src/components/SelectFilter/styled.tsx
index 0b74e1d0..e985e196 100644
--- a/src/components/SelectFilter/styled.tsx
+++ b/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`
+`
diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx
index c0e78a7b..e0b50255 100644
--- a/src/features/HeaderFilters/store/hooks/index.tsx
+++ b/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>(['all_competitions'])
const [selectedFilters, setSelectedFilters] = useState>([])
const [isShowTournament, setIsShowTournament] = useState(true)
+ const [selectTournament, setSelectTournament] = useState()
const [sportIds, setSportIds] = useState()
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,
diff --git a/src/features/HomePage/components/HeaderFilters/index.tsx b/src/features/HomePage/components/HeaderFilters/index.tsx
index 21473d99..75bf9553 100644
--- a/src/features/HomePage/components/HeaderFilters/index.tsx
+++ b/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 (
- {!isShowTournament && handleClickBack()} />}
-
- {/* console.log(1)}
- open={false}
- selectItem='all_competitions'
- /> */}
-
- checkFilter('live')}
- >
-
-
- checkFilter('upcoming')}
- >
-
-
- checkFilter('completed')}
- >
-
-
-
+ {!isShowTournament && (
+ <>
+ handleClickBack()}
+ />
+ console.log()}
+ open={false}
+ selectItem={selectTournament}
+ withArrow={false}
+ />
+ >
+ )}
+ {isShowTournament && }
+
+ {isShowTournament && (
+
+ checkFilter('live')}
+ >
+
+
+ checkFilter('upcoming')}
+ >
+
+
+ checkFilter('completed')}
+ >
+
+
+
+ )}
)
}
diff --git a/src/features/Matches/hooks.tsx b/src/features/Matches/hooks.tsx
index cce5cacb..5150876f 100644
--- a/src/features/Matches/hooks.tsx
+++ b/src/features/Matches/hooks.tsx
@@ -21,7 +21,7 @@ export type Props = {
fetch: (limit: number, offset: number) => Promise,
}
-const MATCHES_LIMIT = isMobileDevice ? 1000 : 60
+const MATCHES_LIMIT = 1000
const initialState = {
broadcast: [],
diff --git a/src/features/MatchesGrid/index.tsx b/src/features/MatchesGrid/index.tsx
index f8cc69e5..0f1b16b6 100644
--- a/src/features/MatchesGrid/index.tsx
+++ b/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 ? (
) : (
- filteredMatches.map((match) => )
+ filteredMatches.filter((match) => ((selectedLeague.indexOf(match.tournament.id) >= 0
+ || selectedLeague[0] === 'all_competitions'))).map((match) => )
)}
)
diff --git a/src/features/SportsFilter/index.tsx b/src/features/SportsFilter/index.tsx
index 0fe93eaf..958d050f 100644
--- a/src/features/SportsFilter/index.tsx
+++ b/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 (
<>
{
- const sportName = getSportLexic(sportType)
setIsShowTournament(false)
- setSelectedSport([sportName])
setSelectedLeague([tournament.id])
+ setSelectTournament(tournament)
}
return (
diff --git a/src/features/TournamentList/hooks.tsx b/src/features/TournamentList/hooks.tsx
index 27914c49..dca855b9 100644
--- a/src/features/TournamentList/hooks.tsx
+++ b/src/features/TournamentList/hooks.tsx
@@ -7,6 +7,7 @@ import { useHeaderFiltersStore } from 'features/HeaderFilters'
export const useTournaments = (matches: Array) => {
const {
+ selectedDate,
selectedLeague,
selectedSport,
setSportIds,
@@ -67,7 +68,7 @@ export const useTournaments = (matches: Array) => {
useEffect(() => {
sportIds && setSportIds(sportIds)
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [matches])
+ }, [selectedDate, matches])
return {
tournamentSort,