ReviewerReportForm.js

import React, { Fragment } from 'react'
import { reduxForm } from 'redux-form'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { compose, withHandlers, withStateHandlers } from 'recompose'
import { withModal } from 'pubsweet-component-modal/src/components'
import { Button, FilePicker, Menu, ValidatedField } from '@pubsweet/ui'

import {
  Row,
  Item,
  Label,
  FileItem,
  Textarea,
  ActionLink,
  MultiAction,
  ContextualBox,
  ItemOverrideAlert,
  withFetching,
} from 'pubsweet-component-faraday-ui/src'

const options = [
  { value: 'a', label: 'a' },
  { value: 'b', label: 'b' },
  { value: 'c', label: 'c' },
  { value: 'd', label: 'd' },
]

const testFiles = [
  {
    id:
      '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/02db6c5e-2938-45ac-a5ee-67ae63919bb2',
    name: 'Supplementary File 1.jpg',
    size: 59621,
    originalName: 'Supplementary File 1.jpg',
  },
  {
    id:
      '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/5e69e3d9-7f9d-4e8d-b649-6e6a45658d75',
    name: 'Supplementary File 2.docx',
    size: 476862,
    originalName: 'Supplementary File 2.docx',
  },
]

const ReviewerReportForm = ({
  file,
  addFile,
  expanded,
  toggleMenu,
  handleSubmit,
}) => (
  <ContextualBox label="Your report" startExpanded>
    <Root>
      <Row>
        <ItemOverrideAlert vertical>
          <Label required>Recommendation</Label>
          <ValidatedField
            component={input => <Menu {...input} options={options} />}
            name="recommendation"
            validate={[required]}
          />
        </ItemOverrideAlert>
      </Row>

      <Row alignItems="center" justify="space-between" mt={1}>
        <Item>
          <Label required>Your report</Label>
          <FilePicker onUpload={addFile}>
            <ActionLink icon="plus">UPLOAD FILE</ActionLink>
          </FilePicker>
        </Item>

        <Item justify="flex-end">
          <ActionLink to="https://about.hindawi.com/authors/peer-review-at-hindawi/">
            Hindawi Reviewer Guidelines
          </ActionLink>
        </Item>
      </Row>

      <Row mb={1}>
        <ItemOverrideAlert vertical>
          <ValidatedField
            component={Textarea}
            name="message"
            validate={[required]}
          />
        </ItemOverrideAlert>
      </Row>

      <Row justify="flex-start">
        <Item flex={0}>
          <FileItem item={file} />
        </Item>
      </Row>

      <Row alignItems="center">
        {expanded ? (
          <Fragment>
            <Item>
              <Label>Confidential note for the Editorial Team</Label>
            </Item>
            <Item justify="flex-end">
              <ActionLink icon="x" onClick={toggleMenu}>
                Remove
              </ActionLink>
            </Item>
          </Fragment>
        ) : (
          <Item>
            <ActionLink onClick={toggleMenu}>
              Add Confidential note for the Editorial Team
            </ActionLink>
          </Item>
        )}
      </Row>

      {expanded && (
        <Row>
          <ItemOverrideAlert pr={2} vertical>
            <ValidatedField component={Textarea} name="note" />
          </ItemOverrideAlert>
        </Row>
      )}

      <Row justify="flex-end" mt={2}>
        <Button onClick={handleSubmit} primary size="medium">
          Submit report
        </Button>
      </Row>
    </Root>
  </ContextualBox>
)

export default compose(
  withFetching,
  withModal(() => ({
    modalComponent: MultiAction,
  })),
  withStateHandlers(
    { expanded: false, file: testFiles[0] },
    {
      toggleMenu: ({ expanded }) => () => ({ expanded: !expanded }),
    },
  ),
  withHandlers({
    addFile: () => file => {},
  }),
  reduxForm({
    form: 'reviewer-report',
    onSubmit: (
      values,
      dispatch,
      { showModal, setFetching, onSubmitReport },
    ) => {
      showModal({
        title: 'Ready to Submit your Report?',
        subtitle: `Once submitted, the report can't be modified.`,
        onConfirm: modalProps =>
          onSubmitReport(values, { ...modalProps, setFetching }),
        confirmText: 'Submit report',
        cancelText: 'Not yet',
      })
    },
  }),
)(ReviewerReportForm)

// #region styles
const Root = styled.div`
  background-color: ${th('colorBackgroundHue2')};
  padding: calc(${th('gridUnit')} * 2);
`
// #endregion