Fix delete media

Signed-off-by: soupette <cyril.lpz@gmail.com>

examples/getstarted/extensions/upload/config/settings.js

@@ -1,8 +1,6 @@
 module.exports = {
-  // provider: 'aws-s3',
-  // providerOptions: {
-  //   cloud_name: '',
-  //   api_key: '',
-  //   api_secret: '',
-  // },
+  provider: 'cloudinary',
+  providerOptions: {
+    cloud_name: 'dv6lyfjdm',
+  },
 };

examples/getstarted/package.json

@@ -29,6 +29,7 @@
     "strapi-plugin-users-permissions": "3.0.0-beta.19.3",
     "strapi-provider-email-mailgun": "3.0.0-beta.19.3",
     "strapi-provider-upload-aws-s3": "3.0.0-beta.19.3",
+    "strapi-provider-upload-cloudinary": "3.0.0-beta.19.3",
     "strapi-utils": "3.0.0-beta.19.3"
   },
   "strapi": {

packages/strapi-admin/admin/src/translations/en.json

@@ -273,5 +273,6 @@
   "notification.contentType.relations.conflict": "Content type has conflicting relations",
   "notification.form.error.fields": "The form contains some errors",
   "notification.form.success.fields": "Changes saved",
+  "notification.success.delete": "The item has been deleted",
   "global.prompt.unsaved": "Are you sure you want to leave this page? All your modifications will be lost"
 }

packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/Overlay.js

@@ -14,7 +14,14 @@ const Overlay = styled.div`
     right: 0;
     bottom: 0;
     left: 0;
-    background: linear-gradient(rgba(0, 0, 0, 15) 0%, rgba(0, 0, 0, 0) 100%);
+    ${({ noGradient }) => {
+      if (noGradient) {
+        return '';
+      }
+
+      return `background: linear-gradient(rgba(0, 0, 0, 15) 0%, rgba(0, 0, 0, 0) 100%)`;
+    }};
+
     opacity: 0.5;
   }
 
@@ -25,7 +32,13 @@ const Overlay = styled.div`
     right: 0;
     bottom: 0;
     left: 24rem;
-    background: linear-gradient(#fbfbfb 20%, rgba(0, 0, 100, 0) 100%);
+    ${({ noGradient }) => {
+      if (noGradient) {
+        return '';
+      }
+
+      return `background: linear-gradient(#fbfbfb 20%, rgba(0, 0, 100, 0) 100%)`;
+    }};
     box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
     box-shadow: inset 0 1px 2px 0 rgba(40, 42, 49, 0.16);
   }
@@ -38,4 +51,9 @@ const Overlay = styled.div`
     z-index: 1100;
   }
 `;
+
+Overlay.defaultProps = {
+  noGradient: false,
+};
+
 export default Overlay;

packages/strapi-helper-plugin/lib/src/components/OverlayBlocker/index.js

@@ -110,7 +110,7 @@ class OverlayBlocker extends React.Component {
 
     if (this.props.isOpen) {
       return ReactDOM.createPortal(
-        <Overlay>
+        <Overlay noGradient={this.props.noGradient}>
           <div>{content}</div>
         </Overlay>,
         this.overlayContainer
@@ -126,6 +126,7 @@ OverlayBlocker.defaultProps = {
   description: 'components.OverlayBlocker.description',
   icon: 'sync-alt',
   isOpen: false,
+  noGradient: false,
   title: 'components.OverlayBlocker.title',
 };
 
@@ -134,6 +135,7 @@ OverlayBlocker.propTypes = {
   description: PropTypes.string,
   icon: PropTypes.string,
   isOpen: PropTypes.bool,
+  noGradient: PropTypes.bool,
   title: PropTypes.string,
 };
 

packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js

@@ -71,6 +71,7 @@ const HomePage = () => {
       await request(requestURL, {
         method: 'DELETE',
       });
+      strapi.notification.success('notification.success.delete');
     } catch (err) {
       if (isMounted) {
         strapi.notification.error('notification.error');
@@ -79,6 +80,8 @@ const HomePage = () => {
   };
 
   const fetchListData = async () => {
+    dispatch({ type: 'GET_DATA' });
+
     const [data, count] = await Promise.all([fetchData(), fetchDataCount()]);
 
     if (isMounted) {
@@ -101,7 +104,10 @@ const HomePage = () => {
 
       return Promise.resolve(data);
     } catch (err) {
-      strapi.notification.error('notification.error');
+      if (isMounted) {
+        dispatch({ type: 'GET_DATA_ERROR' });
+        strapi.notification.error('notification.error');
+      }
     }
 
     return [];
@@ -118,6 +124,7 @@ const HomePage = () => {
       return Promise.resolve(count);
     } catch (err) {
       if (isMounted) {
+        dispatch({ type: 'GET_DATA_ERROR' });
         strapi.notification.error('notification.error');
       }
     }
@@ -204,6 +211,28 @@ const HomePage = () => {
     });
   };
 
+  const handleDeleteMediaFromModal = async id => {
+    handleClickToggleModal();
+    const overlayblockerParams = {
+      children: <div />,
+      noGradient: true,
+    };
+    strapi.lockApp(overlayblockerParams);
+
+    try {
+      await deleteMedia(id);
+
+      dispatch({
+        type: 'ON_DELETE_MEDIA_SUCCEEDED',
+        mediaId: id,
+      });
+    } catch (err) {
+      // Silent
+    } finally {
+      strapi.unlockApp();
+    }
+  };
+
   const handleDeleteMedias = async () => {
     await Promise.all(dataToDelete.map(item => deleteMedia(item.id)));
 
@@ -333,7 +362,9 @@ const HomePage = () => {
         initialStep={modalInitialStep}
         isOpen={isModalOpen}
         onClosed={handleModalClose}
+        onDeleteMedia={handleDeleteMediaFromModal}
         onToggle={handleClickToggleModal}
+        refetchData={fetchListData}
       />
       <PopUpWarning
         isOpen={isPopupOpen}

packages/strapi-plugin-upload/admin/src/containers/HomePage/reducer.js

@@ -11,6 +11,10 @@ const reducer = (state, action) => {
   switch (action.type) {
     case 'CLEAR_DATA_TO_DELETE':
       return state.update('dataToDelete', () => fromJS([]));
+    case 'GET_DATA':
+      return state.update('isLoading', () => true);
+    case 'GET_DATA_ERROR':
+      return state.update('isLoading', () => false);
     case 'GET_DATA_SUCCEEDED':
       return state
         .update('data', () => fromJS(action.data))
@@ -48,6 +52,15 @@ const reducer = (state, action) => {
         return dataToDelete.concat(newItems);
       });
     }
+    case 'ON_DELETE_MEDIA':
+      return state.update('isLoading', () => true);
+    case 'ON_DELETE_MEDIA_ERROR':
+      return state.update('isLoading', () => false);
+    case 'ON_DELETE_MEDIA_SUCCEEDED':
+      return state
+        .update('data', list => list.filter(item => item.get('id') !== action.mediaId))
+        .update('dataCount', count => count - 1)
+        .update('isLoading', () => false);
     default:
       return state;
   }

packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js

@@ -4,13 +4,20 @@ import { get } from 'lodash';
 import { Modal, ModalFooter, PopUpWarning, useGlobalContext, request } from 'strapi-helper-plugin';
 import { Button } from '@buffetjs/core';
 import pluginId from '../../pluginId';
-import { getRequestUrl, getTrad } from '../../utils';
+import { getTrad } from '../../utils';
 import ModalHeader from '../../components/ModalHeader';
 import stepper from './stepper';
 import init from './init';
 import reducer, { initialState } from './reducer';
 
-const ModalStepper = ({ initialFileToEdit, initialStep, isOpen, onClosed, onToggle }) => {
+const ModalStepper = ({
+  initialFileToEdit,
+  initialStep,
+  isOpen,
+  onClosed,
+  onDeleteMedia,
+  onToggle,
+}) => {
   const { formatMessage } = useGlobalContext();
   const [isWarningDeleteOpen, setIsWarningDeleteOpen] = useState(false);
   const [shouldDeleteFile, setShouldDeleteFile] = useState(false);
@@ -66,15 +73,15 @@ const ModalStepper = ({ initialFileToEdit, initialStep, isOpen, onClosed, onTogg
     });
   };
 
-  const handleCancelFileToUpload = fileIndex => {
-    const fileToCancel = get(filesToUpload, fileIndex, {});
+  const handleCancelFileToUpload = fileOriginalIndex => {
+    const fileToCancel = filesToUpload.find(file => file.originalIndex === fileOriginalIndex);
 
     // Cancel upload
     fileToCancel.abortController.abort();
 
     dispatch({
       type: 'REMOVE_FILE_TO_UPLOAD',
-      fileIndex,
+      fileIndex: fileOriginalIndex,
     });
   };
 
@@ -123,16 +130,7 @@ const ModalStepper = ({ initialFileToEdit, initialStep, isOpen, onClosed, onTogg
     if (shouldDeleteFile) {
       const { id } = fileToEdit;
 
-      try {
-        const requestURL = getRequestUrl(`files/${id}`);
-
-        await request(requestURL, { method: 'DELETE' });
-
-        setShouldDeleteFile(false);
-        toggleRef.current(true);
-      } catch (err) {
-        console.log(err);
-      }
+      onDeleteMedia(id);
     }
   };
 
@@ -268,11 +266,13 @@ const ModalStepper = ({ initialFileToEdit, initialStep, isOpen, onClosed, onTogg
             null
           );
 
-          dispatch({
-            type: 'SET_FILE_ERROR',
-            fileIndex: originalIndex,
-            errorMessage,
-          });
+          if (errorMessage) {
+            dispatch({
+              type: 'SET_FILE_ERROR',
+              fileIndex: originalIndex,
+              errorMessage,
+            });
+          }
         }
       }
     );
@@ -330,12 +330,12 @@ const ModalStepper = ({ initialFileToEdit, initialStep, isOpen, onClosed, onTogg
             onChange={handleChange}
             onClickCancelUpload={handleCancelFileToUpload}
             onClickDeleteFileToUpload={
-              currentStep === 'edit-new' ? handleClickDeleteFileToUpload : handleClickDeleteFile
+              currentStep === 'edit' ? handleClickDeleteFile : handleClickDeleteFileToUpload
             }
             onClickEditNewFile={handleGoToEditNewFile}
             onGoToAddBrowseFiles={handleGoToAddBrowseFiles}
             onSubmitEdit={
-              currentStep === 'edit-new' ? handleSubmitEditNewFile : handleSubmitEditExistingFile
+              currentStep === 'edit' ? handleSubmitEditExistingFile : handleSubmitEditNewFile
             }
             onToggle={handleToggle}
             toggleDisableForm={setIsFormDisabled}
@@ -408,6 +408,7 @@ ModalStepper.defaultProps = {
   initialFileToEdit: null,
   initialStep: 'browse',
   onClosed: () => {},
+  onDeleteMedia: () => {},
   onToggle: () => {},
 };
 
@@ -416,6 +417,7 @@ ModalStepper.propTypes = {
   initialStep: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
   onClosed: PropTypes.func,
+  onDeleteMedia: PropTypes.func,
   onToggle: PropTypes.func,
 };