frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

feat(890): added header menus to user account (#323)

Browse Source
keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan 5 years ago committed by GitHub
parent b717e2a1e6
commit ab7dae97f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 103 additions and 55 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      src/config/lexics/userAccount.tsx
  2. 17
      src/features/Menu/index.tsx
  3. 39
      src/features/UserAccount/components/Header/index.tsx
  4. 75
      src/features/UserAccount/index.tsx
  5. 19
      src/features/UserAccount/styled.tsx

8
src/config/lexics/userAccount.tsx
Unescape View File

@ -1,5 +1,12 @@
import { publicLexics } from 'config/lexics/public' import { publicLexics } from 'config/lexics/public'
const navigations = {
bank_card: 14205,
my_subscriptions: 8316,
payment_history: 14206,
personal_info: 14204,
}
export const userAccountLexics = { export const userAccountLexics = {
add_card: 8313, add_card: 8313,
change: 12614, change: 12614,
@ -18,5 +25,6 @@ export const userAccountLexics = {
select_subscription: 12583, select_subscription: 12583,
subscriptions: 13016, subscriptions: 13016,
user_account: 12928, user_account: 12928,
...navigations,
...publicLexics, ...publicLexics,
} }

17
src/features/Menu/index.tsx
Unescape View File

@ -15,6 +15,7 @@ import {
export const Menu = () => { export const Menu = () => {
const { logout } = useAuthStore() const { logout } = useAuthStore()
const isHomePage = useRouteMatch(PAGES.home)?.isExact const isHomePage = useRouteMatch(PAGES.home)?.isExact
const isUserAccount = useRouteMatch(PAGES.useraccount)
return ( return (
<Nav> <Nav>
@ -30,13 +31,15 @@ export const Menu = () => {
</MenuItem> </MenuItem>
) )
} }
<MenuItem> {!isUserAccount && (
<Tooltip lexic='user_account'> <MenuItem>
<Link to={`${PAGES.useraccount}/personal-info`}> <Tooltip lexic='user_account'>
<Icon image='userAccount' /> <Link to={`${PAGES.useraccount}/personal-info`}>
</Link> <Icon image='userAccount' />
</Tooltip> </Link>
</MenuItem> </Tooltip>
</MenuItem>
)}
<MenuItem onClick={logout}> <MenuItem onClick={logout}>
<Tooltip lexic='logout'> <Tooltip lexic='logout'>
<Icon image='logout' /> <Icon image='logout' />

39
src/features/UserAccount/components/Header/index.tsx
Unescape View File

@ -0,0 +1,39 @@
import { Link } from 'react-router-dom'
import styled from 'styled-components/macro'
import { devices, PAGES } from 'config'
import { LanguageSelect } from 'features/LanguageSelect'
import { HeaderGroup, MenuWrapper } from 'features/ProfileHeader/styled'
import { Menu } from 'features/Menu'
import { Logo } from 'features/Logo'
const HeaderStyled = styled.header`
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 45px;
height: 50px;
@media ${devices.tablet} {
margin-bottom: 20px;
}
`
export const Header = () => (
<HeaderStyled>
<HeaderGroup>
<Link to={PAGES.home}>
<Logo />
</Link>
</HeaderGroup>
<HeaderGroup>
<MenuWrapper>
<Menu />
</MenuWrapper>
<LanguageSelect />
</HeaderGroup>
</HeaderStyled>
)

75
src/features/UserAccount/index.tsx
Unescape View File

@ -1,11 +1,12 @@
import { Link, Route } from 'react-router-dom' import { Route } from 'react-router-dom'
import { PAGES } from 'config' import { PAGES } from 'config'
import { userAccountLexics } from 'config/lexics/userAccount' import { userAccountLexics } from 'config/lexics/userAccount'
import { useLexicsConfig } from 'features/LexicsStore' import { useLexicsConfig } from 'features/LexicsStore'
import { Logo } from 'features/Logo' import { T9n } from 'features/T9n'
import { Header } from './components/Header'
import { PagePersonalInfo } from './components/PagePersonalInfo' import { PagePersonalInfo } from './components/PagePersonalInfo'
import { PageBankCards } from './components/PageBankCards' import { PageBankCards } from './components/PageBankCards'
import { PageSubscriptions } from './components/PageSubscriptions' import { PageSubscriptions } from './components/PageSubscriptions'
@ -13,9 +14,9 @@ import { PagePaymentsHistory } from './components/PagePaymentsHistory'
import { import {
UserAccountWrapper, UserAccountWrapper,
ContentWrapper, ContentWrapper,
Body,
Aside, Aside,
Navigations, Navigations,
LogoWrapper,
StyledLink, StyledLink,
} from './styled' } from './styled'
@ -24,41 +25,39 @@ const UserAccount = () => {
return ( return (
<UserAccountWrapper> <UserAccountWrapper>
<Aside> <Header />
<LogoWrapper> <Body>
<Link to={PAGES.home}> <Aside>
<Logo /> <Navigations>
</Link> <StyledLink to={`${PAGES.useraccount}/personal-info`}>
</LogoWrapper> <T9n t='personal_info' />
<Navigations> </StyledLink>
<StyledLink to={`${PAGES.useraccount}/personal-info`}> <StyledLink to={`${PAGES.useraccount}/bank-cards`}>
Личная информация <T9n t='bank_card' />
</StyledLink> </StyledLink>
<StyledLink to={`${PAGES.useraccount}/bank-cards`}> <StyledLink to={`${PAGES.useraccount}/subscriptions`}>
Банковские карты <T9n t='my_subscriptions' />
</StyledLink> </StyledLink>
<StyledLink to={`${PAGES.useraccount}/subscriptions`}> <StyledLink to={`${PAGES.useraccount}/payment-history`}>
Мои подписки <T9n t='payment_history' />
</StyledLink> </StyledLink>
<StyledLink to={`${PAGES.useraccount}/payment-history`}> </Navigations>
История платежей </Aside>
</StyledLink> <ContentWrapper>
</Navigations> <Route path={`${PAGES.useraccount}/personal-info`}>
</Aside> <PagePersonalInfo />
<ContentWrapper> </Route>
<Route path={`${PAGES.useraccount}/personal-info`}> <Route path={`${PAGES.useraccount}/bank-cards`}>
<PagePersonalInfo /> <PageBankCards />
</Route> </Route>
<Route path={`${PAGES.useraccount}/bank-cards`}> <Route path={`${PAGES.useraccount}/subscriptions`}>
<PageBankCards /> <PageSubscriptions />
</Route> </Route>
<Route path={`${PAGES.useraccount}/subscriptions`}> <Route path={`${PAGES.useraccount}/payment-history`}>
<PageSubscriptions /> <PagePaymentsHistory />
</Route> </Route>
<Route path={`${PAGES.useraccount}/payment-history`}> </ContentWrapper>
<PagePaymentsHistory /> </Body>
</Route>
</ContentWrapper>
</UserAccountWrapper> </UserAccountWrapper>
) )
} }

19
src/features/UserAccount/styled.tsx
Unescape View File

@ -59,7 +59,7 @@ export const Icon = styled.span<IconProps>`
export const ContentWrapper = styled.div` export const ContentWrapper = styled.div`
width: 100%; width: 100%;
display: flex; display: flex;
padding-top: 116px; padding-top: 26px;
padding-left: 70px; padding-left: 70px;
@media ${devices.tablet} { @media ${devices.tablet} {
@ -72,31 +72,30 @@ export const UserAccountWrapper = styled.div`
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
padding: 70px 0 70px 70px; flex-direction: column;
padding: 30px 30px 70px 70px;
@media ${devices.laptop} { @media ${devices.laptop} {
justify-self: flex-start; justify-self: flex-start;
width: 100%;
} }
@media ${devices.tablet} { @media ${devices.tablet} {
justify-self: center; justify-self: center;
flex-direction: column;
width: auto; width: auto;
padding: 70px 20px 70px 20px; padding: 0px 20px 70px 20px;
} }
` `
export const Aside = styled.aside`` export const Body = styled.div`
display: flex;
export const LogoWrapper = styled.div`
margin-bottom: 50px;
@media ${devices.tablet} { @media ${devices.tablet} {
margin-bottom: 20px; flex-direction: column;
} }
` `
export const Aside = styled.aside``
export const Navigations = styled.nav` export const Navigations = styled.nav`
width: 388px; width: 388px;
height: 622px; height: 622px;

Write Preview
Loading…
Cancel
Save