AuthorCard.js

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

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

const Empty = () => <div />

// #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 mr={1}>Submitting</Tag>}
          {isCorresponding && <Tag mr={1}>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,
  isFetching,
  handleSubmit,
  toggleEditMode,
}) => (
  <AuthorContainer>
    <AuthorTitle
      editMode={editMode}
      isCorresponding={author.isCorresponding}
      isFetching={isFetching}
      isSubmitting={author.isSubmitting}
      listIndex={listIndex}
      saveChanges={handleSubmit}
      toggleEditMode={toggleEditMode}
    />

    <Row>
      <Field component={Empty} name="id" />
      <Field component={Empty} name="isSubmitting" />
      <Item mr={1} vertical>
        <Label required>Email</Label>
        <ValidatedField
          component={TextField}
          name="email"
          validate={[required, validators.emailValidator]}
        />
      </Item>
      <Item mr={1} vertical>
        <Label required>First name</Label>
        <ValidatedField
          component={TextField}
          name="firstName"
          validate={[required]}
        />
      </Item>
      <Item mr={1} vertical>
        <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(
  withProps(({ author }) => ({
    initialValues: {
      ...author,
    },
  })),
  reduxForm({
    form: 'author-edit',
  }),
)(AuthorEdit)

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

const AuthorCard = ({
  item,
  isOver,
  editMode,
  dragHandle,
  toggleEdit,
  isDragging,
  isFetching,
  index = null,
  saveNewAuthor,
  editExistingAuthor,
  authorEditorSubmit,
}) => (
  <Root isDragging={isDragging} isOver={isOver}>
    {!editMode &&
      (typeof dragHandle === 'function' ? dragHandle() : dragHandle)}
    {editMode ? (
      <EnhancedAuthorEdit
        author={item}
        editExistingAuthor={editExistingAuthor}
        editMode={editMode}
        isFetching={isFetching}
        listIndex={index}
        onSubmit={authorEditorSubmit}
        saveNewAuthor={saveNewAuthor}
        toggleEditMode={toggleEdit(index)}
      />
    ) : (
      <Author
        author={item}
        editMode={editMode}
        listIndex={index}
        toggleEditMode={toggleEdit(index)}
      />
    )}
  </Root>
)

export default compose(
  withState('editMode', 'setEditMode', ({ item }) => item.id === 'newAuthor'),
  withHandlers({
    toggleEdit: ({ setEditMode, onEdit }) => index => () => {
      onEdit(index)
      setEditMode(e => !e)
    },
  }),
  setDisplayName('AuthorCard'),
)(AuthorCard)

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

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

const Root = styled.div`
  align-items: center;
  background-color: ${props =>
    props.isOver ? th('colorFurniture') : th('colorBackgroundHue')};
  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