AuthorCard.js

import React, { Fragment } from 'react'
import { isNumber } from 'lodash'
import styled from 'styled-components'
import { reduxForm } from 'redux-form'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { H3, ValidatedField, TextField, Checkbox } from '@pubsweet/ui'
import { compose, setDisplayName, withStateHandlers } from 'recompose'

import { Tag, Label, Row, Item, PersonInfo, IconButton } from './'

// #region AuthorTitle
const AuthorTitle = ({
  editMode,
  listIndex,
  saveChanges,
  isSubmitting,
  toggleEditMode,
  isCorresponding,
}) => (
  <Fragment>
    {!editMode ? (
      <IconButton
        icon="edit-2"
        iconSize={2}
        onClick={toggleEditMode}
        right={8}
        top={15}
      />
    ) : (
      <Fragment>
        <IconButton
          icon="check-circle"
          iconSize={2}
          onClick={saveChanges}
          right={36}
          top={15}
        />
        <IconButton
          icon="x-circle"
          iconSize={2}
          onClick={toggleEditMode}
          right={8}
          top={15}
        />
      </Fragment>
    )}
    <Row alignItems="center" justify="flex-start">
      <H3>{isNumber(listIndex) ? `#${listIndex + 1} Author` : 'Author'}</H3>
      {!editMode ? (
        <AuthorTags>
          {isSubmitting && <Tag>Submitting</Tag>}
          {isCorresponding && <Tag>Corresponding</Tag>}
        </AuthorTags>
      ) : (
        <ValidatedField
          component={({ value, onChange }) => (
            <Checkbox
              checked={value}
              label="Set corresponding"
              onChange={onChange}
              value={value}
            />
          )}
          name="isCorresponding"
        />
      )}
    </Row>
  </Fragment>
)
// #endregion

// #region AuthorEdit
const AuthorEdit = ({
  author,
  editMode,
  listIndex,
  handleSubmit,
  toggleEditMode,
}) => (
  <AuthorContainer>
    <AuthorTitle
      editMode={editMode}
      isCorresponding={author.isCorresponding}
      isSubmitting={author.isSubmitting}
      listIndex={listIndex}
      saveChanges={handleSubmit}
      toggleEditMode={toggleEditMode}
    />
    <Row>
      <Item vertical withRightMargin>
        <Label required>Email</Label>
        <ValidatedField
          component={TextField}
          name="email"
          validate={[required]}
        />
      </Item>
      <Item vertical withRightMargin>
        <Label required>First name</Label>
        <ValidatedField
          component={TextField}
          name="firstName"
          validate={[required]}
        />
      </Item>
      <Item vertical withRightMargin>
        <Label required>Last name</Label>
        <ValidatedField
          component={TextField}
          name="lastName"
          validate={[required]}
        />
      </Item>
      <Item vertical>
        <Label required>Affiliation</Label>
        <ValidatedField
          component={TextField}
          name="affiliation"
          validate={[required]}
        />
      </Item>
    </Row>
  </AuthorContainer>
)
// #endregion

const EnhancedAuthorEdit = compose(
  reduxForm({
    form: 'author-edit',
    onSubmit: values => {},
  }),
)(AuthorEdit)

const Author = ({ author, listIndex, toggleEditMode }) => (
  <AuthorContainer>
    <AuthorTitle
      isCorresponding={author.isCorresponding}
      isSubmitting={author.isSubmitting}
      listIndex={listIndex}
      toggleEditMode={toggleEditMode}
    />
    <PersonInfo person={author} />
  </AuthorContainer>
)

const AuthorCard = ({
  author,
  editMode,
  dragHandle,
  toggleEditMode,
  listIndex = null,
}) => (
  <Root>
    {!editMode &&
      (typeof dragHandle === 'function' ? dragHandle() : dragHandle)}
    {editMode ? (
      <EnhancedAuthorEdit
        author={author}
        editMode={editMode}
        listIndex={listIndex}
        toggleEditMode={toggleEditMode}
      />
    ) : (
      <Author
        author={author}
        editMode={editMode}
        listIndex={listIndex}
        toggleEditMode={toggleEditMode}
      />
    )}
  </Root>
)

export default compose(
  withStateHandlers(
    { editMode: false },
    {
      toggleEditMode: ({ editMode }, { onEdit }) => () => {
        typeof onEdit === 'function' && onEdit()
        return {
          editMode: !editMode,
        }
      },
    },
  ),
  setDisplayName('AuthorCard'),
)(AuthorCard)

// #region styles
const AuthorTags = styled.div`
  align-items: center;
  display: flex;

  ${Tag} {
    margin-right: ${th('gridUnit')};
  }
`

const AuthorContainer = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: ${th('gridUnit')};
`

const Root = styled.div`
  align-items: center;
  border-radius: ${th('borderRadius')};
  box-shadow: ${th('boxShadow')};
  display: flex;
  justify-content: flex-start;
  margin-bottom: ${th('gridUnit')};
  position: relative;

  ${Row} {
    margin-bottom: ${th('gridUnit')};
  }

  ${H3} {
    margin: 0;
    margin-right: ${th('gridUnit')};
  }
`
// #endregion