fix: attachment fixes and implevements

- updated code to use changed POST endpoint which accepts multiple attachments at once
- fix callback which is called after all attachments are loaded
- fix internal FilePicker logic, which had issue when uploading many attachments in the same time (replaced useState with useReducer)
- fix view attachments mode
- improve error handling
- fix issue caused by reverting PR for attachments

Author: maxceem

package-lock.json

@@ -5,7 +5,7 @@ import {
   fetchGroups,
   fetchTimelineTemplates,
   fetchChallengePhases,
-  createAttachment as createAttachmentAPI,
+  createAttachments as createAttachmentsAPI,
   removeAttachment as removeAttachmentAPI,
   fetchChallenge,
   fetchChallenges,
@@ -383,31 +383,24 @@ export function loadGroups () {
   }
 }
 
-export function createAttachment (challengeId, file) {
+export function createAttachments (challengeId, files) {
   return async (dispatch) => {
-    // create a temporary uploading id for each attachment
-    // so we can identify them for various actions (names theoretically can duplicate)
-    const uploadingId = _.uniqueId('uploadingId_')
-
     dispatch({
       type: CREATE_ATTACHMENT_PENDING,
       challengeId,
-      file,
-      uploadingId
+      files
     })
 
     try {
-      const attachment = await createAttachmentAPI(challengeId, file)
+      const attachment = await createAttachmentsAPI(challengeId, files)
       dispatch({
         type: CREATE_ATTACHMENT_SUCCESS,
-        attachment: attachment.data,
-        uploadingId
+        attachments: attachment.data
       })
     } catch (error) {
       dispatch({
         type: CREATE_ATTACHMENT_FAILURE,
-        file,
-        uploadingId
+        files
       })
     }
   }

src/actions/challenges.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import React from 'react'
+import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { downloadAttachmentURL, SPECIFICATION_ATTACHMENTS_FOLDER, getAWSContainerFileURL } from '../../../config/constants'
@@ -8,18 +8,32 @@ import FilestackFilePicker from '../../FilestackFilePicker'
 import styles from './Attachment-Field.module.scss'
 import Loader from '../../Loader'
 
-const AttachmentField = ({ challengeId, attachments, removeAttachment, onUploadFile, token, readOnly }) => {
+const AttachmentField = ({ challengeId, attachments, removeAttachment, onUploadFiles, token, readOnly }) => {
+  // when all files are upload to the S3 this method would be called to create attachments via Challenge API
+  const onUploadDone = useCallback(({ filesUploaded }) => {
+    if (filesUploaded && filesUploaded.length > 0) {
+      onUploadFiles(
+        challengeId,
+        filesUploaded.map(file => ({
+          name: file.originalFile.name,
+          fileSize: file.originalFile.size,
+          url: encodeURI(getAWSContainerFileURL(file.key))
+        }))
+      )
+    }
+  }, [challengeId, onUploadFiles])
+
   const renderAttachments = (attachments) => (
     _.map(attachments, (att, index) => (
-      <div className={styles.fileRow} key={att.id || att.uploadingId}>
+      <div className={styles.fileRow} key={att.id || att.url}>
         <a className={styles.col1} href={downloadAttachmentURL(challengeId, att.id, token)} target='_blank'>{att.name}</a>
         <div className={styles.col2}>{formatBytes(att.fileSize)}</div>
         {!readOnly && (
           <div className={styles.actions}>
-            {!att.isDeleting && !att.isUploading && (
+            {!att.isDeleting && att.id && (
               <FontAwesomeIcon icon={faTrash} size={'lg'} onClick={() => removeAttachment(challengeId, att.id)} className={styles.removeIcon} />
             )}
-            {(att.isDeleting || att.isUploading) && (
+            {(att.isDeleting || !att.id) && (
               <div className={styles.loader}><Loader /></div>
             )}
           </div>
@@ -47,11 +61,7 @@ const AttachmentField = ({ challengeId, attachments, removeAttachment, onUploadF
         <div className={styles.row}>
           <FilestackFilePicker
             path={`challenges/${challengeId}/${SPECIFICATION_ATTACHMENTS_FOLDER}/`}
-            onFileUploadFinished={(file) => onUploadFile(challengeId, {
-              name: file.filename,
-              fileSize: file.size,
-              url: getAWSContainerFileURL(file.key)
-            })}
+            onUploadDone={onUploadDone}
           />
         </div>
       )}
@@ -61,7 +71,7 @@ const AttachmentField = ({ challengeId, attachments, removeAttachment, onUploadF
             <div className={styles.header}>
               <div className={styles.col1}>File Name</div>
               <div className={styles.col2}>Size</div>
-              <div className={styles.col3}>Action</div>
+              {!readOnly && <div className={styles.col3}>Action</div>}
             </div>
             { renderAttachments(attachments) }
           </div>
@@ -73,7 +83,7 @@ const AttachmentField = ({ challengeId, attachments, removeAttachment, onUploadF
 
 AttachmentField.defaultProps = {
   removeAttachment: () => {},
-  onUploadFile: () => {},
+  onUploadFiles: () => {},
   readOnly: false,
   attachments: []
 }
@@ -82,7 +92,7 @@ AttachmentField.propTypes = {
   challengeId: PropTypes.string.isRequired,
   attachments: PropTypes.array,
   removeAttachment: PropTypes.func,
-  onUploadFile: PropTypes.func,
+  onUploadFiles: PropTypes.func,
   token: PropTypes.string.isRequired,
   readOnly: PropTypes.bool
 }

src/components/ChallengeEditor/Attachment-Field/index.js

@@ -755,18 +755,6 @@ class ChallengeEditor extends Component {
     this.setState({ challenge: newChallenge })
   }
 
-  onUploadFile (files) {
-    const { challenge: oldChallenge } = this.state
-    const newChallenge = { ...oldChallenge }
-    _.forEach(files, (file) => {
-      newChallenge.attachments.push({
-        fileName: file.name,
-        size: file.size
-      })
-    })
-    this.setState({ challenge: newChallenge })
-  }
-
   collectChallengeData (status) {
     const { attachments, metadata } = this.props
     const challenge = pick([
@@ -1141,7 +1129,7 @@ class ChallengeEditor extends Component {
       isNew,
       isLoading,
       metadata,
-      uploadAttachment,
+      uploadAttachments,
       token,
       removeAttachment,
       failedToLoad,
@@ -1470,7 +1458,7 @@ class ChallengeEditor extends Component {
               challenge={{ ...challenge, id: currentChallengeId }}
               challengeId={currentChallengeId}
               attachments={attachments}
-              onUploadFile={uploadAttachment}
+              onUploadFiles={uploadAttachments}
               token={token}
               removeAttachment={removeAttachment}
             />
@@ -1525,7 +1513,7 @@ ChallengeEditor.propTypes = {
   challengeId: PropTypes.string,
   metadata: PropTypes.object.isRequired,
   isLoading: PropTypes.bool.isRequired,
-  uploadAttachment: PropTypes.func.isRequired,
+  uploadAttachments: PropTypes.func.isRequired,
   removeAttachment: PropTypes.func.isRequired,
   attachments: PropTypes.arrayOf(PropTypes.shape()),
   token: PropTypes.string.isRequired,

src/components/ChallengeEditor/index.js

@@ -8,7 +8,7 @@
     padding: 20px;
     border: 1px solid $tc-gray-40;
     border-radius: 6px;
-    height: 227px;
+    min-height: 227px;
     position: relative;
     font-size: 16px;
     font-weight: 400;