From ab9dc8aa9c4f4613148634346298e1940a298e10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Mon, 2 Jan 2017 22:54:38 +0000 Subject: [PATCH] Header connect from components to containers --- frontend/src/components/header/index.js | 88 +++++++++---------------- frontend/src/containers/app.js | 2 +- frontend/src/containers/header/index.js | 52 +++++++++++++++ frontend/src/prop-types.js | 5 ++ frontend/src/state/actions.js | 2 +- frontend/src/state/reducers/account.js | 6 +- 6 files changed, 92 insertions(+), 63 deletions(-) create mode 100644 frontend/src/containers/header/index.js diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index 14163c39..058ea925 100644 --- a/frontend/src/components/header/index.js +++ b/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 : ( + + +
  • + My Account +
    • +
  • + Settings +
    • +
  • + About +
    • +     +     + ); + return ( @@ -104,7 +103,7 @@ const Header = ({ @@ -114,12 +113,8 @@ const Header = ({ xs={1.5} > - - - + + {account.name} - + - - { accountUI.profile_tooltip ? ( - - -
  • My Account
    • -
  • Settings
    • -
  • About
    • -     -     - ) : null } - + {tooltipComponent}     @@ -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; diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js index 445c7849..f26290cc 100644 --- a/frontend/src/containers/app.js +++ b/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'); diff --git a/frontend/src/containers/header/index.js b/frontend/src/containers/header/index.js new file mode 100644 index 00000000..705eb1cb --- /dev/null +++ b/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 +}) => ( +
    +); + +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); diff --git a/frontend/src/prop-types.js b/frontend/src/prop-types.js index e04d6ffb..3b98f5fa 100644 --- a/frontend/src/prop-types.js +++ b/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, diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js index d02d2495..3f7edba6 100644 --- a/frontend/src/state/actions.js +++ b/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`) }; diff --git a/frontend/src/state/reducers/account.js b/frontend/src/state/reducers/account.js index 365e2e98..23381104 100644 --- a/frontend/src/state/reducers/account.js +++ b/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 } }; }