All files / web/modules/components Header.tsx

75% Statements 24/32
62.5% Branches 10/16
0% Functions 0/4
88.89% Lines 24/27

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 1131x 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);