feat: file upload new data model

Author: muselesscreator

src/components/FileUpload/UploadConfirmModal.jsx

@@ -9,17 +9,17 @@ import messages from './messages';
 import { useUploadConfirmModalHooks } from './hooks';
 
 const UploadConfirmModal = ({
-  open, files, closeHandler, uploadHandler,
+  open, file, closeHandler, uploadHandler,
 }) => {
   const { formatMessage } = useIntl();
 
   const {
-    errors,
+    shouldShowError,
     exitHandler,
     confirmUploadClickHandler,
     onFileDescriptionChange,
   } = useUploadConfirmModalHooks({
-    files,
+    file,
     closeHandler,
     uploadHandler,
   });
@@ -30,6 +30,7 @@ const UploadConfirmModal = ({
       title={formatMessage(messages.uploadFileModalTitle)}
       hasCloseButton={false}
       onClose={exitHandler}
+      isBlocking
     >
       <ModalDialog.Header>
         <ModalDialog.Title>
@@ -39,28 +40,26 @@ const UploadConfirmModal = ({
 
       <ModalDialog.Body>
         <div>
-          {files.map((file, i) => (
-            // note: we only support one file
-            // eslint-disable-next-line react/no-array-index-key
-            <Form.Group key={i}>
+          {file && (
+            <Form.Group>
               <FormLabel>
                 <strong>
                   {formatMessage(messages.uploadFileDescriptionFieldLabel)}
                 </strong>
                 <span className="file-name-ellipsis">{file.name}</span>
               </FormLabel>
               <Form.Control
-                isInvalid={errors[i]}
-                name={`file-${i}-description`}
+                isInvalid={shouldShowError}
+                name="file-description"
                 onChange={onFileDescriptionChange}
               />
-              {errors[i] && (
+              {shouldShowError && (
                 <Form.Control.Feedback type="invalid">
-                  {errors[i] && formatMessage(messages.fileDescriptionMissingError)}
+                  formatMessage(messages.fileDescriptionMissingError)
                 </Form.Control.Feedback>
               )}
             </Form.Group>
-          ))}
+          )}
         </div>
       </ModalDialog.Body>
       <ModalDialog.Footer>
@@ -79,18 +78,15 @@ const UploadConfirmModal = ({
 
 UploadConfirmModal.defaultProps = {
   open: false,
-  files: [],
   closeHandler: () => {},
   uploadHandler: () => {},
 };
 UploadConfirmModal.propTypes = {
   open: PropTypes.bool,
-  files: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      description: PropTypes.string,
-    }),
-  ),
+  file: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+  }).isRequired,
   closeHandler: PropTypes.func,
   uploadHandler: PropTypes.func,
 };

src/components/FileUpload/hooks.js

@@ -3,28 +3,28 @@ import { useCallback } from 'react';
 import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
 
 export const stateKeys = StrictDict({
-  errors: 'errors',
+  shouldShowError: 'shouldShowError',
   isModalOpen: 'isModalOpen',
   uploadArgs: 'uploadArgs',
   description: 'description',
 });
 export const useUploadConfirmModalHooks = ({
-  files, closeHandler, uploadHandler,
+  file, closeHandler, uploadHandler,
 }) => {
-  const [description, setDescription] = useKeyedState(stateKeys.description, null);
-  const [errors, setErrors] = useKeyedState(stateKeys.errors, []);
+  const [description, setDescription] = useKeyedState(stateKeys.description, '');
+  const [shouldShowError, setShouldShowError] = useKeyedState(stateKeys.shouldShowError, false);
 
   const confirmUploadClickHandler = () => {
-    const errorList = files.map((file) => (!file.description));
-    setErrors(errorList);
-    if (errorList.some((error) => error)) {
-      return;
+    if (description !== '') {
+      uploadHandler(file, description);
+    } else {
+      setShouldShowError(true);
     }
-    uploadHandler();
   };
 
   const exitHandler = () => {
-    setErrors([]);
+    setShouldShowError(false);
+    setDescription('');
     closeHandler();
   };
 
@@ -33,7 +33,7 @@ export const useUploadConfirmModalHooks = ({
   const onFileDescriptionChange = (event) => setDescription(event.target.value);
 
   return {
-    errors,
+    shouldShowError,
     confirmUploadClickHandler,
     exitHandler,
     onFileDescriptionChange,