diff --git a/src/components/ItemInfo/ItemInfo.tsx b/src/components/ItemInfo/ItemInfo.tsx new file mode 100644 index 00000000..0bc42ffc --- /dev/null +++ b/src/components/ItemInfo/ItemInfo.tsx @@ -0,0 +1,28 @@ +import { ProfileTypes, PROFILE_NAMES } from 'config' + +import { + ScWrapper, + ScLogo, + ScName, +} from './styled' + +type ItemInfoType = { + active?: boolean, + id: number, + name: string, + onClick: (val: any) => void, + type: ProfileTypes, +} + +export const ItemInfo = ({ + active, + id, + name, + onClick, + type, +}: ItemInfoType) => ( + + + {name} + +) diff --git a/src/components/ItemInfo/styled.tsx b/src/components/ItemInfo/styled.tsx new file mode 100644 index 00000000..9be91119 --- /dev/null +++ b/src/components/ItemInfo/styled.tsx @@ -0,0 +1,56 @@ +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' + +export const ScLogo = styled.img` + width: 24px; + object-fit: cover; + margin-right: 10px; + + ${isMobileDevice + ? css` + width: 15px; + ` + : ''}; +` + +export const ScName = styled.span<{active?: boolean}>` + font-weight: 400; + font-size: 17px; + line-height: 21px; + + ${({ active }) => (active + ? css` + font-weight: 700; + font-size: 17px; + line-height: 21px; + ` + : '')}; + + ${isMobileDevice + ? css` + font-size: 12px; + line-height: 15px + ` + : ''}; +` + +export const ScWrapper = styled.div` + display: flex; + align-items: center; + padding: 5px 10px; + max-width: 300px; + + :hover { + background: rgba(255, 255, 255, 0.2); + border-radius: 2px; + cursor: pointer; + + ${isMobileDevice + ? css` + font-size: 12px; + line-height: 15px + ` + : ''}; +} +` diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index ad395906..8bb9b918 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -6,6 +6,7 @@ import { highlightsPageLexic } from './highlightsPageLexic' const matchPopupLexics = { actions: 1020, apply: 13491, + choose_fav_team: 19776, commentators: 15424, episode_duration: 13410, events: 1020, @@ -14,6 +15,7 @@ const matchPopupLexics = { from_start_match: 15395, gk: 3515, go_back_to_match: 13405, + group: 7850, half_time: 1033, languages: 15030, match_interviews: 13031, diff --git a/src/config/routes.tsx b/src/config/routes.tsx index b307e805..ea4477eb 100644 --- a/src/config/routes.tsx +++ b/src/config/routes.tsx @@ -12,8 +12,8 @@ export const APIS = { auth: 'https://auth.insports.tv', }, staging: { - api: 'https://api.test.insports.tv', - auth: 'https://auth.test.insports.tv', + api: 'https://api.insports.tv', + auth: 'https://auth.insports.tv', }, } diff --git a/src/features/MatchPage/components/FavouriteTeam/hooks.tsx b/src/features/MatchPage/components/FavouriteTeam/hooks.tsx new file mode 100644 index 00000000..8611ad4e --- /dev/null +++ b/src/features/MatchPage/components/FavouriteTeam/hooks.tsx @@ -0,0 +1,108 @@ +import { useEffect, useState } from 'react' + +import { + getFavouriteTeam, + FavouriteTeams, + ResponseType, +} from 'requests/getFavouriteTeam' +import { saveFavouriteTeam } from 'requests/saveFavouriteTeam' + +/* eslint-disable */ +const groupTeams = { + 1086: 'group_1', + 7032: 'group_1', + 6132: 'group_1', + 7321: 'group_1', + 62: 'group_1', + 7329: 'group_1', + 17958: 'group_1', + 1076: 'group_1', + 6337: 'group_1', + 9114: 'group_1', + 9143: 'group_1', + 7011: 'group_1', + 6996: 'group_1', + 3945: 'group_1', + 6330: 'group_1', + 7346: 'group_1', + 6331: 'group_1', + 31608: 'group_1', + 6335: 'group_1', + 6332: 'group_1', + 9108: 'group_1', + 1089: 'group_2', + 7102: 'group_2', + 7018: 'group_2', + 6549: 'group_2', + 3965: 'group_2', + 2103: 'group_2', + 167340: 'group_2', + 6606: 'group_2', + 7016: 'group_2', + 7015: 'group_2', + 7288: 'group_2', + 1093: 'group_2', + 1092: 'group_2', + 1085: 'group_2', + 3882: 'group_2', + 7307: 'group_2', + 7306: 'group_2', + 7108: 'group_2', + 1088: 'group_2', + 1077: 'group_2', +} + +export const useFavouriteTeam = () => { + const [teams, setTeams] = useState>([]) + const [active, setActive] = useState(null) + const [isOpen, setIsOpen] = useState(false) + const [group1, setGroup1] = useState>([]) + const [group2, setGroup2] = useState>([]) + + const changeActive = (team: FavouriteTeams) => { + setActive((prev) => (prev === team.id ? null : team.id)) + } + + const onSaveFavouriteTeam = () => { + active && saveFavouriteTeam( + { + answer_id: active, + survey_id: 1, + }) + setIsOpen(false) + } + + useEffect(() => { + getFavouriteTeam({ + country_id: 77, + season: 30, + sport_id: 1, + tournament_id: 131, + }).then(({ data, status }: ResponseType) => { + if(!status) { + setTeams(data) + setIsOpen(true) + }else{ + return + } + }) + }, []) + + useEffect(() => { + setGroup1(teams?.filter( + (team: FavouriteTeams) => groupTeams[team.id as keyof typeof groupTeams] === 'group_1', + )) + setGroup2(teams?.filter( + (team: FavouriteTeams) => groupTeams[team.id as keyof typeof groupTeams] === 'group_2', + )) + }, [teams]) + + return { + active, + changeActive, + group1, + group2, + isOpen, + onSaveFavouriteTeam, + } +} diff --git a/src/features/MatchPage/components/FavouriteTeam/index.tsx b/src/features/MatchPage/components/FavouriteTeam/index.tsx new file mode 100644 index 00000000..1c2c898c --- /dev/null +++ b/src/features/MatchPage/components/FavouriteTeam/index.tsx @@ -0,0 +1,85 @@ +import { T9n } from 'features/T9n' + +import { Wrapper } from 'features/PreferencesPopup/styled' + +import { ItemInfo } from 'components/ItemInfo/ItemInfo' + +import type { FavouriteTeams } from 'requests/getFavouriteTeam' + +import { useFavouriteTeam } from './hooks' + +import { + Button, + ButtonsBlock, + ScBody, + ScGroup, + ScGroupName, + ScGroups, + ScHeaderTitle, + ScModalContainer, + ScTeamsList, +} from './styled' + +export const FavouriteTeamPopup = () => { + const { + active, + changeActive, + group1, + group2, + isOpen, + onSaveFavouriteTeam, + } = useFavouriteTeam() + + return ( + + + + + + + + + + 1 + + + {group1?.map((team: FavouriteTeams) => ( + changeActive(team)} + /> + ))} + + + + + 2 + + + {group2?.map((team: FavouriteTeams) => ( + changeActive(team)} + /> + ))} + + + + + + + + + + ) +} diff --git a/src/features/MatchPage/components/FavouriteTeam/styled.tsx b/src/features/MatchPage/components/FavouriteTeam/styled.tsx new file mode 100644 index 00000000..8827b27c --- /dev/null +++ b/src/features/MatchPage/components/FavouriteTeam/styled.tsx @@ -0,0 +1,140 @@ +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' + +import { ModalWindow } from 'features/Modal/styled' +import { Modal as BaseModal } from 'features/Modal' +import { customScrollbar, ButtonSolid } from 'features/Common' +import { HeaderTitle } from 'features/PreferencesPopup/styled' + +export const ScModalContainer = styled(BaseModal)` + ${ModalWindow} { + width: 1446px; + height: 670px; + padding: 0; + background: #333333; + border-radius: 5px; + ${customScrollbar} + + ${isMobileDevice + ? css` + width: 95vw; + height: 95vh; + ` + : ''}; + } +` + +export const ScBody = styled.div` + padding: 30px 0px; + display: flex; + flex-direction: column; + + ${isMobileDevice + ? css` + padding: 20px 0; + ` + : ''}; +` + +export const ScHeaderTitle = styled(HeaderTitle)` + display: flex; + justify-content: center; + width: 100%; + font-weight: 700; + font-size: 24px; + line-height: 34px; + + ${isMobileDevice + ? css` + font-size: 15px; + line-height: 18px; + ` + : ''}; +` + +export const ScGroups = styled.div` + display: flex; + flex-direction: row; + margin: 50px 70px; + width: 100%; + + ${isMobileDevice + ? css` + margin: 0; + margin-top: 20px; + width: auto; + overflow-y: auto; + ` + : ''}; +` + +export const ScGroup = styled.div` + width: 100%; + ${isMobileDevice + ? css` + height: 75vh; + + @media screen and (orientation: landscape){ + height: 60vh; + } + ` + : ''}; +` + +export const ScGroupName = styled.span` + display: block; + font-weight: 500; + font-size: 24px; + line-height: 28px; + margin-left: 10px; + + ${isMobileDevice + ? css` + font-size: 15px; + line-height: 17px; + ` + : ''}; +` + +export const ScTeamsList = styled.div` + display: flex; + flex-direction: column; + flex-wrap: wrap; + + max-height: 389px; + margin-top: 20px; + + ${isMobileDevice + ? css` + flex-wrap: unset; + max-height: unset; + + ` + : ''}; +` + +export const ButtonsBlock = styled.div` + display: flex; + justify-content: center; + + ${isMobileDevice + ? css` + margin-top: 15px; + ` + : ''}; +` + +export const Button = styled(ButtonSolid)` + width: 134px; + height: 50px; + background: #294FC4; + border-radius: 5px; + + ${isMobileDevice + ? css` + width: 300px; + height: 40px; + ` + : ''}; +` diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx index aa86b625..e4c15900 100644 --- a/src/features/MatchPage/index.tsx +++ b/src/features/MatchPage/index.tsx @@ -21,6 +21,7 @@ import { SubscriptionGuard } from './components/SubscriptionGuard' import { LiveMatch } from './components/LiveMatch' import { Wrapper } from './styled' import { FinishedMatch } from './components/FinishedMatch' +import { FavouriteTeamPopup } from './components/FavouriteTeam' const MatchPageComponent = () => { usePageLogger() @@ -62,7 +63,6 @@ const MatchPageComponent = () => { const sportName = history.location.pathname.split('/')[1] history.push(`/${sportName}/tournaments/${profile.tournament.id}`) } - return ( @@ -79,6 +79,7 @@ const MatchPageComponent = () => { + {profile?.tournament.id === 131 && } ) } diff --git a/src/features/TournamentPage/index.tsx b/src/features/TournamentPage/index.tsx index 3a13bb4d..83178e34 100644 --- a/src/features/TournamentPage/index.tsx +++ b/src/features/TournamentPage/index.tsx @@ -12,6 +12,8 @@ import { import { useTournamentPage } from './hooks' +import { FavouriteTeamPopup } from '../MatchPage/components/FavouriteTeam' + const TournamentPage = () => { usePageLogger() const { @@ -35,6 +37,7 @@ const TournamentPage = () => { + {tournamentId === 131 && } ) } diff --git a/src/requests/getFavouriteTeam.tsx b/src/requests/getFavouriteTeam.tsx new file mode 100644 index 00000000..0edd5f37 --- /dev/null +++ b/src/requests/getFavouriteTeam.tsx @@ -0,0 +1,39 @@ +import { API_ROOT } from 'config' + +import { callApi } from 'helpers' + +export type FavouriteTeamType = { + country_id?: number, + season: number, + sport_id: number, + tournament_id: number, +} + +export type FavouriteTeams = { + active?: boolean, + group?: string, + id: number, + name_en: string, + name_ru: string, +} + +export type ResponseType = { + data: Array, + msg: string, + status: string, +} + +export const getFavouriteTeam = async ({ + season, + sport_id, + tournament_id, +}: FavouriteTeamType): Promise => { + const config = { + method: 'GET', + } + + return callApi({ + config, + url: `${API_ROOT}/v1/survey/teams/${sport_id}/${tournament_id}/${season}`, + }) +} diff --git a/src/requests/saveFavouriteTeam.tsx b/src/requests/saveFavouriteTeam.tsx new file mode 100644 index 00000000..19dc0a0b --- /dev/null +++ b/src/requests/saveFavouriteTeam.tsx @@ -0,0 +1,25 @@ +import { API_ROOT } from 'config' +import { callApi } from 'helpers' + +type SaveFavouriteTeamType = { + answer_id: number, + survey_id: number, +} + +export const saveFavouriteTeam = async ({ + answer_id, + survey_id, +}: SaveFavouriteTeamType): Promise<{status: string}> => { + const config = { + body: { + answer_id, + survey_id, + }, + method: 'POST', + } + + return callApi({ + config, + url: `${API_ROOT}/v1/survey/answer`, + }) +}