fix: upload and delete files issue (#14)

react-app/components/ErrorMessage/index.jsx

@@ -5,17 +5,18 @@ import PropTypes from 'prop-types';
 
 import './styles.css';
 
-const ErrorMessage = ({ message }) => {
+const ErrorMessage = ({ message, className = '' }) => {
   return (
-    <div className="error-message">
+    <div className={`error-message ${className}`}>
       <FontAwesomeIcon icon={faExclamationTriangle} className="error-icon" />
       <p className="error-text">{message}</p>
     </div>
   );
 };
 
 ErrorMessage.propTypes = {
-  message: PropTypes.string.isRequired
+  message: PropTypes.string.isRequired,
+  className: PropTypes.string
 };
 
 export default ErrorMessage;

react-app/components/XBlockEditView/index.jsx

@@ -7,10 +7,11 @@ import ErrorMessage from '@components/ErrorMessage';
 import xBlockContext from '@constants/xBlockContext';
 import apiConfig from '@config/api';
 import useXBlockActionButtons from '@hooks/useXBlockActionButtons';
+import useAddErrorMessageToModal from '@hooks/useAddErrorMessageToModal';
 
 import './styles.css';
 
-const itemsPerPage = 10;
+const itemsPerPage = 100;
 
 const XBlockEditView = () => {
   const [imagesToSave, setImagesToSave] = useState([]);
@@ -56,19 +57,15 @@ const XBlockEditView = () => {
     buttonSaveRef.classList.add('disabled-button');
 
     try {
-      const requestPromises = [];
-
       if (data.length > 0) {
-        requestPromises.push(uploadFiles(formData));
+        await uploadFiles(formData);
       }
 
       if (imagesKeysToDelete.length > 0) {
         const imagesKeysToDeleteRemoveDuplicates = [...new Set(imagesKeysToDelete)];
-        requestPromises.push(deleteFiles(imagesKeysToDeleteRemoveDuplicates));
+        await deleteFiles(imagesKeysToDeleteRemoveDuplicates);
       }
 
-      await Promise.all(requestPromises);
-
       setImagesToSave([]);
       setImagesToDelete([]);
       setReloadPage(true);
@@ -242,6 +239,10 @@ const XBlockEditView = () => {
     setImagesToSave(newImagesToSave);
   };
 
+  useAddErrorMessageToModal(
+    errorMessage ? <ErrorMessage message={errorMessage} className="error-message-edit" /> : null
+  );
+
   useEffect(() => {
     fetchUploadedFiles();
   }, []);
@@ -256,7 +257,6 @@ const XBlockEditView = () => {
     <>
       <DropZoneFile onDroppedImages={handleOnDroppedImages} />
       <ListImages list={currentImagesList} onDeleteImageList={handleDeleteImage} />
-      {errorMessage && <ErrorMessage message={errorMessage} />}
     </>
   );
 };

react-app/components/XBlockEditView/styles.css

@@ -5,3 +5,18 @@
 .disabled-button:hover {
   cursor: not-allowed;
 }
+
+.error-message-edit {
+  padding: 15px 2% 10px 2% !important;
+  margin-top: -10px !important;
+}
+
+.error-message-edit > .error-icon {
+  font-size: 16px !important;
+  margin-right: 10px !important;
+}
+
+.error-message-edit > .error-text {
+  font-size: 14px !important;
+  margin-top: -5px !important;
+}

react-app/hooks/useAddErrorMessageToModal.js

@@ -0,0 +1,36 @@
+import { useEffect, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+
+const useAddErrorMessageToModal = (errorMessage) => {
+  useEffect(() => {
+    const modalElement = document.querySelector('.edit-xblock-modal');
+
+    if (modalElement && errorMessage) {
+      const div = document.createElement('div');
+      modalElement.appendChild(div);
+
+      ReactDOM.render(errorMessage, div);
+
+      return () => {
+        ReactDOM.unmountComponentAtNode(div);
+        modalElement.removeChild(div);
+      };
+    }
+  }, [errorMessage]);
+
+  return useMemo(
+    () => ({
+      removeErrorMessage: () => {
+        const modalElement = document.querySelector('.edit-xblock-modal');
+        const errorMessageDiv = modalElement.querySelector('.error-message');
+        if (errorMessageDiv) {
+          ReactDOM.unmountComponentAtNode(errorMessageDiv);
+          errorMessageDiv.remove();
+        }
+      },
+    }),
+    []
+  );
+};
+
+export default useAddErrorMessageToModal;