Header connect from components to containers

This commit is contained in:
Sérgio Ramos 2017-01-02 22:54:38 +00:00
parent 355c7d59d9
commit ab9dc8aa9c
6 changed files with 92 additions and 63 deletions

View File

@ -1,16 +1,13 @@
const React = require('react'); const React = require('react');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router'); const ReactRouter = require('react-router');
const Styled = require('styled-components'); const Styled = require('styled-components');
const selectors = require('@state/selectors');
const actions = require('@state/actions');
const Column = require('@ui/components/column'); const Column = require('@ui/components/column');
const Container = require('@ui/components/container'); const Container = require('@ui/components/container');
const Avatar = require('@ui/components/avatar'); const Avatar = require('@ui/components/avatar');
const fns = require('@ui/shared/functions'); const fns = require('@ui/shared/functions');
const logo = require('@resources/logo.png'); const logo = require('@resources/logo.png');
const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row'); const Row = require('@ui/components/row');
const Tooltip = require('@ui/components/tooltip'); const Tooltip = require('@ui/components/tooltip');
const composers = require('@ui/shared/composers'); const composers = require('@ui/shared/composers');
@ -26,24 +23,10 @@ const {
const { const {
remcalc remcalc
} = fns; } = fns;
const {
connect
} = ReactRedux;
const {
accountSelector,
accountUISelector
} = selectors;
const { const {
pseudoEl pseudoEl
} = composers; } = composers;
const {
handleToggleAction
} = actions;
const StyledHeader = styled.header` const StyledHeader = styled.header`
background-color: #ffffff; background-color: #ffffff;
padding-top: ${remcalc(21)}; padding-top: ${remcalc(21)};
@ -89,14 +72,30 @@ const arrowPosition = {
const Header = ({ const Header = ({
account = {}, account = {},
accountUI = {}, tooltip = false,
dispatch handleToggle
}) => { }) => {
const handleToggle = (ev) => { const handleToggleClick = (ev) => {
ev.preventDefault(); ev.preventDefault();
dispatch(handleToggleAction(accountUI.profile_tooltip)); handleToggle();
}; };
const tooltipComponent = !tooltip ? null : (
<StyledTooltipWrapper>
<Tooltip arrowPosition={arrowPosition}>
<li>
<Link to='/'>My Account</Link>
</li>
<li>
<Link to='/'>Settings</Link>
</li>
<li>
<Link to='/'>About</Link>
</li>
</Tooltip>
</StyledTooltipWrapper>
);
return ( return (
<StyledHeader> <StyledHeader>
<Container fluid> <Container fluid>
@ -104,7 +103,7 @@ const Header = ({
<Column xs={2}> <Column xs={2}>
<Link to='/'> <Link to='/'>
<StyledLogo <StyledLogo
alt="Joyent" alt='Joyent'
src={logo} src={logo}
/> />
</Link> </Link>
@ -114,12 +113,8 @@ const Header = ({
xs={1.5} xs={1.5}
> >
<StyledProfileWrapper> <StyledProfileWrapper>
<StyledAvatarWrapper toggled={tooltip}>
<StyledAvatarWrapper toggled={accountUI.profile_tooltip}> <a onClick={handleToggleClick}>
<Link
onClick={handleToggle}
to='/'
>
<StyledName>{account.name}</StyledName> <StyledName>{account.name}</StyledName>
<Avatar <Avatar
alt={account.name} alt={account.name}
@ -129,19 +124,9 @@ const Header = ({
marginLeft: '12px' marginLeft: '12px'
}} }}
/> />
</Link> </a>
</StyledAvatarWrapper> </StyledAvatarWrapper>
{tooltipComponent}
{ accountUI.profile_tooltip ? (
<StyledTooltipWrapper>
<Tooltip arrowPosition={arrowPosition}>
<li><Link to={'/'}>My Account</Link></li>
<li><Link to={'/'}>Settings</Link></li>
<li><Link to={'/'}>About</Link></li>
</Tooltip>
</StyledTooltipWrapper>
) : null }
</StyledProfileWrapper> </StyledProfileWrapper>
</Column> </Column>
</Row> </Row>
@ -151,22 +136,9 @@ const Header = ({
}; };
Header.propTypes = { Header.propTypes = {
account: React.PropTypes.shape({ account: PropTypes.account,
uuid: React.PropTypes.string, tooltip: React.PropTypes.boolean,
id: React.PropTypes.string, handleToggle: React.PropTypes.func
name: React.PropTypes.string,
}),
accountUI: React.PropTypes.shape({
profile_tooltip: React.PropTypes.boolean
}),
dispatch: React.PropTypes.func
}; };
const mapStateToProps = (state, ownProps) => ({ module.exports = Header;
account: accountSelector(state),
accountUI: accountUISelector(state)
});
module.exports = connect(
mapStateToProps
)(Header);

View File

@ -7,7 +7,7 @@ const actions = require('@state/actions');
const Article = require('@components/article'); const Article = require('@components/article');
const Base = require('@ui/components/base'); const Base = require('@ui/components/base');
const Footer = require('@components/footer'); const Footer = require('@components/footer');
const Header = require('@components/header'); const Header = require('@containers/header');
const Home = require('@containers/home'); const Home = require('@containers/home');
const NotFound = require('@containers/not-found'); const NotFound = require('@containers/not-found');

View File

@ -0,0 +1,52 @@
const React = require('react');
const ReactRedux = require('react-redux');
const selectors = require('@state/selectors');
const actions = require('@state/actions');
const Header = require('@components/header');
const PropTypes = require('@root/prop-types');
const {
connect
} = ReactRedux;
const {
accountSelector,
accountUISelector
} = selectors;
const {
toggleHeaderTooltip
} = actions;
const Component = ({
account = {},
tooltip = false,
handleToggle
}) => (
<Header
account={account}
tooltip={tooltip}
handleToggle={handleToggle}
/>
);
Component.propTypes = {
account: PropTypes.account,
tooltip: React.PropTypes.bool,
handleToggle: React.PropTypes.func
};
const mapStateToProps = (state, ownProps) => ({
account: accountSelector(state),
...accountUISelector(state)
});
const mapDispatchToProps = (dispatch) => ({
handleToggle: () => dispatch(toggleHeaderTooltip())
});
module.exports = connect(
mapStateToProps,
mapDispatchToProps
)(Header);

View File

@ -6,6 +6,10 @@ const BaseObject = {
name: React.PropTypes.string name: React.PropTypes.string
}; };
const Account = React.PropTypes.shape({
...BaseObject
});
const Org = React.PropTypes.shape({ const Org = React.PropTypes.shape({
...BaseObject, ...BaseObject,
owner: React.PropTypes.string owner: React.PropTypes.string
@ -24,6 +28,7 @@ const Sections = React.PropTypes.arrayOf(
); );
module.exports = { module.exports = {
account: Account,
org: Org, org: Org,
project: Project, project: Project,
sections: Sections, sections: Sections,

View File

@ -10,5 +10,5 @@ const APP = constantCase(process.env['APP_NAME']);
module.exports = { module.exports = {
...require('@state/thunks'), ...require('@state/thunks'),
updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`), updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
handleToggleAction: createAction(`${APP}/APP/HANDLE_TOGGLE`, bool => bool) toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`)
}; };

View File

@ -7,16 +7,16 @@ const {
} = ReduxActions; } = ReduxActions;
const { const {
handleToggleAction toggleHeaderTooltip
} = actions; } = actions;
module.exports = handleActions({ module.exports = handleActions({
[handleToggleAction.toString()]: (state, action) => { [toggleHeaderTooltip.toString()]: (state, action) => {
return { return {
...state, ...state,
ui: { ui: {
...state.ui, ...state.ui,
'profile_tooltip': !action.payload tooltip: !state.ui.tooltip
} }
}; };
} }