Header connect from components to containers

frontend/src/components/header/index.js

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

frontend/src/containers/app.js

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

frontend/src/containers/header/index.js

@@ -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);

frontend/src/prop-types.js

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

frontend/src/state/actions.js

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

frontend/src/state/reducers/account.js

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