Margarita
3 years ago
parent
6a8d3f9200
commit
a69fbe6c4b
@ -0,0 +1,9 @@ |
||||
export const landingLexics = { |
||||
default_season: 19983, |
||||
inactive_button: 20083, |
||||
inactive_description_1: 20084, |
||||
inactive_description_2: 20086, |
||||
inactive_period: 801, |
||||
inactive_title_1: 20087, |
||||
inactive_title_2: 20088, |
||||
} |
||||
@ -0,0 +1,163 @@ |
||||
import { |
||||
useEffect, |
||||
useState, |
||||
} from 'react' |
||||
|
||||
import size from 'lodash/size' |
||||
import includes from 'lodash/includes' |
||||
|
||||
import type { TournamentInfo } from 'requests/getTournamentInfo' |
||||
import type { Landing } from 'requests/getLanding' |
||||
import { getLanding } from 'requests/getLanding' |
||||
import { getLandingLogo } from 'requests/getLandingMedia' |
||||
import { getTournamentInfo } from 'requests/getTournamentInfo' |
||||
|
||||
import { PAGES } from 'config/pages' |
||||
|
||||
import { redirectToUrl } from 'helpers/redirectToUrl' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
import { useAuthStore } from 'features/AuthStore' |
||||
|
||||
import { getLandingName, isPastLandingDate } from './helpers' |
||||
import { getName, useName } from '../Name' |
||||
|
||||
export const useLandings = () => { |
||||
const [tournamentInfo, setTournamentInfo] = useState<Landing | null>(null) |
||||
const [isInactiveLanding, setIsInactiveLanding] = useState(false) |
||||
const [isNonExistLanding, setIsNonExistLanding] = useState(false) |
||||
const [nonExistLogoSrc, setNonExistLogoSrc] = useState('') |
||||
const [tournamentProfile, setTournamentProfile] = useState<TournamentInfo>(null) |
||||
|
||||
const { addLexicsConfig, suffix } = useLexicsStore() |
||||
const { |
||||
landingUrlFrom, |
||||
setIsFromLanding, |
||||
user, |
||||
} = useAuthStore() |
||||
|
||||
const buttonLexic = tournamentInfo?.lexic_button || '' |
||||
const period = tournamentInfo?.lexic_period || '' |
||||
const title = tournamentInfo?.lexic_title || '' |
||||
const description = tournamentInfo?.lexic_description || '' |
||||
const gallery = tournamentInfo?.media.gallery |
||||
|
||||
useEffect(() => { |
||||
const lexics = [buttonLexic, period, title, description] |
||||
addLexicsConfig(lexics) |
||||
}, [ |
||||
addLexicsConfig, |
||||
buttonLexic, |
||||
description, |
||||
period, |
||||
title, |
||||
]) |
||||
|
||||
const redirectToHomePage = () => redirectToUrl(PAGES.home) |
||||
const onButtonClick = () => { |
||||
if (includes(landingUrlFrom, PAGES.match) || includes(landingUrlFrom, PAGES.tournament)) { |
||||
setIsFromLanding(true) |
||||
redirectToUrl(landingUrlFrom) |
||||
sessionStorage.removeItem('landingUrlFrom') |
||||
} else { |
||||
redirectToUrl(tournamentInfo?.url_button || '') |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
(async () => { |
||||
const landingData = sessionStorage.getItem('landingData') |
||||
const parseLandingDate = landingData && JSON.parse(landingData) |
||||
|
||||
if (parseLandingDate && parseLandingDate.defaultLanding) { |
||||
setIsNonExistLanding(true) |
||||
getTournamentInfo(parseLandingDate.sportType, parseLandingDate.tournamentId) |
||||
.then(setTournamentProfile) |
||||
return getLandingLogo({ |
||||
sport_id: parseLandingDate.sportType, |
||||
tournament_id: parseLandingDate.tournamentId, |
||||
}) |
||||
.then(({ logo_url }) => setNonExistLogoSrc(logo_url || '/images/tournament-fallback.png')) |
||||
} |
||||
|
||||
try { |
||||
const data = landingUrlFrom |
||||
? await getLanding({ |
||||
landingName: parseLandingDate.landing_id || parseLandingDate.url_landing, |
||||
seasonId: parseLandingDate.season_id, |
||||
sportId: parseLandingDate.sport_id, |
||||
tournamentId: parseLandingDate.tournament_id, |
||||
}) |
||||
: await getLanding({ landingName: getLandingName() }) |
||||
|
||||
if (user) return redirectToUrl(data.url_button || '') |
||||
if (isPastLandingDate(data.date_to)) setIsInactiveLanding(true) |
||||
return setTournamentInfo(data) |
||||
} catch (err) { |
||||
return redirectToHomePage() |
||||
} |
||||
})() |
||||
}, [landingUrlFrom, user]) |
||||
|
||||
const [sliderItemId, setSliderItemId] = useState(0) |
||||
|
||||
const onSliderSwitchClick = (itemId: number) => setSliderItemId(itemId) |
||||
|
||||
const imgCounter = size(gallery) |
||||
|
||||
useEffect(() => { |
||||
if (sliderItemId === imgCounter) { |
||||
setSliderItemId(0) |
||||
} |
||||
const getSliderInterval = setInterval(() => { |
||||
setSliderItemId(sliderItemId + 1) |
||||
}, 5000) |
||||
return () => clearInterval(getSliderInterval) |
||||
}, [imgCounter, sliderItemId]) |
||||
|
||||
const isInactiveLandingData = () => { |
||||
if (!tournamentInfo?.tournaments || !isInactiveLanding) return null |
||||
|
||||
const { |
||||
season, |
||||
tournament_eng, |
||||
tournament_rus, |
||||
} = tournamentInfo.tournaments[0] |
||||
|
||||
const currentTournamentsTitle = { |
||||
name_eng: tournament_eng, |
||||
name_rus: tournament_rus, |
||||
} |
||||
|
||||
const tournamentsTitle = getName({ nameObj: currentTournamentsTitle, suffix }) |
||||
|
||||
return { |
||||
season, |
||||
tournamentsTitle, |
||||
} |
||||
} |
||||
|
||||
const defaultTournamentName = useName(tournamentProfile || {}) |
||||
|
||||
return { |
||||
buttonColor: tournamentInfo?.button_color, |
||||
buttonLexic, |
||||
defaultTournamentName, |
||||
description, |
||||
gallery, |
||||
isInactiveLanding, |
||||
isInactiveLandingData: isInactiveLandingData(), |
||||
isNonExistLanding, |
||||
logo: tournamentInfo?.media.logo, |
||||
logoInsports: tournamentInfo?.logo_insports, |
||||
nonExistLogoSrc, |
||||
onButtonClick, |
||||
onSliderSwitchClick, |
||||
period, |
||||
redirectToHomePage, |
||||
sliderItemId, |
||||
teams: tournamentInfo?.teams, |
||||
title, |
||||
tournamentInfo, |
||||
} |
||||
} |
||||
@ -0,0 +1,193 @@ |
||||
import { |
||||
BaseSyntheticEvent, |
||||
Fragment, |
||||
useCallback, |
||||
} from 'react' |
||||
|
||||
import format from 'date-fns/format' |
||||
|
||||
import map from 'lodash/map' |
||||
|
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
|
||||
import { useLandings } from './hooks' |
||||
import { TeamLogoImg } from './TeamLogoImg' |
||||
|
||||
import { |
||||
Wrapper, |
||||
InsportsLogo, |
||||
HeaderWrapper, |
||||
Footer, |
||||
BlockWrapper, |
||||
TournamentInfo, |
||||
DateInfo, |
||||
InsportsImg, |
||||
TournamentMedia, |
||||
TournamentLogo, |
||||
TournamentTitle, |
||||
TournamentButton, |
||||
MainInfoContainer, |
||||
TournamentDescription, |
||||
TeamsLogo, |
||||
SliderContainer, |
||||
SliderWrapper, |
||||
MainLogoImg, |
||||
MainLogoWrapper, |
||||
SliderSwitch, |
||||
SliderSwitchItem, |
||||
SliderImg, |
||||
LogoBackground, |
||||
TournamentInfoContainer, |
||||
} from './styled' |
||||
|
||||
const Landings = () => { |
||||
const { |
||||
buttonColor, |
||||
buttonLexic, |
||||
defaultTournamentName, |
||||
description, |
||||
gallery, |
||||
isInactiveLanding, |
||||
isInactiveLandingData, |
||||
isNonExistLanding, |
||||
logo, |
||||
logoInsports, |
||||
nonExistLogoSrc, |
||||
onButtonClick, |
||||
onSliderSwitchClick, |
||||
period, |
||||
redirectToHomePage, |
||||
sliderItemId, |
||||
teams, |
||||
title, |
||||
tournamentInfo, |
||||
} = useLandings() |
||||
|
||||
const fallbackSrc = '/images/tournament-fallback.png' |
||||
const onError = useCallback((e: BaseSyntheticEvent) => { |
||||
// eslint-disable-next-line no-param-reassign
|
||||
e.target.onError = '' |
||||
// eslint-disable-next-line no-param-reassign
|
||||
e.target.src = fallbackSrc |
||||
}, [fallbackSrc]) |
||||
|
||||
if ((!tournamentInfo && !isNonExistLanding) |
||||
|| (isNonExistLanding && !nonExistLogoSrc)) return null |
||||
|
||||
const currentYear = format(new Date(), 'Y') |
||||
|
||||
return ( |
||||
<Wrapper> |
||||
<HeaderWrapper> |
||||
{isMobileDevice && <TournamentLogo src={logo} />} |
||||
<InsportsLogo onClick={redirectToHomePage} /> |
||||
</HeaderWrapper> |
||||
<MainInfoContainer> |
||||
<BlockWrapper> |
||||
{ |
||||
gallery && !isInactiveLanding && !isNonExistLanding |
||||
? ( |
||||
<SliderWrapper> |
||||
<SliderContainer> |
||||
{map(gallery, (img, itemId) => ( |
||||
<SliderImg |
||||
isAnimatedImg={itemId === sliderItemId} |
||||
key={img.id} |
||||
src={img.url} |
||||
/> |
||||
))} |
||||
</SliderContainer> |
||||
<SliderSwitch> |
||||
{map(gallery, (img, itemId) => ( |
||||
<SliderSwitchItem |
||||
onClick={() => onSliderSwitchClick(itemId)} |
||||
slideOpacity={itemId === sliderItemId} |
||||
key={img.id} |
||||
/> |
||||
))} |
||||
</SliderSwitch> |
||||
</SliderWrapper> |
||||
) |
||||
: ( |
||||
<MainLogoWrapper> |
||||
<LogoBackground /> |
||||
<MainLogoImg |
||||
src={logo || nonExistLogoSrc} |
||||
onError={onError} |
||||
/> |
||||
</MainLogoWrapper> |
||||
) |
||||
} |
||||
<TournamentInfoContainer> |
||||
<TournamentInfo> |
||||
{isInactiveLanding || isNonExistLanding |
||||
? ( |
||||
<Fragment> |
||||
<DateInfo> |
||||
{isInactiveLanding |
||||
? <T9n t='inactive_period' /> |
||||
: <T9n t='default_season' />} |
||||
{isInactiveLandingData?.season} |
||||
</DateInfo> |
||||
<TournamentTitle> |
||||
<T9n t='inactive_title_1' /> |
||||
{isInactiveLandingData?.tournamentsTitle || defaultTournamentName} |
||||
<T9n t='inactive_title_2' /> |
||||
</TournamentTitle> |
||||
<TournamentDescription> |
||||
<T9n t='inactive_description_1' /> |
||||
{isInactiveLandingData?.tournamentsTitle || defaultTournamentName} |
||||
<T9n t='inactive_description_2' /> |
||||
</TournamentDescription> |
||||
</Fragment> |
||||
) |
||||
: ( |
||||
<Fragment> |
||||
<DateInfo> |
||||
<T9n t={period} /> |
||||
</DateInfo> |
||||
<TournamentTitle> |
||||
<T9n t={title} /> |
||||
</TournamentTitle> |
||||
<TournamentDescription> |
||||
<T9n t={description} /> |
||||
</TournamentDescription> |
||||
</Fragment> |
||||
)} |
||||
<TournamentButton |
||||
buttonColor={buttonColor} |
||||
onClick={onButtonClick} |
||||
> |
||||
<T9n t={isInactiveLanding || isNonExistLanding |
||||
? 'inactive_button' |
||||
: buttonLexic} |
||||
/> |
||||
</TournamentButton> |
||||
</TournamentInfo> |
||||
{(teams || ((logo || logoInsports) && !isInactiveLanding)) && ( |
||||
<TournamentMedia> |
||||
{gallery && !isInactiveLanding && <TournamentLogo src={logo} />} |
||||
{teams && ( |
||||
<TeamsLogo> |
||||
{map(teams, (item) => ( |
||||
<TeamLogoImg |
||||
key={item.id} |
||||
src={item.logo} |
||||
/> |
||||
))} |
||||
</TeamsLogo> |
||||
)} |
||||
{(logoInsports && !isInactiveLanding) && <InsportsImg src='/images/insports-logo.svg' />} |
||||
</TournamentMedia> |
||||
)} |
||||
</TournamentInfoContainer> |
||||
</BlockWrapper> |
||||
</MainInfoContainer> |
||||
<Footer>©inSports.tv {currentYear}</Footer> |
||||
</Wrapper> |
||||
) |
||||
} |
||||
|
||||
export default Landings |
||||
@ -1,96 +0,0 @@ |
||||
import { |
||||
useEffect, |
||||
useState, |
||||
} from 'react' |
||||
|
||||
import size from 'lodash/size' |
||||
import includes from 'lodash/includes' |
||||
|
||||
import type { TournamentLanding } from 'requests/getTournamentLanding' |
||||
import { getTournamentLanding } from 'requests/getTournamentLanding' |
||||
|
||||
import { PAGES } from 'config/pages' |
||||
|
||||
import { redirectToUrl } from 'helpers/redirectToUrl' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
import { useAuthStore } from 'features/AuthStore' |
||||
|
||||
import { getLandingName, isPastLandingDate } from './helpers' |
||||
|
||||
export const useTournamentLanding = () => { |
||||
const [tournamentInfo, setTournamentInfo] = useState<TournamentLanding | null>(null) |
||||
|
||||
const { addLexicsConfig } = useLexicsStore() |
||||
const { page, setIsFromLanding } = useAuthStore() |
||||
|
||||
const buttonLexic = tournamentInfo?.lexic_button || '' |
||||
const period = tournamentInfo?.lexic_period || '' |
||||
const title = tournamentInfo?.lexic_title || '' |
||||
const description = tournamentInfo?.lexic_description || '' |
||||
const gallery = tournamentInfo?.media.gallery |
||||
|
||||
useEffect(() => { |
||||
const lexics = [buttonLexic, period, title, description] |
||||
addLexicsConfig(lexics) |
||||
}, [ |
||||
addLexicsConfig, |
||||
buttonLexic, |
||||
description, |
||||
period, |
||||
title, |
||||
]) |
||||
|
||||
const redirectToHomePage = () => redirectToUrl(PAGES.home) |
||||
const onButtonClick = () => { |
||||
if (includes(page, 'matches')) { |
||||
setIsFromLanding(true) |
||||
redirectToUrl(page) |
||||
} else { |
||||
redirectToUrl(tournamentInfo?.url_button || '') |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
getTournamentLanding(getLandingName()) |
||||
.then((data) => ( |
||||
isPastLandingDate(data.date_to) |
||||
? redirectToHomePage() |
||||
: setTournamentInfo(data) |
||||
)) |
||||
.catch(redirectToHomePage) |
||||
}, []) |
||||
|
||||
const [sliderItemId, setSliderItemId] = useState(0) |
||||
|
||||
const onSliderSwitchClick = (itemId: number) => setSliderItemId(itemId) |
||||
|
||||
const imgCounter = size(gallery) |
||||
|
||||
useEffect(() => { |
||||
if (sliderItemId === imgCounter) { |
||||
setSliderItemId(0) |
||||
} |
||||
const getSliderInterval = setInterval(() => { |
||||
setSliderItemId(sliderItemId + 1) |
||||
}, 5000) |
||||
return () => clearInterval(getSliderInterval) |
||||
}, [imgCounter, sliderItemId]) |
||||
|
||||
return { |
||||
buttonColor: tournamentInfo?.button_color, |
||||
buttonLexic, |
||||
description, |
||||
gallery, |
||||
logo: tournamentInfo?.media.logo, |
||||
logoInsports: tournamentInfo?.logo_insports, |
||||
onButtonClick, |
||||
onSliderSwitchClick, |
||||
period, |
||||
redirectToHomePage, |
||||
sliderItemId, |
||||
teams: tournamentInfo?.teams, |
||||
title, |
||||
tournamentInfo, |
||||
} |
||||
} |
||||
@ -1,134 +0,0 @@ |
||||
import format from 'date-fns/format' |
||||
|
||||
import map from 'lodash/map' |
||||
|
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
|
||||
import { useTournamentLanding } from './hooks' |
||||
import { TeamLogoImg } from './TeamLogoImg' |
||||
|
||||
import { |
||||
Wrapper, |
||||
InsportsLogo, |
||||
HeaderWrapper, |
||||
Footer, |
||||
BlockWrapper, |
||||
TournamentInfo, |
||||
DateInfo, |
||||
InsportsImg, |
||||
TournamentMedia, |
||||
TournamentLogo, |
||||
TournamentTitle, |
||||
TournamentButton, |
||||
MainInfoContainer, |
||||
TournamentDescription, |
||||
TeamsLogo, |
||||
SliderContainer, |
||||
SliderWrapper, |
||||
MainLogoImg, |
||||
MainLogoWrapper, |
||||
SliderSwitch, |
||||
SliderSwitchItem, |
||||
SliderImg, |
||||
LogoBackground, |
||||
TournamentInfoContainer, |
||||
} from './styled' |
||||
|
||||
const TournamentLanding = () => { |
||||
const { |
||||
buttonColor, |
||||
buttonLexic, |
||||
description, |
||||
gallery, |
||||
logo, |
||||
logoInsports, |
||||
onButtonClick, |
||||
onSliderSwitchClick, |
||||
period, |
||||
redirectToHomePage, |
||||
sliderItemId, |
||||
teams, |
||||
title, |
||||
tournamentInfo, |
||||
} = useTournamentLanding() |
||||
|
||||
if (!tournamentInfo) return null |
||||
|
||||
const currentYear = format(new Date(), 'Y') |
||||
|
||||
return ( |
||||
<Wrapper> |
||||
<HeaderWrapper> |
||||
{isMobileDevice && <TournamentLogo src={logo} />} |
||||
<InsportsLogo onClick={redirectToHomePage} /> |
||||
</HeaderWrapper> |
||||
<MainInfoContainer> |
||||
<BlockWrapper> |
||||
{ |
||||
gallery |
||||
? ( |
||||
<SliderWrapper> |
||||
<SliderContainer> |
||||
{map(gallery, (img, itemId) => ( |
||||
<SliderImg |
||||
isAnimatedImg={itemId === sliderItemId} |
||||
key={img.id} |
||||
src={img.url} |
||||
/> |
||||
))} |
||||
</SliderContainer> |
||||
<SliderSwitch> |
||||
{map(gallery, (img, itemId) => ( |
||||
<SliderSwitchItem |
||||
onClick={() => onSliderSwitchClick(itemId)} |
||||
slideOpacity={itemId === sliderItemId} |
||||
key={img.id} |
||||
/> |
||||
))} |
||||
</SliderSwitch> |
||||
</SliderWrapper> |
||||
) |
||||
: ( |
||||
<MainLogoWrapper> |
||||
<LogoBackground /> |
||||
<MainLogoImg src={logo} /> |
||||
</MainLogoWrapper> |
||||
) |
||||
} |
||||
<TournamentInfoContainer> |
||||
<TournamentInfo> |
||||
<DateInfo t={period} /> |
||||
<TournamentTitle t={title} /> |
||||
<TournamentDescription t={description} /> |
||||
<TournamentButton |
||||
buttonColor={buttonColor} |
||||
onClick={onButtonClick} |
||||
> |
||||
<T9n t={buttonLexic} /> |
||||
</TournamentButton> |
||||
</TournamentInfo> |
||||
<TournamentMedia> |
||||
{gallery && <TournamentLogo src={logo} />} |
||||
{teams && ( |
||||
<TeamsLogo> |
||||
{map(teams, (item) => ( |
||||
<TeamLogoImg |
||||
key={item.id} |
||||
src={item.logo} |
||||
/> |
||||
))} |
||||
</TeamsLogo> |
||||
)} |
||||
{logoInsports && <InsportsImg src='/images/insports-logo.svg' />} |
||||
</TournamentMedia> |
||||
</TournamentInfoContainer> |
||||
</BlockWrapper> |
||||
</MainInfoContainer> |
||||
<Footer>©inSports.tv {currentYear}</Footer> |
||||
</Wrapper> |
||||
) |
||||
} |
||||
|
||||
export default TournamentLanding |
||||
@ -0,0 +1,25 @@ |
||||
import { API_ROOT } from 'config' |
||||
import { callApi } from 'helpers' |
||||
|
||||
export type LandingMedia = { |
||||
logo_url: string, |
||||
} |
||||
|
||||
type Args = { |
||||
sport_id: number, |
||||
tournament_id?: number, |
||||
} |
||||
|
||||
export const getLandingLogo = async ({ |
||||
sport_id, |
||||
tournament_id, |
||||
}: Args): Promise<LandingMedia> => { |
||||
const config = { |
||||
method: 'GET', |
||||
} |
||||
|
||||
return callApi({ |
||||
config, |
||||
url: `${API_ROOT}/v1/tournaments/${sport_id}/${tournament_id}/media`, |
||||
}) |
||||
} |
||||
@ -1,21 +1,35 @@ |
||||
import isUndefined from 'lodash/isUndefined' |
||||
|
||||
import { API_ROOT } from 'config' |
||||
import { callApi } from 'helpers' |
||||
|
||||
type Args = { |
||||
matchId: number, |
||||
matchId?: number, |
||||
sportType: number, |
||||
tournamentId?: number, |
||||
} |
||||
|
||||
type LandingStatus = { |
||||
landing_id: number, |
||||
season_id: number, |
||||
sport_id: number, |
||||
tournament_id: number, |
||||
url_landing: string, |
||||
} |
||||
|
||||
export const getLandingStatus = async ({ |
||||
matchId, |
||||
sportType, |
||||
}: Args): Promise<{landing_id: number | null}> => { |
||||
tournamentId, |
||||
}: Args): Promise<LandingStatus> => { |
||||
const config = { |
||||
method: 'GET', |
||||
} |
||||
|
||||
return callApi({ |
||||
config, |
||||
url: `${API_ROOT}/v1/landings/${sportType}/${matchId}/status`, |
||||
url: `${API_ROOT}/v1/landings/status/${sportType}?${ |
||||
isUndefined(matchId) ? '' : `match_id=${matchId}`}${ |
||||
isUndefined(tournamentId) ? '' : `tournament_id=${tournamentId}`}`,
|
||||
}) |
||||
} |
||||
|
||||
Loading…
Reference in new issue