Update fragment on sortable drop

packages/component-wizard/src/components/FileItem.local.scss

@@ -16,9 +16,15 @@
     align-items: center;
     display: flex;
     justify-content: center;
-    margin: 0 5px;
+    margin: 0 10px;
+
+    a {
+      align-items: center;
+      display: flex;
+    }
 
     button {
+      background-color: transparent;
       border: none;
       cursor: pointer;
 

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

@@ -23,16 +23,17 @@ const FileSection = ({
   title,
   files,
   listId,
+  isOver,
   isLast,
   isFirst,
   addFile,
+  canDrop,
+  dropItems,
   moveItem,
+  isFileOver,
   removeFile,
-  connectDropTarget,
-  isOver,
-  canDrop,
   connectFileDrop,
-  isFileOver,
+  connectDropTarget,
 }) =>
   connectFileDrop(
     connectDropTarget(
@@ -55,6 +56,7 @@ const FileSection = ({
         <SortableList
           beginDragProps={['id', 'index', 'name', 'listId']}
           dragHandle={DragHandle}
+          dropItem={dropItems}
           items={files}
           listId={listId}
           listItem={FileItem}

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

@@ -17,12 +17,14 @@ const Files = ({
   moveItem,
   removeFile,
   changeList,
+  dropItems,
   ...rest
 }) => (
   <div>
     <FileSection
       addFile={addFile('manuscripts')}
       changeList={changeList}
+      dropItems={dropItems}
       files={get(files, 'manuscripts') || []}
       isFirst
       listId="manuscripts"
@@ -76,6 +78,13 @@ export default compose(
     },
   }),
   withHandlers({
+    dropItems: ({ files, updateFragment, project, version }) => () => {
+      updateFragment(project, {
+        submitted: new Date(),
+        ...version,
+        files,
+      })
+    },
     changeList: ({ files, setFiles, updateFragment, project, version }) => (
       fromListId,
       toListId,
@@ -121,8 +130,15 @@ export default compose(
         })
       })
     },
-    moveItem: ({ setFiles, files }) => type => (dragIndex, hoverIndex) => {
-      setFiles(SortableList.moveItem(files[type], dragIndex, hoverIndex), type)
+    moveItem: ({
+      setFiles,
+      files,
+      project,
+      version,
+      updateFragment,
+    }) => type => (dragIndex, hoverIndex) => {
+      const newFiles = SortableList.moveItem(files[type], dragIndex, hoverIndex)
+      setFiles(newFiles, type)
     },
     removeFile: ({
       setFiles,

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

@@ -48,7 +48,6 @@ const createFileData = (file, type) => {
     method: 'POST',
     headers: {
       Accept: 'text/plain',
-      'Content-Type': 'multipart/form-data',
     },
     body: data,
   }