UserProfilePage.js

import React from 'react'
import { get } from 'lodash'
import { H2 } from '@pubsweet/ui'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { withJournal } from 'xpub-journal'
import { compose, withHandlers } from 'recompose'
import { selectCurrentUser } from 'xpub-selectors'
import {
  Row,
  Text,
  ActionLink,
  UserProfile,
} from 'pubsweet-component-faraday-ui'

import { saveUserDetails } from '../utils'
import { LinkOrcID, EmailNotifications } from './'
import { changeEmailSubscription } from '../../redux/users'

const UserProfilePage = ({
  user,
  journal,
  history,
  saveUser,
  unlinkOrcid,
  changeEmailSubscription,
}) => (
  <Root>
    <Row alignItems="center" justify="flex-start">
      <ActionLink icon="arrow-left" onClick={() => history.push('/dashboard')}>
        Dashboard
      </ActionLink>
    </Row>
    <Row alignItems="center" justify="flex-start">
      <H2>Account Settings</H2>
      <Text ml={2} secondary>
        {user.email}
      </Text>
    </Row>

    <UserProfile journal={journal} mt={2} onSave={saveUser} user={user} />

    <EmailNotifications
      changeEmailSubscription={changeEmailSubscription}
      isSubscribed={get(user, 'notifications.email.user', true)}
      userId={get(user, 'id')}
    />
    <LinkOrcID
      id={get(user, 'id')}
      orcid={get(user, 'orcid')}
      unlinkOrcid={unlinkOrcid}
    />
  </Root>
)

export default compose(
  withJournal,
  connect(
    state => ({
      user: selectCurrentUser(state),
    }),
    { changeEmailSubscription, saveUserDetails },
  ),
  withHandlers({
    saveUser: ({ user, saveUserDetails }) => (values, props) => {
      props.setLoading(true)
      saveUserDetails(user.id, values)
        .then(() => {
          props.toggleEdit()
        })
        .catch(() => {
          props.setError('Something went wrong... Please try again.')
        })
    },
    unlinkOrcid: ({ user, saveUserDetails }) => modalProps => {
      saveUserDetails(user.id, {
        orcid: '',
      })
        .then(() => {
          modalProps.hideModal()
        })
        .catch(() => {
          modalProps.setModalError('Something went wrong...')
        })
    },
  }),
)(UserProfilePage)

// #region styles
const Root = styled.div`
  display: flex;
  flex-direction: column;
`
// #endregion