WizardAuthors.js

import React, { Fragment } from 'react'
import { omit } from 'lodash'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { compose, withState, withHandlers } from 'recompose'

import {
  Row,
  Item,
  Label,
  DragHandle,
  AuthorCard,
  ActionLink,
  SortableList,
} from './'

const WizardAuthors = ({
  authors = [],
  moveAuthor,
  addNewAuthor,
  setAuthorEdit,
  saveNewAuthor,
  editExistingAuthor,
  authorEditorSubmit,
}) => (
  <Fragment>
    <Row alignItems="center" justify="flex-start" pl={1} pr={1}>
      <Item>
        <Label>Authors</Label>
        <ActionLink icon="plus" onClick={addNewAuthor}>
          ADD AUTHOR
        </ActionLink>
      </Item>
      <Item justify="flex-end">
        <ActionLink
          icon="link"
          iconPosition="right"
          to="https://www.hindawi.com/journals/jl/guidelines/"
        >
          Journal Author Submission Guidelines
        </ActionLink>
      </Item>
    </Row>
    {authors.length > 0 && (
      <SortableContainer>
        <SortableList
          authorEditorSubmit={authorEditorSubmit}
          dragHandle={DragHandle}
          editExistingAuthor={editExistingAuthor}
          itemKey="id"
          items={authors}
          listItem={AuthorCard}
          moveItem={moveAuthor}
          onEdit={setAuthorEdit}
          saveNewAuthor={saveNewAuthor}
        />
      </SortableContainer>
    )}
  </Fragment>
)

export default compose(
  withState('authors', 'setAuthors', ({ authors }) => authors),
  withHandlers({
    setFormAuthors: ({ changeForm, setAuthors }) => authors => {
      setAuthors(authors)
      changeForm('submission', 'authors', authors)
    },
  }),
  withHandlers({
    addNewAuthor: ({ authors, setAuthors }) => () => {
      if (authors.some(a => a.id === 'newAuthor')) {
        return
      }
      setAuthors([
        ...authors,
        { id: 'newAuthor', isCorresponding: false, isSubmitting: false },
      ])
    },
    moveAuthor: ({ authors, setFormAuthors }) => (dragIndex, hoverIndex) => {
      setFormAuthors(SortableList.moveItem(authors, dragIndex, hoverIndex))
    },
    setAuthorEdit: ({ authors, setAuthors }) => index => {
      setAuthors(authors.filter(a => a.id !== 'newAuthor'))
    },
    saveNewAuthor: ({ authors, setFormAuthors }) => author => {
      setFormAuthors([...authors.filter(a => a.id !== 'newAuthor'), author])
    },
    editExistingAuthor: ({ authors, setFormAuthors }) => editedAuthor => {
      setFormAuthors(
        authors.map(a => (a.id === editedAuthor.id ? editedAuthor : a)),
      )
    },
  }),
  withHandlers({
    authorEditorSubmit: ({
      authors,
      project,
      version,
      addAuthor,
      saveNewAuthor,
      editExistingAuthor,
    }) => (values, dispatch, { toggleEditMode }) => {
      if (values.id === 'newAuthor') {
        addAuthor(
          {
            ...omit(values, 'id'),
            isSubmitting: authors.length === 0,
          },
          project.id,
          version.id,
        ).then(saveNewAuthor)
      } else {
        editExistingAuthor(values)
        setTimeout(toggleEditMode, 10)
      }
    },
  }),
)(WizardAuthors)

// #region styles
const SortableContainer = styled.div`
  background-color: ${th('colorBackground')};
  border-radius: ${th('borderRadius')};
  padding: ${th('gridUnit')};
  width: 100%;
`
// #endregion