feat: simplify file upload in submission

app/components/component-submit/src/components/FormTemplate.js

@@ -267,8 +267,9 @@ export default ({
             <Legend dangerouslySetInnerHTML={createMarkup(element.title)} />
             {element.component === 'SupplementaryFiles' && (
               <FilesUpload
+                containerId={manuscript.id}
+                containerName="manuscript"
                 fileType="supplementary"
-                manuscriptId={manuscript.id}
                 onChange={onChange}
               />
             )}

app/components/component-submit/src/components/SubmitPage.js

@@ -25,9 +25,6 @@ const fragmentFields = `
     recommendation
     created
     isDecision
-    comments {
-      content
-    }
     user {
       id
       username
@@ -125,21 +122,6 @@ const updateMutation = gql`
 //   }
 // `
 
-const createFileMutation = gql`
-  mutation($file: Upload!, $meta: FileMetaInput) {
-    createFile(file: $file, meta: $meta) {
-      id
-      created
-      label
-      filename
-      fileType
-      mimeType
-      size
-      url
-    }
-  }
-`
-
 const SubmitPage = ({ match, history, ...props }) => {
   const [confirming, setConfirming] = useState(false)
 
@@ -151,27 +133,6 @@ const SubmitPage = ({ match, history, ...props }) => {
     variables: { id: match.params.version, form: 'submit' },
   })
 
-  const [createFile] = useMutation(createFileMutation)
-
-  const createSupplementaryFile = async file => {
-    const meta = {
-      filename: file.name,
-      mimeType: file.type,
-      size: file.size,
-      fileType: 'supplementary',
-      object: 'Manuscript',
-      objectId: match.params.version,
-    }
-
-    const { data } = await createFile({
-      variables: {
-        file,
-        meta,
-      },
-    })
-    return data
-  }
-
   const [update] = useMutation(updateMutation)
 
   if (loading) return <Spinner />
@@ -227,7 +188,6 @@ const SubmitPage = ({ match, history, ...props }) => {
       {props => (
         <Submit
           confirming={confirming}
-          createSupplementaryFile={createSupplementaryFile}
           forms={cloneDeep(getFile)}
           manuscript={manuscript}
           onChange={handleChange}

app/components/component-submit/src/upload.js

 import config from 'config'
 import request from 'pubsweet-client/src/helpers/api'
 import gql from 'graphql-tag'
+import currentRolesVar from '../../../shared/currentRolesVar'
 
 const generateTitle = name =>
   name
@@ -35,9 +36,8 @@ const createManuscriptMutation = gql`
         id
         role
         name
-        object {
-          objectId
-          objectType
+        manuscript {
+          id
         }
         members {
           id
@@ -154,6 +154,11 @@ const createManuscriptPromise = (
     mutation: createManuscriptMutation,
     variables: { input: manuscript },
     update: (cache, { data: { createManuscript } }) => {
+      const currentRoles = currentRolesVar()
+      currentRolesVar([
+        ...currentRoles,
+        { id: createManuscript.id, roles: ['author'] },
+      ])
       cache.modify({
         fields: {
           manuscripts(existingManuscriptRefs = []) {

app/components/shared/FilesUpload.js

 import React from 'react'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, get } from 'lodash'
 import { FieldArray } from 'formik'
 import { grid, th } from '@pubsweet/ui-toolkit'
 import styled from 'styled-components'
@@ -55,6 +55,7 @@ const DropzoneAndList = ({
   createFile,
   deleteFile,
   fileType,
+  fieldName,
 }) => (
   <>
     <Dropzone
@@ -66,7 +67,7 @@ const DropzoneAndList = ({
       }}
     >
       {({ getRootProps, getInputProps }) => (
-        <Root {...getRootProps()}>
+        <Root {...getRootProps()} data-testid="dropzone">
           <input {...getInputProps()} />
           <Message>
             Drag and drop your files here
@@ -78,8 +79,8 @@ const DropzoneAndList = ({
       )}
     </Dropzone>
     <Files>
-      {cloneDeep(values.files || [])
-        .filter(val => val.fileType === fileType)
+      {cloneDeep(get(values, fieldName) || [])
+        .filter(val => (fileType ? val.fileType === fileType : true))
         .map(val => {
           val.name = val.filename
           return <UploadingFile file={val} key={val.name} uploaded />
@@ -89,29 +90,28 @@ const DropzoneAndList = ({
 )
 
 const FilesUpload = ({
-  objectId,
-  objectType,
   fileType,
-  manuscriptId,
-  reviewCommentId,
+  fieldName = 'files',
+  containerId,
+  containerName,
+  initializeContainer,
 }) => {
   const [createFile] = useMutation(createFileMutation)
   // const [deleteFile] = useMutation(deleteFileMutation)
 
-  if (manuscriptId) {
-    reviewCommentId = null
-  }
-
   const createFileWithMeta = async file => {
     const meta = {
       filename: file.name,
       mimeType: file.type,
       size: file.size,
       fileType,
-      manuscriptId, // one of these two will be null
-      reviewCommentId,
     }
 
+    // Create a container/parent for these files if one doesn't exist
+    const localContainerId = containerId || (await initializeContainer())
+
+    meta[`${containerName}Id`] = localContainerId
+
     const { data } = await createFile({
       variables: {
         file,
@@ -123,11 +123,12 @@ const FilesUpload = ({
 
   return (
     <FieldArray
-      name="files"
+      name={fieldName}
       render={formikProps => (
         <DropzoneAndList
           createFile={createFileWithMeta}
           // deleteFile={deleteFile}
+          fieldName={fieldName}
           fileType={fileType}
           {...formikProps}
         />