diff --git a/Makefile b/Makefile index 5820759c..4f1182de 100644 --- a/Makefile +++ b/Makefile @@ -57,6 +57,13 @@ build-e: clean REACT_APP_STAGE=e-staging \ npm run build +build-f: clean + REACT_APP_TYPE=ott \ + REACT_APP_ENV=staging \ + REACT_APP_CLIENT=instat \ + REACT_APP_STAGE=f-staging \ + npm run build + auth-build: rm -rf build_auth @@ -96,7 +103,7 @@ prod: clean rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/wwwroot/ rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/wwwroot/ - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@bkup.instat.tv:/usr/local/www/ott/wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@10.0.3.8:/usr/local/www/ott/wwwroot/ preprod: clean REACT_APP_TYPE=ott \ @@ -105,7 +112,7 @@ preprod: clean REACT_APP_STRIPE_PK=pk_live_ANI76cBhSo69DZUxPmyRVIZW \ npm run build - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-test@test.instat.tv:/usr/local/www/ott-test/wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-test@10.0.3.8:/usr/local/www/ott-test/wwwroot/ facr-prod: clean REACT_APP_TYPE=ott \ @@ -116,7 +123,7 @@ facr-prod: clean rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/facr-wwwroot/ rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/facr-wwwroot/ - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@bkup.instat.tv:/usr/local/www/ott/facr-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@10.0.3.8:/usr/local/www/ott/facr-wwwroot/ deploy-all: prod preprod facr-prod @@ -138,6 +145,9 @@ d-stage: build-d e-stage: build-e rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/e-wwwroot/ +f-stage: build-f + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/f-wwwroot/ + test: npm test diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index e4031970..6983c6ed 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -100,6 +100,7 @@ export const indexLexics = { football: 6958, full_game: 13028, futsal: 17670, + game: 9680, game_finished: 13026, game_time: 13029, games: 15773, diff --git a/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx b/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx index f442e6be..4a67736c 100644 --- a/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx +++ b/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx @@ -1,5 +1,8 @@ -import type { MouseEvent } from 'react' -import { useMemo } from 'react' +import { + MouseEvent, + useEffect, + useMemo, +} from 'react' import addDays from 'date-fns/addDays' @@ -11,7 +14,12 @@ import { useHeaderFiltersStore } from 'features/HeaderFilters' import { getDisplayDate, getWeeks } from '../helpers' export const useDateFilter = () => { - const { selectedDate, setSelectedDate } = useHeaderFiltersStore() + const { + selectedDate, + setIsShowTournament, + setSelectedDate, + } = useHeaderFiltersStore() + const { lang } = useLexicsStore() const { close, @@ -28,6 +36,11 @@ export const useDateFilter = () => { lang, }) + useEffect(() => { + setIsShowTournament(true) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedDate]) + const onPreviousClick = () => { setSelectedDate(addDays(selectedDate, -7)) } diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 121f5ee2..c0e78a7b 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -22,16 +22,12 @@ export const useFilters = () => { serialize: serializeDate, validator: isValidDate, }) - const [allFilters, setAllFilters] = useState({ - selectedFilters: [], - selectedLeague: [], - selectedSports: [], - }) + const [selectedSport, setSelectedSport] = useState(['all_sports']) - const [selectedLeague, setSelectedLeague] = useState(['all_competitions']) + const [selectedLeague, setSelectedLeague] = useState>(['all_competitions']) const [selectedFilters, setSelectedFilters] = useState>([]) const [isShowTournament, setIsShowTournament] = useState(true) - + const [sportIds, setSportIds] = useState() const isTodaySelected = isToday(selectedDate) const resetFilters = useCallback(() => { @@ -49,10 +45,8 @@ export const useFilters = () => { ]) const store = useMemo(() => ({ - allFilters, isShowTournament, isTodaySelected, - setAllFilters, selectedDate, selectedFilters, selectedLeague, @@ -60,12 +54,13 @@ export const useFilters = () => { setIsShowTournament, setSelectedDate, setSelectedFilters, + setSelectedLeague, setSelectedSport, + setSportIds, + sportIds, }), [ - allFilters, isShowTournament, isTodaySelected, - setAllFilters, selectedDate, selectedFilters, selectedLeague, @@ -73,8 +68,10 @@ export const useFilters = () => { setIsShowTournament, setSelectedDate, setSelectedFilters, + setSelectedLeague, setSelectedSport, - + setSportIds, + sportIds, ]) return store diff --git a/src/features/HomePage/components/HeaderFilters/index.tsx b/src/features/HomePage/components/HeaderFilters/index.tsx index 96be28fe..21473d99 100644 --- a/src/features/HomePage/components/HeaderFilters/index.tsx +++ b/src/features/HomePage/components/HeaderFilters/index.tsx @@ -1,14 +1,22 @@ import { SportsFilter } from 'features/SportsFilter' import { useHeaderFiltersStore } from 'features/HeaderFilters' import { T9n } from 'features/T9n' -import { SelectFilter } from 'components/SelectFilter' -import { ScHeaderFilters, ScFilterItemsWrap, ScFilterItem } from './styled' +import { + ScArrow, + ScHeaderFilters, + ScFilterItemsWrap, + ScFilterItem, +} from './styled' export const HeaderFilters = () => { const { + isShowTournament, selectedFilters, + setIsShowTournament, setSelectedFilters, + setSelectedLeague, + setSelectedSport, } = useHeaderFiltersStore() const isActiveFilter = (filterItem: string) => selectedFilters.indexOf(filterItem) >= 0 @@ -19,14 +27,22 @@ export const HeaderFilters = () => { : setSelectedFilters([...selectedFilters, item]) } + const handleClickBack = () => { + setIsShowTournament(true) + setSelectedFilters([]) + setSelectedSport(['all_sports']) + setSelectedLeague(['all_competitions']) + } + return ( + {!isShowTournament && handleClickBack()} />} - console.log(1)} open={false} selectItem='all_competitions' - /> + /> */} ` text-align: center; padding: 6px 16px; ` + +export const ScArrow = styled(Icon)` + margin-right: 15px; + cursor: pointer; + + :hover { + /* background-color: rgba(255, 255, 255, 0.5);; */ + } +` diff --git a/src/features/MatchesGrid/index.tsx b/src/features/MatchesGrid/index.tsx index e8431de7..f8cc69e5 100644 --- a/src/features/MatchesGrid/index.tsx +++ b/src/features/MatchesGrid/index.tsx @@ -16,13 +16,21 @@ type MatchesGridProps = { export const MatchesGrid = memo(({ matches }: MatchesGridProps) => { const isHomePage = useRouteMatch(PAGES.home)?.isExact - const { selectedFilters, isShowTournament } = useHeaderFiltersStore() - const filteredMatches = selectedFilters?.length + const { + isShowTournament, + selectedFilters, + selectedLeague, + } = useHeaderFiltersStore() + + 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)) + ((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 ( @@ -30,9 +38,7 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => { {isHomePage && isShowTournament ? ( ) : ( - filteredMatches.map((match) => ( - - )) + filteredMatches.map((match) => ) )} ) diff --git a/src/features/SportsFilter/components/SelectSport/index.tsx b/src/features/SportsFilter/components/SelectSport/index.tsx index a574598c..55572eec 100644 --- a/src/features/SportsFilter/components/SelectSport/index.tsx +++ b/src/features/SportsFilter/components/SelectSport/index.tsx @@ -13,7 +13,7 @@ export const SelectSport = ({ open, sport, }: SportsFilterProps) => ( - +   {sport.length > 1 ? `+ ${sport.length - 1}` : ''} diff --git a/src/features/SportsFilter/components/SelectSport/styled.tsx b/src/features/SportsFilter/components/SelectSport/styled.tsx index 9515ab38..9cb43fba 100644 --- a/src/features/SportsFilter/components/SelectSport/styled.tsx +++ b/src/features/SportsFilter/components/SelectSport/styled.tsx @@ -3,18 +3,23 @@ import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' import { Icon } from 'features/Icon' -export const ScSportsFilter = styled.div` +type PropsFilter = { + opacity: number, +} +export const ScSportsFilter = styled.div` display: flex; - color: white; + color: #ffffff; + opacity: ${({ opacity }) => opacity}; font-size: 14px; - width: 30%; text-transform: uppercase; font-weight: 700; cursor: pointer; align-items: center; + width: 20%; ${isMobileDevice ? css` + width: 30%; letter-spacing: 0.15rem; font-size: 10px; ` diff --git a/src/features/SportsFilter/components/SelectSportPopup/index.tsx b/src/features/SportsFilter/components/SelectSportPopup/index.tsx index 2f02a2d5..3d36769e 100644 --- a/src/features/SportsFilter/components/SelectSportPopup/index.tsx +++ b/src/features/SportsFilter/components/SelectSportPopup/index.tsx @@ -1,4 +1,5 @@ import { T9n } from 'features/T9n' +import { getSportLexic } from 'helpers/getSportLexic' import { ScBody, @@ -9,48 +10,62 @@ import { ScSportName, } from './styled' -const sports = [ - 'all_sports', - 'basketball', - 'football_popup', - 'handball', - 'hockey_popup', - 'volleyball', -] +const sports = { + all_sports: 'all_sports', + basketball: 'basketball', + football: 'football_popup', + handball: 'handball', + hockey: 'hockey_popup', + volleyball: 'volleyball', +} type Props = { isOpen: boolean, onModalClose: () => void, onSportClick: (sport: string) => void, selectedSport: Array, + sportIds: Array, } export const SelectSportPopup = ({ isOpen, onModalClose, onSportClick, selectedSport, -}: Props) => ( - <> - - - - - - - - {sports.map((sport: string) => ( - onSportClick(sport)} - className={selectedSport.indexOf(sport) >= 0 ? 'active' : ''} - active={selectedSport.indexOf(sport) >= 0} - > - - - - - ))} - - - -) + sportIds, +}: Props) => { + const sportNames = sportIds + && Array.from(sportIds) + .map((id) => String(getSportLexic(Number(id)))) + sportNames?.unshift('all_sports') + + return ( + <> + + + + + + + + {sportNames?.map((sport: string) => ( + onSportClick(sport)} + className={selectedSport.indexOf(sport) >= 0 ? 'active' : ''} + active={selectedSport.indexOf(sport) >= 0} + > + + + + + ))} + + + + ) +} diff --git a/src/features/SportsFilter/index.tsx b/src/features/SportsFilter/index.tsx index d97ad31a..0fe93eaf 100644 --- a/src/features/SportsFilter/index.tsx +++ b/src/features/SportsFilter/index.tsx @@ -6,18 +6,35 @@ import { SelectSport } from './components/SelectSport' import { SelectSportPopup } from './components/SelectSportPopup' export const SportsFilter = () => { - const { selectedSport, setSelectedSport, setIsShowTournament } = useHeaderFiltersStore() + const { + isShowTournament, + selectedSport, + setIsShowTournament, + setSelectedLeague, + setSelectedSport, + sportIds, + } = useHeaderFiltersStore() const [isOpen, setIsOpen] = useState(false) const onSportClick = (sport: string) => { + if (!isShowTournament) return + if (sport === 'all_sports') { + setSelectedLeague(['all_competitions']) setSelectedSport([sport]) - } else { + } + + if (selectedSport.indexOf(sport) === -1) { setSelectedSport((prev) => [ ...prev.filter((item) => item !== 'all_sports'), sport, ]) + } else { + setSelectedSport((prev) => [ + ...prev.filter((item) => item !== 'all_sports' && item === sport), + ]) } + setSelectedLeague(['all_competitions']) setIsShowTournament(true) setIsOpen(false) } @@ -42,6 +59,7 @@ export const SportsFilter = () => { isOpen={isOpen} onModalClose={onModalClose} selectedSport={selectedSport} + sportIds={sportIds} /> ) diff --git a/src/features/TournamentList/components/CollapseTournament/index.tsx b/src/features/TournamentList/components/CollapseTournament/index.tsx index ca9dd1e6..c7784bda 100644 --- a/src/features/TournamentList/components/CollapseTournament/index.tsx +++ b/src/features/TournamentList/components/CollapseTournament/index.tsx @@ -32,7 +32,11 @@ export const CollapseTournament = ({ tournament, tournamentMatches, }: TournamentProps) => { - const { setSelectedSport, setIsShowTournament } = useHeaderFiltersStore() + const { + setIsShowTournament, + setSelectedLeague, + setSelectedSport, + } = useHeaderFiltersStore() const { isInFavorites } = useUserFavoritesStore() const { countryId, @@ -49,6 +53,7 @@ export const CollapseTournament = ({ const sportName = getSportLexic(sportType) setIsShowTournament(false) setSelectedSport([sportName]) + setSelectedLeague([tournament.id]) } return ( @@ -90,7 +95,11 @@ export const CollapseTournament = ({ {tournamentMatches.length}   - + 1 + ? 'games' : 'game' + } + /> diff --git a/src/features/TournamentList/components/CollapseTournament/styled.tsx b/src/features/TournamentList/components/CollapseTournament/styled.tsx index e7318fef..16d45168 100644 --- a/src/features/TournamentList/components/CollapseTournament/styled.tsx +++ b/src/features/TournamentList/components/CollapseTournament/styled.tsx @@ -180,6 +180,7 @@ export const CountMatches = styled.span` font-size: 10px; line-height: 16px; color: #FFFFFF; + text-transform: lowercase; ` export const TournamentName = styled(Name)` diff --git a/src/features/TournamentList/hooks.tsx b/src/features/TournamentList/hooks.tsx index 0345029b..27914c49 100644 --- a/src/features/TournamentList/hooks.tsx +++ b/src/features/TournamentList/hooks.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react' import { getSportLexic } from 'helpers/getSportLexic' import { TournamentListProps } from 'features/TournamentList' @@ -5,7 +6,11 @@ import type { Match } from 'features/Matches' import { useHeaderFiltersStore } from 'features/HeaderFilters' export const useTournaments = (matches: Array) => { - const { selectedSport } = useHeaderFiltersStore() + const { + selectedLeague, + selectedSport, + setSportIds, + } = useHeaderFiltersStore() const compareSport = (match: Match, sportNames: Array) => { if (sportNames[0] === 'all_sports') { @@ -15,11 +20,20 @@ export const useTournaments = (matches: Array) => { return (sportNames.indexOf(sport) >= 0 || sportNames.indexOf(`${sport}_popup`) >= 0) } + const compareLeague = (id: number) => { + if (selectedLeague[0] === 'all_competitions') { + return true + } + return (selectedLeague.indexOf(id) >= 0) + } + const tournamentSort: Array = [] + const sportIds = new Set([]) const tournaments = matches.reduce((acc: TournamentListProps, match: Match) => { if (matches.length === 0) return {} - if (!acc[match.tournament.id] && compareSport(match, selectedSport)) { + if (!acc[match.tournament.id] && compareSport(match, selectedSport) + && compareLeague(match.tournament.id)) { const tournament = { ...match.tournament, countryId: match.countryId, @@ -34,7 +48,8 @@ export const useTournaments = (matches: Array) => { tournamentMatches: [match], } tournamentSort.push(match.tournament.id) - } else if (compareSport(match, selectedSport)) { + sportIds.add(match.sportType) + } else if (compareSport(match, selectedSport) && compareLeague(match.tournament.id)) { acc[match.tournament.id] = { ...acc[match.tournament.id], tournament: { @@ -49,6 +64,11 @@ export const useTournaments = (matches: Array) => { return acc }, {}) + useEffect(() => { + sportIds && setSportIds(sportIds) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [matches]) + return { tournamentSort, tournaments, diff --git a/src/features/TournamentList/index.tsx b/src/features/TournamentList/index.tsx index 9bd29ad7..358858aa 100644 --- a/src/features/TournamentList/index.tsx +++ b/src/features/TournamentList/index.tsx @@ -22,9 +22,9 @@ export type TournamentListProps = { countryId: number, live: boolean, sportType: number, - } + }, tournamentMatches: Array, - } + }, } export const TournamentList = ({ matches }: TournamentTypeProps) => { @@ -44,7 +44,7 @@ export const TournamentList = ({ matches }: TournamentTypeProps) => { ))} ) - case isHomePage && matches.length <= 12: + case isHomePage && matches.length >= 12: return ( <> {tournamentSort?.map((id) => (