diff --git a/Makefile b/Makefile index ea370334..7dafb02e 100644 --- a/Makefile +++ b/Makefile @@ -166,7 +166,7 @@ lff-prod: clean deploy-all: prod preprod facr-prod lff-prod stage: build-stage - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/wwwroot/ a-stage: build-a rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/a-wwwroot/ diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 18da3b03..2b990cec 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -100,6 +100,7 @@ export const indexLexics = { available_matches_shown: 13385, basketball: 6960, broadcast: 13049, + broadcasts: 2891, by_clicking: 17879, check_connection: 15700, choose_sport: 17927, diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx index ccdeaf56..406fe056 100644 --- a/src/features/App/AuthenticatedApp.tsx +++ b/src/features/App/AuthenticatedApp.tsx @@ -41,58 +41,58 @@ export const AuthenticatedApp = () => { useLexicsConfig(indexLexics) return ( - - - - - - - - - - - - { client.name === 'facr' ? : } - + + + + + + + + + + + + + { client.name === 'facr' ? : } + - {/* в Switch как прямой children - можно рендерить только Route или Redirect */} - - - - - - - - - - - - - - - - - - - - - + {/* в Switch как прямой children + можно рендерить только Route или Redirect */} + + + + + + + + + + + + + + + + + + + + - - - - - {!isProduction && } - - - - - - - - - + + + + {!isProduction && } + + + + + + + + + + ) } diff --git a/src/features/BuyMatchPopup/components/CardStep/index.tsx b/src/features/BuyMatchPopup/components/CardStep/index.tsx index 62928b5a..b33fce43 100644 --- a/src/features/BuyMatchPopup/components/CardStep/index.tsx +++ b/src/features/BuyMatchPopup/components/CardStep/index.tsx @@ -23,11 +23,16 @@ import { type CardStepType = { btnName?: string, + closeHandle?: () => void, title?: string, } -export const CardStep = ({ btnName, title }: CardStepType) => { - const { cards } = useCardsStore() +export const CardStep = ({ + btnName, + closeHandle, + title, +}: CardStepType) => { + const { cards, isHighlightsPage } = useCardsStore() const { close, goBack } = useBuyMatchPopupStore() const emptyCards = isEmpty(cards) @@ -36,13 +41,13 @@ export const CardStep = ({ btnName, title }: CardStepType) => {
- + {isHighlightsPage ? '' : } - +
diff --git a/src/features/Combobox/index.tsx b/src/features/Combobox/index.tsx index ffe6c2b3..7deb60d1 100644 --- a/src/features/Combobox/index.tsx +++ b/src/features/Combobox/index.tsx @@ -10,6 +10,7 @@ import { PAGES } from 'config' import { AudioPlayer } from 'components/AudioPlayer' import { T9n } from 'features/T9n' +import { Loader } from 'features/Loader' import { Icon } from 'features/Icon' import { OutsideClick } from 'features/OutsideClick' import { @@ -29,6 +30,7 @@ import { ListOption, WrapperIcon, ScAudioWrap, + ScLoaderWrapper, } from './styled' import { Arrow } from './components/Arrow' @@ -43,6 +45,7 @@ export const Combobox = (props: Props) => { labelAfter, labelLexic, labelWidth, + loading, maxLength, noSearch, title, @@ -98,6 +101,11 @@ export const Combobox = (props: Props) => { /> {labelAfter && query && {labelAfter}} + {loading ? ( + + + + ) : ''} {iconName ? ( diff --git a/src/features/Combobox/styled.tsx b/src/features/Combobox/styled.tsx index c05bd2b4..957b70b2 100644 --- a/src/features/Combobox/styled.tsx +++ b/src/features/Combobox/styled.tsx @@ -1,4 +1,6 @@ -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' import { customScrollbar, customStylesMixin } from 'features/Common' @@ -62,3 +64,20 @@ export const WrapperIcon = styled.span` export const ScAudioWrap = styled.div` margin-left: 20px; ` + +export const ScLoaderWrapper = styled.div` + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + ${isMobileDevice + ? css` + max-width: 95vw; + left: 0; + border-radius: 4px; + @media screen and (orientation: landscape){ + max-width: 368px; + } + ` + : ''}; +` diff --git a/src/features/Combobox/types.tsx b/src/features/Combobox/types.tsx index 5819d8f9..194a2f6a 100644 --- a/src/features/Combobox/types.tsx +++ b/src/features/Combobox/types.tsx @@ -27,6 +27,7 @@ export type Props = Pick, ( labelAfter?: string | ReactNode, labelLexic?: string, labelWidth?: number, + loading?: boolean, maxLength?: number, noSearch?: boolean, onChange?: (event: ChangeEvent) => void, diff --git a/src/features/TournamentList/components/CollapseTournament/index.tsx b/src/features/TournamentList/components/CollapseTournament/index.tsx index 0a204083..770c0c7a 100644 --- a/src/features/TournamentList/components/CollapseTournament/index.tsx +++ b/src/features/TournamentList/components/CollapseTournament/index.tsx @@ -86,11 +86,7 @@ export const CollapseTournament = ({ {tournamentMatches.length}   - 1 - ? 'games' : 'game' - } - /> + diff --git a/src/features/UserAccount/components/ChangeCardPopup/index.tsx b/src/features/UserAccount/components/ChangeCardPopup/index.tsx index fd0c055f..c372c747 100644 --- a/src/features/UserAccount/components/ChangeCardPopup/index.tsx +++ b/src/features/UserAccount/components/ChangeCardPopup/index.tsx @@ -30,12 +30,11 @@ export const ChangeCardPopup = ({ return ( setChangeCardPopupOpen(false)} - withCloseButton={closeButton} > setChangeCardPopupOpen(false)} /> ) diff --git a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx index f502dd6d..ffbc8581 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx +++ b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx @@ -24,7 +24,11 @@ import { import { getPlayerMatches } from 'requests/getMatches/getPlayerMatches' import { getTeamPlayers, Player } from 'requests/getTeamPlayers' -import { playerMatchesState, dataForPayHighlights } from '../../storeHighlightsAtoms' +import { + playerMatchesState, + dataForPayHighlights, + fetchingMatches, +} from '../../storeHighlightsAtoms' export type SportType = { id: number, @@ -73,6 +77,7 @@ const sounds = [ { id: 0, name: 'No', + src: '', }, { id: 1, @@ -171,12 +176,14 @@ export const useHighlightsForm = () => { const { playerHighlight } = useUserFavoritesStore() const [sports, setSports] = useState>([]) + const [isFetchingTeams, setIsFetchingTeams] = useState(false) const [teams, setTeams] = useState>([]) const [playersData, setPlayersData] = useState>([]) const [players, setPlayers] = useState>([]) const [formState, setFormState] = useState(defaultValues) const [playerMatches, setPlayerMatches] = useRecoilState(playerMatchesState) const setDatahighlights = useSetRecoilState(dataForPayHighlights) + const setIsFetching = useSetRecoilState(fetchingMatches) const formRef = useRef(null) @@ -298,18 +305,25 @@ export const useHighlightsForm = () => { }, [sports, playerHighlight, teams]) const fetchTeams = useMemo( - () => debounce(() => formState?.sport?.id && getSportTeams( - formState?.sport?.id, - -1, - formState.teamValue, - ).then( - ({ data }: SportTeamsType) => setTeams( - data?.map((team: Team) => ({ - ...team, - name: team.name_eng, - })), - ), - ), 1000), + () => debounce(() => { + setIsFetchingTeams(true) + // eslint-disable-next-line @typescript-eslint/no-unused-expressions + formState?.sport?.id + && getSportTeams( + formState?.sport?.id, + -1, + formState.teamValue, + ) + .then(({ data }: SportTeamsType) => { + setTeams( + data?.map((team: Team) => ({ + ...team, + name: team.name_eng, + })), + ) + }) + .finally(() => setIsFetchingTeams(false)) + }, 1000), // eslint-disable-next-line react-hooks/exhaustive-deps [formState.teamValue], ) @@ -325,7 +339,8 @@ export const useHighlightsForm = () => { if (formState?.selectedPlayer?.id && formState?.sport) { setDatahighlights({ data: { - duration: Number(formState?.duration), + background_music: formState?.selectedSound?.src, + duration: Number(formState?.duration) * 60, lang: 'en', matches: playerMatches?.filter(({ isChecked }) => (isChecked)).map(({ id }) => id), player_id: formState?.selectedPlayer?.id, @@ -346,16 +361,19 @@ export const useHighlightsForm = () => { formState?.sport?.id || playerHighlight.sportType, formState?.selectedTeam?.id || playerHighlight?.profile?.additionalInfo?.id, ) - .then((state) => setPlayersData(state?.map((player: Player) => ({ - ...player, - name: `${player?.firstname_eng} ${player?.lastname_eng}`, - })))) + .then((state) => { + setPlayersData(state?.map((player: Player) => ({ + ...player, + name: `${player?.firstname_eng} ${player?.lastname_eng}`, + }))) + }) // eslint-disable-next-line react-hooks/exhaustive-deps }, [formState?.selectedTeam, playerHighlight]) useEffect(() => { if (!formState?.selectedPlayer || !formState?.sport) return + setIsFetching(true) formState?.selectedPlayer && getPlayerMatches({ limit: 1000, @@ -367,6 +385,8 @@ export const useHighlightsForm = () => { .then(({ broadcast }) => setPlayerMatches( broadcast.map((match: Match) => ({ ...match, isChecked: false })), )) + .finally(() => setIsFetching(false)) + // eslint-disable-next-line react-hooks/exhaustive-deps }, [formState?.selectedPlayer, formState?.selectedTeam]) @@ -374,6 +394,7 @@ export const useHighlightsForm = () => { formRef, formState, handleSubmit, + isFetchingTeams, onChangeMaxDuration, onChangePlayer, onChangeTeam, diff --git a/src/pages/HighlightsPage/components/FormHighlights/index.tsx b/src/pages/HighlightsPage/components/FormHighlights/index.tsx index 9b2b89ee..9a3bf3e3 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/index.tsx +++ b/src/pages/HighlightsPage/components/FormHighlights/index.tsx @@ -37,6 +37,7 @@ export const FormHighlights = ({ price }: PriceInfoType) => { stats, teamValue, }, + isFetchingTeams, onChangeMaxDuration, onChangePlayer, onChangeTeam, @@ -86,7 +87,7 @@ export const FormHighlights = ({ price }: PriceInfoType) => { wrapperHeight={wrapperHeight} /> { wrapperHeight={wrapperHeight} iconName='Search' className='FormHighlights__select__teams' + loading={isFetchingTeams} /> { - const { onChangeSelectedMatches, playerMatches } = useHighlighMatches() + const { + onChangeSelectedMatches, + playerMatches, + } = useHighlighMatches() + + const isFetching = useRecoilValue(fetchingMatches) return ( @@ -45,10 +57,10 @@ export const MatchesHighlights = () => { team1, team2, tournament, - }: any) => ( + }: MatchType) => ( { )))} + {isFetching ? ( + + + + ) : '' } ) diff --git a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx index 8c67f7df..654d5822 100644 --- a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx +++ b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx @@ -120,13 +120,18 @@ export const ScFakeWrapper = styled.div` flex-direction: row; align-items: center; margin-bottom: 14px; + position: relative; ` export const ScLoaderWrapper = styled.div` position: absolute; - left: 30%; - top: 50%; - z-index: 1; + top: 0; + left: 0; + width: 75%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; ` export const ScCountMatches = styled.span` diff --git a/src/pages/HighlightsPage/components/ThanksPopup/index.tsx b/src/pages/HighlightsPage/components/ThanksPopup/index.tsx index 8f9bd4f4..d9e62e58 100644 --- a/src/pages/HighlightsPage/components/ThanksPopup/index.tsx +++ b/src/pages/HighlightsPage/components/ThanksPopup/index.tsx @@ -20,6 +20,7 @@ export const ThanksPopup = () => { setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })} + withCloseButton={false} > diff --git a/src/pages/HighlightsPage/index.tsx b/src/pages/HighlightsPage/index.tsx index 76ce4a85..3954f1fa 100644 --- a/src/pages/HighlightsPage/index.tsx +++ b/src/pages/HighlightsPage/index.tsx @@ -44,6 +44,7 @@ const HighlightsPage = () => { || !data?.matches.length || !isBoolean(data?.stats) || data?.matches.length > 10 + || data.background_music === undefined const price = playerMatches?.filter( ({ isChecked }: MatchType) => isChecked, @@ -61,7 +62,10 @@ const HighlightsPage = () => { - setIsOpenPopupChangeCard(true)}> + !isNotEmpty && setIsOpenPopupChangeCard(true)} + > @@ -75,7 +79,6 @@ const HighlightsPage = () => { changeCardPopupOpen={isOpenPopupChangeCard} setChangeCardPopupOpen={setIsOpenPopupChangeCard} title='payment' - closeButton={false} /> diff --git a/src/pages/HighlightsPage/storeHighlightsAtoms.tsx b/src/pages/HighlightsPage/storeHighlightsAtoms.tsx index 33a68085..55aa8b2b 100644 --- a/src/pages/HighlightsPage/storeHighlightsAtoms.tsx +++ b/src/pages/HighlightsPage/storeHighlightsAtoms.tsx @@ -2,14 +2,15 @@ import { atom } from 'recoil' import type { Match } from 'requests' -export type PlayerMatchesType = Array - export type MatchType = Match & { isChecked: boolean, } +export type PlayerMatchesType = Array + type DataForm = { data: { + background_music: string | undefined, duration: number, lang: string, matches: Array, @@ -36,3 +37,8 @@ export const dataForPayHighlights = atom({ default: {} as DataForm, key: 'dataForPayHighlights', }) + +export const fetchingMatches = atom({ + default: false, + key: 'fetchingMatches', +})