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 { 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 = ({ children }: HeaderProps) => ( |
||||
export const Header = () => { |
||||
const isOnHome = useRouteMatch(PAGES.home)?.isExact |
||||
const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact |
||||
return ( |
||||
<Wrapper> |
||||
<Menu /> |
||||
{children} |
||||
{!isOnHome && <HomeButtonLink to={PAGES.home} />} |
||||
{isMatch |
||||
? ( |
||||
<FilterWrapper size='900px'> |
||||
<Search /> |
||||
</FilterWrapper> |
||||
) |
||||
: ( |
||||
<Fragment> |
||||
<SearchWrapper> |
||||
<Search /> |
||||
</SearchWrapper> |
||||
|
||||
<FilterWrapper> |
||||
<DateFilter /> |
||||
</FilterWrapper> |
||||
|
||||
<FilterWrapper> |
||||
<MatchStatusFilter /> |
||||
</FilterWrapper> |
||||
|
||||
{isOnHome && ( |
||||
<FilterWrapper> |
||||
<SportTypeFilter /> |
||||
<TournamentFilter /> |
||||
</FilterWrapper> |
||||
)} |
||||
</Fragment> |
||||
)} |
||||
</Wrapper> |
||||
) |
||||
} |
||||
|
||||
@ -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; |
||||
` |
||||
|
||||
@ -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 styled from 'styled-components' |
||||
|
||||
const TempPageTitle = styled.span` |
||||
padding: 20px; |
||||
font-size: 20px; |
||||
color: white; |
||||
` |
||||
import { ProfileTypes } from 'config' |
||||
|
||||
export const TournamentPage = () => ( |
||||
<TempPageTitle>TOURNAMENT PAGE</TempPageTitle> |
||||
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 ( |
||||
<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