Ott 43 tournaments header (#82)
Armen
5 years ago
committed by
GitHub
parent
53cd031d5e
commit
2fb847c6c5
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -1,7 +0,0 @@ |
|||||||
import { indexLexics } from './indexLexics' |
|
||||||
|
|
||||||
export const homeLexics = { |
|
||||||
...indexLexics, |
|
||||||
|
|
||||||
video_from_my_subscriptions: 13023, |
|
||||||
} |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
import { indexLexics } from './indexLexics' |
|
||||||
|
|
||||||
export const playerLexics = { |
|
||||||
...indexLexics, |
|
||||||
|
|
||||||
add_to_favorites: 1701, |
|
||||||
added_to_favorites: 13048, |
|
||||||
cm: 817, |
|
||||||
kg: 652, |
|
||||||
} |
|
||||||
@ -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 { Menu } from 'features/Menu' |
||||||
|
import { Search } from 'features/Search' |
||||||
|
|
||||||
import { Wrapper } from './styled' |
import { |
||||||
|
DateFilter, |
||||||
|
MatchStatusFilter, |
||||||
|
SportTypeFilter, |
||||||
|
TournamentFilter, |
||||||
|
} from 'features/HeaderFilters' |
||||||
|
|
||||||
type HeaderProps = { |
import { PAGES } from 'config' |
||||||
children: ReactNode, |
|
||||||
} |
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 ( |
||||||
|
<Wrapper> |
||||||
|
<Menu /> |
||||||
|
{!isOnHome && <HomeButtonLink to={PAGES.home} />} |
||||||
|
{isMatch |
||||||
|
? ( |
||||||
|
<FilterWrapper size='900px'> |
||||||
|
<Search /> |
||||||
|
</FilterWrapper> |
||||||
|
) |
||||||
|
: ( |
||||||
|
<Fragment> |
||||||
|
<SearchWrapper> |
||||||
|
<Search /> |
||||||
|
</SearchWrapper> |
||||||
|
|
||||||
export const Header = ({ children }: HeaderProps) => ( |
<FilterWrapper> |
||||||
<Wrapper> |
<DateFilter /> |
||||||
<Menu /> |
</FilterWrapper> |
||||||
{children} |
|
||||||
</Wrapper> |
<FilterWrapper> |
||||||
) |
<MatchStatusFilter /> |
||||||
|
</FilterWrapper> |
||||||
|
|
||||||
|
{isOnHome && ( |
||||||
|
<FilterWrapper> |
||||||
|
<SportTypeFilter /> |
||||||
|
<TournamentFilter /> |
||||||
|
</FilterWrapper> |
||||||
|
)} |
||||||
|
</Fragment> |
||||||
|
)} |
||||||
|
</Wrapper> |
||||||
|
) |
||||||
|
} |
||||||
|
|||||||
@ -1,6 +1,32 @@ |
|||||||
import styled from 'styled-components/macro' |
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` |
export const Wrapper = styled.header` |
||||||
display: flex; |
display: flex; |
||||||
padding-top: 16px; |
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; |
||||||
` |
` |
||||||
|
|||||||
@ -1,51 +1,16 @@ |
|||||||
import React from 'react' |
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 { |
import { |
||||||
DateFilter, |
|
||||||
MatchStatusFilter, |
|
||||||
SportTypeFilter, |
|
||||||
TournamentFilter, |
|
||||||
HeaderFiltersStore, |
HeaderFiltersStore, |
||||||
} from 'features/HeaderFilters' |
} from 'features/HeaderFilters' |
||||||
import { UserFavorites } from 'features/UserFavorites' |
|
||||||
import { Matches } from 'features/Matches' |
import { Matches } from 'features/Matches' |
||||||
|
|
||||||
import { FilterWrapper, Content } from './styled' |
import { Content } from './styled' |
||||||
|
|
||||||
export const HomePage = () => { |
export const HomePage = () => ( |
||||||
useLexicsConfig(homeLexics) |
<HeaderFiltersStore> |
||||||
|
<Content> |
||||||
return ( |
<Matches /> |
||||||
<HeaderFiltersStore> |
</Content> |
||||||
<MainWrapper> |
</HeaderFiltersStore> |
||||||
<UserFavorites /> |
) |
||||||
<Header> |
|
||||||
<FilterWrapper> |
|
||||||
<Search /> |
|
||||||
</FilterWrapper> |
|
||||||
|
|
||||||
<FilterWrapper> |
|
||||||
<DateFilter /> |
|
||||||
</FilterWrapper> |
|
||||||
|
|
||||||
<FilterWrapper> |
|
||||||
<MatchStatusFilter /> |
|
||||||
</FilterWrapper> |
|
||||||
|
|
||||||
<FilterWrapper> |
|
||||||
<SportTypeFilter /> |
|
||||||
<TournamentFilter /> |
|
||||||
</FilterWrapper> |
|
||||||
</Header> |
|
||||||
<Content> |
|
||||||
<Matches /> |
|
||||||
</Content> |
|
||||||
</MainWrapper> |
|
||||||
</HeaderFiltersStore> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|||||||
@ -0,0 +1,46 @@ |
|||||||
|
import type { TournamentInfo } from 'requests' |
||||||
|
|
||||||
|
import { useEffect, useState } from 'react' |
||||||
|
|
||||||
|
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
||||||
|
import { useLexicsStore } from 'features/LexicsStore' |
||||||
|
|
||||||
|
import { getTournamentInfo } from 'requests' |
||||||
|
|
||||||
|
import { useSportNameParam, usePageId } from 'hooks' |
||||||
|
|
||||||
|
type Name = 'name_rus' | 'name_eng' |
||||||
|
|
||||||
|
export const useTournamentPage = () => { |
||||||
|
const [tournamentProfile, setTournamentProfile] = useState<TournamentInfo>(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, |
||||||
|
} |
||||||
|
} |
||||||
@ -1,12 +1,32 @@ |
|||||||
import React from 'react' |
import React from 'react' |
||||||
import styled from 'styled-components' |
|
||||||
|
|
||||||
const TempPageTitle = styled.span` |
import { ProfileTypes } from 'config' |
||||||
padding: 20px; |
|
||||||
font-size: 20px; |
|
||||||
color: white; |
|
||||||
` |
|
||||||
|
|
||||||
export const TournamentPage = () => ( |
import { MainWrapper } from 'features/MainWrapper' |
||||||
<TempPageTitle>TOURNAMENT PAGE</TempPageTitle> |
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 ( |
||||||
|
<UserFavoritesStore> |
||||||
|
<MainWrapper> |
||||||
|
<UserFavorites /> |
||||||
|
<ProfileCard |
||||||
|
sportType={sportType} |
||||||
|
profileType={ProfileTypes.TOURNAMENTS} |
||||||
|
name={name} |
||||||
|
infoItems={infoItems} |
||||||
|
/> |
||||||
|
</MainWrapper> |
||||||
|
</UserFavoritesStore> |
||||||
|
) |
||||||
|
} |
||||||
|
|||||||
@ -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<TournamentInfo> => { |
||||||
|
const config = { |
||||||
|
body: { |
||||||
|
params: { |
||||||
|
_p_sport: sportId, |
||||||
|
_p_tournament_id: tournamentId, |
||||||
|
}, |
||||||
|
proc, |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
return callApi({ |
||||||
|
config, |
||||||
|
url: DATA_URL, |
||||||
|
}).then(getResponseData(proc)) |
||||||
|
} |
||||||
Loading…
Reference in new issue