Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import Divider from 'antd/lib/divider'; import { Push, push } from 'connected-react-router'; import * as React from 'react'; import { connect } from 'react-redux'; import { compose } from 'redux'; import styled from 'styled-components'; import { SHOW_ADS } from '../../../shared/config'; import { IState } from '../../types'; import Signup from '../auth/components/Signup'; import { AUTH_STATE, AUTH_STATE_AUTHENTICATED } from '../auth/constants'; import { selectAuthState, selectIsLoading } from '../auth/reducer'; import { Routes } from '../router/routes'; import Search from '../search/components/Search'; import LoginButton from './LoginButton'; import Spin from './Spin'; import UserDropdownMenu from './UserDropdownMenu'; const logo = require('../../logo.png'); export interface IProps { authState: AUTH_STATE; isLoading: boolean; push: Push; } const Root = styled.div` background-color: #fff; `; const Container = styled.div` display: flex; justify-content: space-between; align-items: center; padding: 5px 15px; width: 80%; margin: auto; padding: 15px; @media only screen and (max-width: 1000px) { & { width: 100%; } } `; const Logo = styled.img` width: 110px; cursor: pointer; `; const Column = styled.div` width: 100%; display: flex; justify-content: ${(props: { justify: string }) => props.justify}; align-items: center; height: 100%; `; const Ad = styled.div` width: 80%; height: 100px; background: #aaa; margin: auto; `; const Header = ({ authState, isLoading, ...props }: IProps) => { const handleClick = () => props.push(Routes.home); return ( <Root> {SHOW_ADS && <Ad>Reklama</Ad>} <Container> <Column justify="flex-start"> <Logo src={logo} onClick={handleClick} /> </Column> <Column justify="center"> <Search /> </Column> <Column justify="flex-end"> {authState === AUTH_STATE_AUTHENTICATED ? ( <React.Fragment> <UserDropdownMenu /> </React.Fragment> ) : isLoading ? ( <Spin size={14} /> ) : ( <React.Fragment> <LoginButton /> <Divider type="vertical" /> <Signup /> </React.Fragment> )} </Column> </Container> </Root> ); }; const mapStateToProps = (state: IState) => ({ authState: selectAuthState(state), isLoading: selectIsLoading(state), }); const mapDispatchToProps = { push, }; export default compose( connect( mapStateToProps, mapDispatchToProps, ), )(Header); |