UserProfilePage.js

import React from 'react'
import { get } from 'lodash'
import { compose } from 'recompose'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { selectCurrentUser } from 'xpub-selectors'
import { BreadcrumbsHeader } from 'pubsweet-components-faraday/src/components'

import AccountDetails from './AccountDetails'
import LinkOrcID from './LinkOrcID'
import EmailNotifications from './EmailNotifications'

const UserProfilePage = ({ history, user }) => (
  <Root>
    <BreadcrumbsHeader
      history={history}
      info={get(user, 'email')}
      showBack
      title="Account Settings"
      underlined
    />
    <AccountDetails user={user} />
    <EmailNotifications subscribed={get(user, 'subscription')} />
    <LinkOrcID orcid={get(user, 'orcid')} />
  </Root>
)

export default compose(
  connect(state => ({
    user: selectCurrentUser(state),
  })),
)(UserProfilePage)

// #region styles
const Root = styled.div`
  display: flex;
  flex-direction: column;
  margin: auto;
  max-width: 60em;
`
// #endregion