Wire upload step to redux form

packages/component-wizard/src/components/FileSection.js

@@ -30,7 +30,6 @@ const FileSection = ({
   isFirst,
   addFile,
   canDrop,
-  dropItems,
   moveItem,
   isFileOver,
   removeFile,
@@ -40,6 +39,7 @@ const FileSection = ({
   isFetching,
   canDropFile,
   disabledFilepicker,
+  dropSortableFile,
 }) =>
   connectFileDrop(
     connectDropTarget(
@@ -82,7 +82,7 @@ const FileSection = ({
         <SortableList
           beginDragProps={['id', 'index', 'name', 'listId']}
           dragHandle={DragHandle}
-          dropItem={dropItems}
+          dropItem={dropSortableFile}
           items={files}
           listId={listId}
           listItem={FileItem}

packages/component-wizard/src/components/Files.js

@@ -2,7 +2,6 @@ import React from 'react'
 import { get } from 'lodash'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { actions } from 'pubsweet-client'
 import { withRouter } from 'react-router-dom'
 import {
   compose,
@@ -17,10 +16,11 @@ import FileSection from './FileSection'
 
 import {
   uploadFile,
-  setFiles,
   deleteFile,
   getFiles,
   getRequestStatus,
+  setAllFiles,
+  moveFiles,
 } from '../redux/files'
 
 const Files = ({
@@ -29,7 +29,7 @@ const Files = ({
   moveItem,
   removeFile,
   changeList,
-  dropItems,
+  dropSortableFile,
   ...rest
 }) => (
   <div>
@@ -37,7 +37,7 @@ const Files = ({
       addFile={addFile('manuscripts')}
       allowedFileExtensions={['pdf', 'doc', 'docx']}
       changeList={changeList}
-      dropItems={dropItems}
+      dropSortableFile={dropSortableFile}
       files={get(files, 'manuscripts') || []}
       isFirst
       listId="manuscripts"
@@ -49,6 +49,7 @@ const Files = ({
     <FileSection
       addFile={addFile('supplementary')}
       changeList={changeList}
+      dropSortableFile={dropSortableFile}
       files={get(files, 'supplementary') || []}
       listId="supplementary"
       maxFiles={Number.POSITIVE_INFINITY}
@@ -60,6 +61,7 @@ const Files = ({
       addFile={addFile('coverLetter')}
       allowedFileExtensions={['pdf', 'doc', 'docx']}
       changeList={changeList}
+      dropSortableFile={dropSortableFile}
       files={get(files, 'coverLetter') || []}
       isLast
       listId="coverLetter"
@@ -81,102 +83,63 @@ export default compose(
     }),
     {
       uploadFile,
-      updateFragment: actions.updateFragment,
-      setFiles,
       deleteFile,
+      setAllFiles,
+      moveFiles,
     },
   ),
   lifecycle({
     componentDidMount() {
-      const { setFiles, version } = this.props
-      setFiles(version.files.manuscripts, 'manuscripts')
-      setFiles(version.files.supplementary, 'supplementary')
-      setFiles(version.files.coverLetter, 'coverLetter')
+      const { version, setAllFiles } = this.props
+      setAllFiles(version.files)
     },
   }),
   withHandlers({
-    dropItems: ({ files, updateFragment, project, version }) => () => {
-      updateFragment(project, {
-        submitted: new Date(),
-        ...version,
-        files,
-      })
+    dropSortableFile: ({ files, setAllFiles }) => () => {
+      setAllFiles(files)
     },
-    changeList: ({ files, setFiles, updateFragment, project, version }) => (
-      fromListId,
-      toListId,
-      id,
-    ) => {
+    changeList: ({ files, setAllFiles }) => (fromListId, toListId, id) => {
       const swappedFile = files[fromListId].find(f => f.id === id)
 
       const fromFiles = files[fromListId].filter(f => f.id !== id)
       const toFiles = [...files[toListId], swappedFile]
 
-      setFiles(fromFiles, fromListId)
-      setFiles(toFiles, toListId)
-
-      updateFragment(project, {
-        submitted: new Date(),
-        ...version,
-        files: {
-          ...version.files,
-          [fromListId]: fromFiles,
-          [toListId]: toFiles,
-        },
-      })
+      const newFiles = {
+        ...files,
+        [toListId]: toFiles,
+        [fromListId]: fromFiles,
+      }
+      setAllFiles(newFiles)
     },
-    addFile: ({
-      files,
-      setFiles,
-      uploadFile,
-      updateFragment,
-      project,
-      version,
-    }) => type => file => {
-      uploadFile(file, type).then(fileResponse => {
-        setFiles([...files[type], fileResponse], type)
-        updateFragment(project, {
-          submitted: new Date(),
-          ...version,
-          files: {
-            ...version.files,
-            [type]: version.files[type]
-              ? [...version.files[type], fileResponse]
-              : [fileResponse],
-          },
-        })
+    addFile: ({ files, uploadFile, setAllFiles, version }) => type => file => {
+      uploadFile(file, type, version.id).then(fileResponse => {
+        const newFiles = {
+          ...files,
+          [type]: [...files[type], fileResponse],
+        }
+        setAllFiles(newFiles)
       })
     },
-    moveItem: ({
-      setFiles,
-      files,
-      project,
-      version,
-      updateFragment,
-    }) => type => (dragIndex, hoverIndex) => {
-      const newFiles = SortableList.moveItem(files[type], dragIndex, hoverIndex)
-      setFiles(newFiles, type)
+    moveItem: ({ moveFiles, files }) => type => (dragIndex, hoverIndex) => {
+      const newFiles = {
+        ...files,
+        [type]: SortableList.moveItem(files[type], dragIndex, hoverIndex),
+      }
+      moveFiles(newFiles)
     },
     removeFile: ({
-      setFiles,
+      setAllFiles,
       files,
       deleteFile,
-      project,
       version,
-      updateFragment,
     }) => type => id => e => {
       e.preventDefault()
-      deleteFile(id)
-      const newFiles = files[type].filter(f => f.id !== id)
-      setFiles(newFiles, type)
-      updateFragment(project, {
-        submitted: new Date(),
-        ...version,
-        files: {
-          ...version.files,
-          [type]: newFiles,
-        },
-      })
+      deleteFile(id, version.id)
+      const newFiles = {
+        ...files,
+        [type]: files[type].filter(f => f.id !== id),
+      }
+      setAllFiles(newFiles, type)
     },
   }),
   withContext(

packages/component-wizard/src/components/WizardStep.js

@@ -66,6 +66,7 @@ export default ({
             )
           },
         )}
+      <Files />
       <div className={classnames(classes.buttons)}>
         <Button onClick={isFirst ? () => history.push('/') : prevStep}>
           {isFirst

packages/component-wizard/src/redux/files.js

-import request, { remove } from 'pubsweet-client/src/helpers/api'
+import request, { remove, get } from 'pubsweet-client/src/helpers/api'
+import { change as changeForm } from 'redux-form'
 
 const initialState = {
   isFetching: {
@@ -22,15 +23,23 @@ const REMOVE_REQUEST = 'files/REMOVE_REQUEST'
 const REMOVE_FAILURE = 'files/REMOVE_FAILURE'
 const REMOVE_SUCCESS = 'files/REMOVE_SUCCESS'
 
-const SET_FILES = 'files/SET_FILES'
+const SET_ALL_FILES = 'files/SET_ALL_FILES'
 
 // action creators
-export const setFiles = (files, fileType) => ({
-  type: SET_FILES,
+const _setAllFiles = files => ({
+  type: SET_ALL_FILES,
   files,
-  fileType,
 })
 
+export const setAllFiles = files => dispatch => {
+  dispatch(changeForm('wizard', 'files', files))
+  dispatch(_setAllFiles(files))
+}
+
+export const moveFiles = files => dispatch => {
+  dispatch(_setAllFiles(files))
+}
+
 const uploadRequest = type => ({
   type: UPLOAD_REQUEST,
   fileType: type,
@@ -45,9 +54,10 @@ const uploadSuccess = () => ({
   type: UPLOAD_SUCCESS,
 })
 
-const createFileData = (file, type) => {
+const createFileData = (file, type, fragmentId) => {
   const data = new FormData()
   data.append('fileType', type)
+  data.append('framentId', fragmentId)
   data.append('file', file)
 
   return {
@@ -77,9 +87,9 @@ export const getFiles = state => state.files.files
 export const getRequestStatus = state => state.files.isFetching
 
 // thunked actions
-export const uploadFile = (file, type) => dispatch => {
+export const uploadFile = (file, type, fragmentId) => dispatch => {
   dispatch(uploadRequest(type))
-  return request('/aws-upload', createFileData(file, type))
+  return request('/aws-upload', createFileData(file, type, fragmentId))
     .then(r => {
       dispatch(uploadSuccess())
       return r
@@ -87,9 +97,9 @@ export const uploadFile = (file, type) => dispatch => {
     .catch(err => dispatch(uploadFailure(err.message)))
 }
 
-export const deleteFile = fileId => dispatch => {
+export const deleteFile = (fileId, fragmentId) => dispatch => {
   dispatch(removeRequest())
-  return remove(`/aws-delete/${fileId}`)
+  return remove(`/aws-delete/${fragmentId}/${fileId}`)
     .then(r => {
       dispatch(removeSuccess())
       return r
@@ -97,9 +107,17 @@ export const deleteFile = fileId => dispatch => {
     .catch(err => dispatch(removeFailure(err.message)))
 }
 
+export const getSignedUrl = (fileId, fragmentId) =>
+  get(`aws-signed-url/${fragmentId}/${fileId}`)
+
 // reducer
 export default (state = initialState, action) => {
   switch (action.type) {
+    case SET_ALL_FILES:
+      return {
+        ...state,
+        files: action.files,
+      }
     case UPLOAD_REQUEST:
       return {
         ...state,
@@ -109,14 +127,6 @@ export default (state = initialState, action) => {
           [action.fileType]: true,
         },
       }
-    case SET_FILES:
-      return {
-        ...state,
-        files: {
-          ...state.files,
-          [action.fileType]: action.files,
-        },
-      }
     case UPLOAD_FAILURE:
       return {
         ...state,

packages/components-faraday/src/components/SortableList/SortableList.js

@@ -41,8 +41,12 @@ const itemTarget = {
     }
     monitor.getItem().index = hoverIndex
   },
-  drop({ dropItem, index }) {
-    if (dropItem && typeof dropItem === 'function') dropItem(index)
+  drop({ dropItem, index, listId: toListId, ...rest }, monitor) {
+    const { listId: fromListId } = monitor.getItem()
+    // TODO: fix it for authors too
+    if (fromListId === toListId) {
+      if (dropItem && typeof dropItem === 'function') dropItem(index)
+    }
   },
 }
 

packages/xpub-faraday/app/config/journal/submit-wizard.js

 import React from 'react'
 import { AbstractEditor, TitleEditor } from 'xpub-edit'
-import {
-  Menu,
-  CheckboxGroup,
-  YesOrNo,
-  TextField,
-  Supplementary,
-} from '@pubsweet/ui'
+import { Menu, CheckboxGroup, YesOrNo, TextField } from '@pubsweet/ui'
 import uploadFileFn from 'xpub-upload'
 import { required, minChars, minSize } from 'xpub-validators'
 import { Files } from 'pubsweet-component-wizard/src/components/'