WizardAuthors.js

import React, { Fragment } from 'react'
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>
    <SortableContainer>
      <SortableList
        authorEditorSubmit={authorEditorSubmit}
        dragHandle={DragHandle}
        editExistingAuthor={editExistingAuthor}
        itemKey="id"
        items={authors}
        listItem={AuthorCard}
        moveItem={moveAuthor}
        onEdit={setAuthorEdit}
        saveNewAuthor={saveNewAuthor}
      />
    </SortableContainer>
  </Fragment>
)

const defaultAuthors = [
  {
    id: 'auth-1',
    email: 'author.here1@gmail.com',
    firstName: 'Sebastian',
    lastName: 'Teodorescu',
    affiliation: 'PSD',
    isSubmitting: true,
    isCorresponding: true,
  },
  {
    id: 'auth-2',
    email: 'author.here2@gmail.com',
    firstName: 'Bogdan',
    lastName: 'Cochior',
    affiliation: 'PSD',
    isSubmitting: false,
    isCorresponding: true,
  },
  {
    id: 'auth-3',
    email: 'author.here3@gmail.com',
    firstName: 'Alexandru',
    lastName: 'Munteanu',
    affiliation: 'PSD',
    isSubmitting: false,
    isCorresponding: true,
  },
]

export default compose(
  withState(
    'authors',
    'setAuthors',
    ({ authors }) => authors || defaultAuthors,
  ),
  withHandlers({
    addNewAuthor: ({ authors, setAuthors }) => () => {
      if (authors.some(a => a.id === 'newAuthor')) {
        return
      }
      setAuthors([...authors, { id: 'newAuthor' }])
    },
    moveAuthor: ({ authors, setAuthors }) => (dragIndex, hoverIndex) => {
      const newAuthors = SortableList.moveItem(authors, dragIndex, hoverIndex)
      setAuthors(newAuthors)
    },
    setAuthorEdit: ({ authors, setAuthors }) => index => {
      setAuthors(authors.filter(a => a.id !== 'newAuthor'))
    },
    saveNewAuthor: ({ authors, setAuthors }) => author => {
      const newAuthors = [...authors.filter(a => a.id !== 'newAuthor'), author]
      setAuthors(newAuthors)
    },
    editExistingAuthor: ({ authors, setAuthors }) => editedAuthor => {
      const newAuthors = authors.map(
        a => (a.id === editedAuthor.id ? editedAuthor : a),
      )
      setAuthors(newAuthors)
    },
  }),
  withHandlers({
    authorEditorSubmit: ({ saveNewAuthor, editExistingAuthor }) => (
      values,
      dispatch,
      { toggleEditMode },
    ) => {
      if (values.id === 'newAuthor') {
        saveNewAuthor({
          ...values,
          id: String(Math.floor(Math.random() * 10000000)),
        })
      } else {
        editExistingAuthor(values)
        setTimeout(toggleEditMode, 10)
      }
    },
  }),
)(WizardAuthors)

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