import React from 'react'; import { graphql, compose } from 'react-apollo'; import gql from 'graphql-tag'; import pascalCase from 'pascal-case'; import keys from 'lodash.keys'; import { DataCenterIcon, TritonIcon, ServicesIcon } from './components'; import * as Overlays from './containers'; import { Avatar, Header, HeaderRow, HeaderItem, HeaderItemContent, HeaderItemSubContent, HeaderItemIcon, HeaderFlexibleSpaceItem, HeaderDividerItem, HeaderSpace } from './components'; const UpdateHeaderMutation = gql` mutation updateHeader($isOpen: Boolean!, $activePanel: String!) { updateHeader(isOpen: $isOpen, activePanel: $activePanel) @client } `; const GetHeader = gql` { isOpen @client activePanel @client } `; const GetAccount = gql` { datacenter { name } account { login emailHash } } `; const Navigation = ({ user = {}, datacenter, toggleSectionOpen, isOpen, activePanel }) => (
toggleSectionOpen()}> toggleSectionOpen('services')} active={isOpen && activePanel === 'services'} > Products & Services {datacenter ? ( toggleSectionOpen('datacenter')} active={isOpen && activePanel === 'datacenter'} > Data Center: {datacenter} ) : null} {datacenter ? : null} {user.login ? ( toggleSectionOpen('account')} active={isOpen && activePanel === 'account'} > Account: {`${user.login}`} ) : null} {keys(Overlays).map(panelName => React.createElement(Overlays[panelName], { expanded: isOpen && panelName === pascalCase(activePanel) }) )}
); export default compose( graphql(GetAccount, { options: () => ({ ssr: false }), props: ({ data }) => { const { account = {}, datacenter = {}, loading = false, error = null } = data; const { name } = datacenter; const user = { ...account, image: `https://www.gravatar.com/avatar/${account.emailHash}` }; return { user, datacenter: name, loading, error }; } }), graphql(GetHeader, { options: () => ({ ssr: false }), props: ({ data }) => { const { isOpen = false, activePanel = '', loading = false, error = null } = data; return { isOpen, activePanel, loading, error }; } }), graphql(UpdateHeaderMutation, { props: ({ mutate, ownProps }) => ({ toggleSectionOpen: (name = '') => { const { isOpen, activePanel } = ownProps; return mutate({ variables: { isOpen: !(isOpen && name === activePanel), activePanel: name } }); } }) }) )(Navigation);