Header connect from components to containers
This commit is contained in:
parent
355c7d59d9
commit
ab9dc8aa9c
@ -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);
|
|
||||||
|
@ -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');
|
||||||
|
|
||||||
|
52
frontend/src/containers/header/index.js
Normal file
52
frontend/src/containers/header/index.js
Normal 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);
|
@ -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,
|
||||||
|
@ -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`)
|
||||||
};
|
};
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user