WizardFiles.js

import React, { Fragment } from 'react'
import { get } from 'lodash'
import { compose, withState, withHandlers } from 'recompose'

import { FileSection, SortableList } from './'
import { withFileDownload, withFilePreview } from './helpers'

const WizardFiles = ({
  files,
  addFile,
  moveFile,
  deleteFile,
  changeList,
  previewFile,
  downloadFile,
}) => (
  <Fragment>
    <FileSection
      allowedFileExtensions={['pdf', 'doc', 'docx', 'txt', 'rdf', 'odt']}
      changeList={changeList}
      files={get(files, 'manuscripts', [])}
      isFirst
      listId="manuscripts"
      maxFiles={1}
      moveItem={moveFile('manuscripts')}
      onDelete={deleteFile('manuscripts')}
      onDownload={downloadFile}
      onFileDrop={addFile('manuscripts')}
      onFilePick={addFile('manuscripts')}
      onPreview={previewFile}
      required
      title="Main Manuscript"
    />
    <FileSection
      allowedFileExtensions={['pdf', 'doc', 'docx', 'txt', 'rdf', 'odt']}
      changeList={changeList}
      files={get(files, 'coverLetter', [])}
      listId="coverLetter"
      maxFiles={1}
      moveItem={moveFile('coverLetter')}
      onDelete={deleteFile('coverLetter')}
      onDownload={downloadFile}
      onFileDrop={addFile('coverLetter')}
      onFilePick={addFile('coverLetter')}
      onPreview={previewFile}
      title="Cover Letter"
    />
    <FileSection
      changeList={changeList}
      files={get(files, 'supplementary', [])}
      isLast
      listId="supplementary"
      moveItem={moveFile('supplementary')}
      onDelete={deleteFile('supplementary')}
      onDownload={downloadFile}
      onFileDrop={addFile('supplementary')}
      onFilePick={addFile('supplementary')}
      onPreview={previewFile}
      title="Supplemental Files"
    />
  </Fragment>
)

export default compose(
  withFilePreview,
  withFileDownload,
  withState('files', 'setFiles', ({ files }) => files),
  withHandlers({
    setFormFiles: ({ changeForm, setFiles }) => files => {
      setFiles(files)
      changeForm('submission', 'files', files)
    },
  }),
  withHandlers({
    addFile: ({ uploadFile, files, version, setFormFiles }) => type => file => {
      uploadFile(file, type, version).then(f => {
        const newFiles = {
          ...files,
          [type]: [...files[type], f],
        }
        setFormFiles(newFiles)
      })
    },
    downloadFile: ({ downloadFile, token }) => file => {
      downloadFile(file)
    },
    deleteFile: ({ deleteFile, files, setFormFiles }) => type => file => {
      deleteFile(file.id, type).then(() => {
        const newFiles = {
          ...files,
          [type]: files[type].filter(f => f.id !== file.id),
        }
        setFormFiles(newFiles)
      })
    },
    moveFile: ({ files, setFormFiles }) => type => (dragIndex, hoverIndex) => {
      const newFiles = {
        ...files,
        [type]: SortableList.moveItem(files[type], dragIndex, hoverIndex),
      }
      setFormFiles(newFiles)
    },
    previewFile: ({ previewFile }) => file => {
      previewFile(file)
    },
    changeList: ({ files, setFormFiles }) => (from, to, fileId) => {
      const swappedFile = files[from].find(f => f.id === fileId)

      const newFiles = {
        ...files,
        [to]: [...files[to], swappedFile],
        [from]: files[from].filter(f => f.id !== fileId),
      }
      setFormFiles(newFiles)
    },
  }),
)(WizardFiles)