From 2fb847c6c5c8356bf36f4cd09e051d18927b6272 Mon Sep 17 00:00:00 2001 From: Armen <35077035+Armen9393@users.noreply.github.com> Date: Fri, 14 Aug 2020 17:30:36 +0300 Subject: [PATCH] Ott 43 tournaments header (#82) --- package.json | 2 +- public/images/home-btn-hover.svg | 7 ++ public/images/home-btn.svg | 7 ++ src/config/lexics/homeLexics.tsx | 7 -- src/config/lexics/indexLexics.tsx | 4 ++ src/config/lexics/playerLexics.tsx | 10 --- src/config/procedures.tsx | 1 + src/features/App/AuthenticatedApp.tsx | 72 +++++++++++-------- src/features/App/index.tsx | 1 + src/features/Header/index.tsx | 66 ++++++++++++++--- src/features/Header/styled.tsx | 26 +++++++ .../components/SportTypeFilter/hooks.tsx | 1 - .../HeaderFilters/store/hooks/index.tsx | 1 - src/features/HomePage/index.tsx | 51 +++---------- src/features/HomePage/styled.tsx | 7 -- src/features/MatchCard/CardLive/index.tsx | 1 - src/features/MatchPage/index.tsx | 3 +- src/features/Menu/styled.tsx | 4 +- src/features/OutsideClick/index.tsx | 8 ++- src/features/PlayerPage/index.tsx | 20 ++---- src/features/ProfileCard/index.tsx | 2 + src/features/ProfileCard/styled.tsx | 9 ++- src/features/Search/index.tsx | 2 +- src/features/Search/styled.tsx | 1 + src/features/TournamentPage/hooks.tsx | 46 ++++++++++++ src/features/TournamentPage/index.tsx | 38 +++++++--- .../UserAccountSubscription/styled.tsx | 2 +- src/helpers/getProfileFallbackLogo/index.tsx | 2 +- src/requests/getTournamentInfo.tsx | 39 ++++++++++ src/requests/index.tsx | 1 + 30 files changed, 297 insertions(+), 144 deletions(-) create mode 100644 public/images/home-btn-hover.svg create mode 100644 public/images/home-btn.svg delete mode 100644 src/config/lexics/homeLexics.tsx delete mode 100644 src/config/lexics/playerLexics.tsx create mode 100644 src/features/TournamentPage/hooks.tsx create mode 100644 src/requests/getTournamentInfo.tsx diff --git a/package.json b/package.json index e0843a6a..4f53754f 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@types/react-router-dom": "^5.1.5", "@types/styled-components": "^5.1.0", "commitizen": "^4.1.2", - "eslint": "6.8.0", + "eslint": "^6.8.0", "eslint-config-airbnb": "18.1.0", "eslint-plugin-import": "^2.20.1", "eslint-plugin-jsx-a11y": "^6.2.3", diff --git a/public/images/home-btn-hover.svg b/public/images/home-btn-hover.svg new file mode 100644 index 00000000..78224f47 --- /dev/null +++ b/public/images/home-btn-hover.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/home-btn.svg b/public/images/home-btn.svg new file mode 100644 index 00000000..c50548b7 --- /dev/null +++ b/public/images/home-btn.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/config/lexics/homeLexics.tsx b/src/config/lexics/homeLexics.tsx deleted file mode 100644 index 0b408a0c..00000000 --- a/src/config/lexics/homeLexics.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { indexLexics } from './indexLexics' - -export const homeLexics = { - ...indexLexics, - - video_from_my_subscriptions: 13023, -} diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 9639ab88..b0633f4c 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -1,8 +1,11 @@ import { proceduresLexics } from './procedures' export const indexLexics = { + add_to_favorites: 1701, + added_to_favorites: 13048, basketball: 6960, broadcast: 13049, + cm: 817, features: 13051, football: 6958, full_game: 13028, @@ -13,6 +16,7 @@ export const indexLexics = { highlights: 13033, hockey: 6959, interview: 13031, + kg: 652, kickoff_in: 13027, live: 13024, logout: 4306, diff --git a/src/config/lexics/playerLexics.tsx b/src/config/lexics/playerLexics.tsx deleted file mode 100644 index eded7648..00000000 --- a/src/config/lexics/playerLexics.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { indexLexics } from './indexLexics' - -export const playerLexics = { - ...indexLexics, - - add_to_favorites: 1701, - added_to_favorites: 13048, - cm: 817, - kg: 652, -} diff --git a/src/config/procedures.tsx b/src/config/procedures.tsx index d213e4be..b3dacb83 100644 --- a/src/config/procedures.tsx +++ b/src/config/procedures.tsx @@ -6,6 +6,7 @@ export const PROCEDURES = { get_player_info: 'get_player_info', get_players_teams_tournaments: 'get_players_teams_tournaments', get_sport_list: 'get_sport_list', + get_tournament_info: 'get_tournament_info', get_tournament_list: 'get_tournament_list', get_user_favorites: 'get_user_favorites', logout_user: 'logout_user', diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx index f447453c..58ee7fd6 100644 --- a/src/features/App/AuthenticatedApp.tsx +++ b/src/features/App/AuthenticatedApp.tsx @@ -5,8 +5,9 @@ import { Switch, } from 'react-router-dom' +import { indexLexics } from 'config/lexics/indexLexics' +import { useLexicsConfig } from 'features/LexicsStore' import { PAGES } from 'config' - import { HomePage } from 'features/HomePage' import { TeamPage } from 'features/TeamPage' import { MatchPage } from 'features/MatchPage' @@ -15,36 +16,51 @@ import { TournamentPage } from 'features/TournamentPage' import { LanguageSelect } from 'features/LanguageSelect' import { UserAccount } from 'features/UserAccount' import { ScoreStore, ToggleScore } from 'features/ToggleScore' +import { Header } from 'features/Header' +import { MainWrapper } from 'features/MainWrapper' +import { + HeaderFiltersStore, +} from 'features/HeaderFilters' +import { UserFavorites } from 'features/UserFavorites' -export const AuthenticatedApp = () => ( - - - - - - - +export const AuthenticatedApp = () => { + useLexicsConfig(indexLexics) - - - + return ( + + + + + + + - - - - - - + + + +
+ + + - - - + + + - - - + + + + + + + + + - - - -) + + + + + + ) +} diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx index f4dc79c5..9363aa75 100644 --- a/src/features/App/index.tsx +++ b/src/features/App/index.tsx @@ -15,6 +15,7 @@ const history = createBrowserHistory() const Main = () => { const { token } = useAuthStore() + return ( { diff --git a/src/features/Header/index.tsx b/src/features/Header/index.tsx index 1f63d92f..97cc2270 100644 --- a/src/features/Header/index.tsx +++ b/src/features/Header/index.tsx @@ -1,16 +1,60 @@ -import React, { ReactNode } from 'react' +import React, { Fragment } from 'react' +import { useRouteMatch } from 'react-router-dom' import { Menu } from 'features/Menu' +import { Search } from 'features/Search' -import { Wrapper } from './styled' +import { + DateFilter, + MatchStatusFilter, + SportTypeFilter, + TournamentFilter, +} from 'features/HeaderFilters' -type HeaderProps = { - children: ReactNode, -} +import { PAGES } from 'config' + +import { + Wrapper, + FilterWrapper, + HomeButtonLink, + SearchWrapper, +} from './styled' + +export const Header = () => { + const isOnHome = useRouteMatch(PAGES.home)?.isExact + const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact + return ( + + + {!isOnHome && } + {isMatch + ? ( + + + + ) + : ( + + + + -export const Header = ({ children }: HeaderProps) => ( - - - {children} - -) + + + + + + + + + {isOnHome && ( + + + + + )} + + )} + + ) +} diff --git a/src/features/Header/styled.tsx b/src/features/Header/styled.tsx index 4936b1c8..6eebaa59 100644 --- a/src/features/Header/styled.tsx +++ b/src/features/Header/styled.tsx @@ -1,6 +1,32 @@ import styled from 'styled-components/macro' +import { Link } from 'react-router-dom' +export const HomeButtonLink = styled(Link)` + width: 55px; + height: 48px; + background-image: url('/images/home-btn.svg'); + background-repeat: no-repeat; + background-position: center; + &:hover{ + background-image: url('/images/home-btn-hover.svg'); + cursor:pointer; + } +` export const Wrapper = styled.header` display: flex; padding-top: 16px; + margin-bottom: 30px; +` +export const FilterWrapper = styled.div<{ size?: string }>` + width: ${({ size }) => size || '288px'}; + height: 48px; + margin-right: 16px; + display: flex; +` +export const SearchWrapper = styled(FilterWrapper)` + width: ${({ size }) => size || '288px'}; + height: 48px; + margin-right: 16px; + margin-left: 57px; + display: flex; ` diff --git a/src/features/HeaderFilters/components/SportTypeFilter/hooks.tsx b/src/features/HeaderFilters/components/SportTypeFilter/hooks.tsx index 8989e140..9fc75402 100644 --- a/src/features/HeaderFilters/components/SportTypeFilter/hooks.tsx +++ b/src/features/HeaderFilters/components/SportTypeFilter/hooks.tsx @@ -32,7 +32,6 @@ export const useSportTypeFilter = () => { } const selectedSportType = find(sportList, (sport) => sport.id === selectedSportTypeId) - return { close, isOpen, diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index ec45f2f0..16c6ac7a 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -64,7 +64,6 @@ export const useFilters = () => { // можно эту логику вырезать и вставить в компонент матчей useEffect(() => { const formattedDate = format(startOfDay(selectedDate), dateFormat) - getMatches({ date: formattedDate, matchStatus: selectedMatchStatus, diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx index fa7bddbb..0ac28cf4 100644 --- a/src/features/HomePage/index.tsx +++ b/src/features/HomePage/index.tsx @@ -1,51 +1,16 @@ import React from 'react' -import { homeLexics } from 'config/lexics/homeLexics' -import { useLexicsConfig } from 'features/LexicsStore' -import { Header } from 'features/Header' -import { MainWrapper } from 'features/MainWrapper' -import { Search } from 'features/Search' import { - DateFilter, - MatchStatusFilter, - SportTypeFilter, - TournamentFilter, HeaderFiltersStore, } from 'features/HeaderFilters' -import { UserFavorites } from 'features/UserFavorites' import { Matches } from 'features/Matches' -import { FilterWrapper, Content } from './styled' +import { Content } from './styled' -export const HomePage = () => { - useLexicsConfig(homeLexics) - - return ( - - - -
- - - - - - - - - - - - - - - - -
- - - - - - ) -} +export const HomePage = () => ( + + + + + +) diff --git a/src/features/HomePage/styled.tsx b/src/features/HomePage/styled.tsx index 0c029bc6..117048c5 100644 --- a/src/features/HomePage/styled.tsx +++ b/src/features/HomePage/styled.tsx @@ -1,12 +1,5 @@ import styled from 'styled-components/macro' -export const FilterWrapper = styled.div` - width: 288px; - height: 48px; - margin-right: 16px; - display: flex; -` - export const Content = styled.main` margin-top: 75px; padding: 0 16px; diff --git a/src/features/MatchCard/CardLive/index.tsx b/src/features/MatchCard/CardLive/index.tsx index a3f64ecd..5adb12d3 100644 --- a/src/features/MatchCard/CardLive/index.tsx +++ b/src/features/MatchCard/CardLive/index.tsx @@ -76,7 +76,6 @@ export const CardLive = ({ }, [getMs]) if (isOpen) return - return ( ( - MATCH PAGE + MATCH PAGE! ) diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx index 34a22809..38b799cf 100644 --- a/src/features/Menu/styled.tsx +++ b/src/features/Menu/styled.tsx @@ -7,8 +7,10 @@ export const Wrapper = styled.nav` display: flex; justify-content: center; align-items: center; - width: 320px; + width: auto; height: 48px; + margin-left: 90px; + margin-right: 14px; ` export const ToggleButton = styled.button` width: 18px; diff --git a/src/features/OutsideClick/index.tsx b/src/features/OutsideClick/index.tsx index 822cb023..030bba15 100644 --- a/src/features/OutsideClick/index.tsx +++ b/src/features/OutsideClick/index.tsx @@ -8,20 +8,24 @@ import { useOutsideClickEffect } from './hooks' type Props = { /** элемент, которому необходим функционал `OutsideClick` */ children: ReactNode, + fullSize?: boolean, /** функция-коллбек, отрабатывающая по клику вне области элемента */ onClick: () => void, } -const OutsideClickWrapper = styled.div`` +const OutsideClickWrapper = styled.div<{fullSize?:boolean}>` + width: ${({ fullSize }) => (fullSize ? '100%' : 'auto')} +` export const OutsideClick = ({ children, + fullSize, onClick, }: Props) => { const wrapperRef = useOutsideClickEffect({ onClick }) return ( - + {children} ) diff --git a/src/features/PlayerPage/index.tsx b/src/features/PlayerPage/index.tsx index 8ad18e08..174ef24d 100644 --- a/src/features/PlayerPage/index.tsx +++ b/src/features/PlayerPage/index.tsx @@ -1,11 +1,7 @@ import React from 'react' import { ProfileTypes } from 'config' -import { playerLexics } from 'config/lexics/playerLexics' -import { useLexicsConfig } from 'features/LexicsStore' -import { Header } from 'features/Header' import { MainWrapper } from 'features/MainWrapper' -import { Search } from 'features/Search' import { UserFavorites } from 'features/UserFavorites' import { ProfileCard } from 'features/ProfileCard' import { UserFavoritesStore } from 'features/UserFavorites/store' @@ -18,21 +14,17 @@ export const PlayerPage = () => { name, sportType, } = usePlayerPage() - useLexicsConfig(playerLexics) return ( -
- - -
+ ) diff --git a/src/features/ProfileCard/index.tsx b/src/features/ProfileCard/index.tsx index 4a645656..26a2937a 100644 --- a/src/features/ProfileCard/index.tsx +++ b/src/features/ProfileCard/index.tsx @@ -23,6 +23,7 @@ export const ProfileCard = (props: ProfileCardProps) => { const { infoItems, name, + profileType, } = props const { @@ -38,6 +39,7 @@ export const ProfileCard = (props: ProfileCardProps) => { src={logo} alt={name} onError={onError} + profileType={profileType} />
{name} diff --git a/src/features/ProfileCard/styled.tsx b/src/features/ProfileCard/styled.tsx index a5ca4e98..23f05273 100644 --- a/src/features/ProfileCard/styled.tsx +++ b/src/features/ProfileCard/styled.tsx @@ -1,5 +1,7 @@ import styled from 'styled-components/macro' +import { ProfileTypes } from 'config' + export const Wrapper = styled.div` display: flex; max-width: 815px; @@ -15,12 +17,13 @@ export const Name = styled.h1` color: #fff; ` -export const Logo = styled.img` +export const Logo = styled.img<{ profileType: number }>` width: 88px; height: 88px; margin-right: 15px; - border-radius: 50%; - background-color: #000; + border-radius: ${({ profileType }) => ( + profileType === ProfileTypes.TOURNAMENTS ? '0' : '50%' + )}; ` export const Details = styled.div`` diff --git a/src/features/Search/index.tsx b/src/features/Search/index.tsx index caabb9f1..b412f739 100644 --- a/src/features/Search/index.tsx +++ b/src/features/Search/index.tsx @@ -29,7 +29,7 @@ export const Search = () => { } = useSearch() return ( - +
{ + const [tournamentProfile, setTournamentProfile] = useState(null) + const { sportType } = useSportNameParam() + const pageId = usePageId() + const { suffix } = useLexicsStore() + + const { + setSelectedSportTypeId, + setSelectedTournamentId, + } = useHeaderFiltersStore() + + setSelectedSportTypeId(sportType) + setSelectedTournamentId(pageId) + + const { + [`name_${suffix}` as Name]: name = '', + } = tournamentProfile || {} + + const { + [`name_${suffix}` as Name]: country = '', + } = tournamentProfile?.country || {} + + useEffect(() => { + getTournamentInfo(sportType, pageId) + .then(setTournamentProfile) + }, [pageId, sportType]) + + return { + infoItems: [country], + name, + sportType, + } +} diff --git a/src/features/TournamentPage/index.tsx b/src/features/TournamentPage/index.tsx index 38b9f0c9..572a935b 100644 --- a/src/features/TournamentPage/index.tsx +++ b/src/features/TournamentPage/index.tsx @@ -1,12 +1,32 @@ import React from 'react' -import styled from 'styled-components' -const TempPageTitle = styled.span` - padding: 20px; - font-size: 20px; - color: white; -` +import { ProfileTypes } from 'config' -export const TournamentPage = () => ( - TOURNAMENT PAGE -) +import { MainWrapper } from 'features/MainWrapper' +import { UserFavorites } from 'features/UserFavorites' +import { ProfileCard } from 'features/ProfileCard' +import { UserFavoritesStore } from 'features/UserFavorites/store' + +import { useTournamentPage } from './hooks' + +export const TournamentPage = () => { + const { + infoItems, + name, + sportType, + } = useTournamentPage() + + return ( + + + + + + + ) +} diff --git a/src/features/UserAccount/UserAccountSubscription/styled.tsx b/src/features/UserAccount/UserAccountSubscription/styled.tsx index 496fd98f..2e31d6d9 100644 --- a/src/features/UserAccount/UserAccountSubscription/styled.tsx +++ b/src/features/UserAccount/UserAccountSubscription/styled.tsx @@ -3,7 +3,7 @@ import styled, { css } from 'styled-components/macro' import { Label as CheckboxLabel } from 'features/Common/Checkbox/styled' import { Label as RadioLabel } from 'features/Common/Radio/styled' -import { TextWrapper } from '../CardNumber/styled'; +import { TextWrapper } from '../CardNumber/styled' export type TUserAccountSubscriptionWrapper = { noMarginBottom?: boolean, diff --git a/src/helpers/getProfileFallbackLogo/index.tsx b/src/helpers/getProfileFallbackLogo/index.tsx index e1392e52..959a8187 100644 --- a/src/helpers/getProfileFallbackLogo/index.tsx +++ b/src/helpers/getProfileFallbackLogo/index.tsx @@ -10,7 +10,7 @@ const FALLBACK_LOGOS = { [SportTypes.FOOTBALL]: { [ProfileTypes.PLAYERS]: 'https://football.instatscout.com/images/player-no-photo.png', [ProfileTypes.TEAMS]: 'https://football.instatscout.com/images/team-no-photo.png', - [ProfileTypes.TOURNAMENTS]: 'https://football.instatscout.com/images/tournament-no-photo.png', + [ProfileTypes.TOURNAMENTS]: 'https://hockey.instatscout.com/images/tournaments/180/no-photo.png', }, [SportTypes.HOCKEY]: { diff --git a/src/requests/getTournamentInfo.tsx b/src/requests/getTournamentInfo.tsx new file mode 100644 index 00000000..904da37e --- /dev/null +++ b/src/requests/getTournamentInfo.tsx @@ -0,0 +1,39 @@ +import { + DATA_URL, + PROCEDURES, +} from 'config' +import { callApi, getResponseData } from 'helpers' + +const proc = PROCEDURES.get_tournament_info + +export type TournamentInfo = { + country: { + id: number, + name_eng: string, + name_rus: string, + }, + id: number, + is_favorite: boolean, + name_eng: string, + name_rus: string, + short_name_eng: string, + short_name_rus: string, +} | null + +export const getTournamentInfo = (sportId: number, tournamentId: number) +: Promise => { + const config = { + body: { + params: { + _p_sport: sportId, + _p_tournament_id: tournamentId, + }, + proc, + }, + } + + return callApi({ + config, + url: DATA_URL, + }).then(getResponseData(proc)) +} diff --git a/src/requests/index.tsx b/src/requests/index.tsx index 316661af..9775005a 100644 --- a/src/requests/index.tsx +++ b/src/requests/index.tsx @@ -9,3 +9,4 @@ export * from './getMatches' export * from './getUserSportFavs' export * from './modifyUserSportFavs' export * from './getSportTournaments' +export * from './getTournamentInfo'