delete multiple medias

Signed-off-by: Virginie Ky <virginie.ky@gmail.com>

packages/strapi-plugin-upload/admin/src/components/Card/index.js

@@ -16,7 +16,7 @@ const Card = ({ checked, id, name, size, small, type, onChange, url }) => {
         <CardImgWrapper small={small} checked={checked}>
           <CardPreview type={type} url={url} />
           <div className="card-control-wrapper">
-            <Checkbox name={id} onChange={onChange} value={checked} />
+            <Checkbox name={`${id}`} onChange={onChange} value={checked} />
           </div>
         </CardImgWrapper>
         <Title fontSize="md" fontWeight="bold" ellipsis>
@@ -41,7 +41,7 @@ Card.defaultProps = {
 Card.propTypes = {
   checked: PropTypes.bool,
   name: PropTypes.string,
-  id: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
   onChange: PropTypes.func,
   size: PropTypes.number,
   small: PropTypes.bool,

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

@@ -51,6 +51,18 @@ const HomePage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [search]);
 
+  const deleteMedia = async id => {
+    const requestURL = getRequestUrl(`files/${id}`);
+
+    try {
+      await request(`${requestURL}${search}`, {
+        method: 'DELETE',
+      });
+    } catch (err) {
+      strapi.notification.error('notification.error');
+    }
+  };
+
   const fetchData = async () => {
     const requestURL = getRequestUrl('files');
 
@@ -91,7 +103,7 @@ const HomePage = () => {
   const handleChangeCheck = ({ target: { name, value } }) => {
     dispatch({
       type: 'ON_CHANGE_DATA_TO_DELETE',
-      id: name,
+      id: parseInt(name, 10),
       value,
     });
   };
@@ -139,10 +151,15 @@ const HomePage = () => {
     });
   };
 
+  const handleDeleteMedias = async () => {
+    await Promise.all(dataToDelete.map(id => deleteMedia(id)));
+
+    fetchData();
+  };
+
   const handleSelectAll = () => {
     dispatch({
       type: 'TOGGLE_SELECT_ALL',
-      value: !areAllCheckboxesSelected,
     });
   };
 
@@ -163,7 +180,7 @@ const HomePage = () => {
         color: 'cancel',
         // TradId from the strapi-admin package
         label: formatMessage({ id: 'app.utils.delete' }),
-        onClick: () => {},
+        onClick: handleDeleteMedias,
         type: 'button',
       },
       {
@@ -211,7 +228,7 @@ const HomePage = () => {
           onClick={handleDeleteFilter}
         />
       </ControlsWrapper>
-      <List onChange={handleChangeCheck} selectedItems={dataToDelete} />
+      <List data={data} onChange={handleChangeCheck} selectedItems={dataToDelete} />
       <ListEmpty onClick={() => handleClickToggleModal()} />
       <PageFooter
         context={{ emitEvent: () => {} }}

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

@@ -1,4 +1,4 @@
-import { fromJS } from 'immutable';
+import { List, fromJS } from 'immutable';
 
 const initialState = fromJS({
   data: [],
@@ -22,13 +22,13 @@ const reducer = (state, action) => {
       return state.removeIn(['dataToDelete', index]);
     }
     case 'TOGGLE_SELECT_ALL': {
-      const { value } = action;
+      const isSelected = List(state.get('data')).size === List(state.get('dataToDelete')).size;
 
-      if (!value) {
+      if (isSelected) {
-        return state.update('dataToDelete', () => []);
+        return state.update('dataToDelete', () => List([]));
       }
 
-      return state.update('dataToDelete', () => state.get('data').map(item => item.get('id')));
+      return state.update('dataToDelete', () => List(state.get('data').map(item => item.id)));
     }
     default:
       return state;

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

@@ -1,4 +1,4 @@
-import { fromJS } from 'immutable';
+import { List, fromJS } from 'immutable';
 import reducer, { initialState } from '../reducer';
 
 describe('Upload | containers | HomePage | reducer', () => {
@@ -75,14 +75,82 @@ describe('Upload | containers | HomePage | reducer', () => {
         updated_at: '2020-03-04T14:16:35.148Z',
       },
     ];
-    const state = initialState.set('data', data).set('dataToDelete', fromJS([1, 2]));
+    const state = initialState.set('data', data).set('dataToDelete', List([1, 2]));
 
     const action = {
       type: 'ON_CHANGE_DATA_TO_DELETE',
       id: 2,
     };
 
-    const expectedState = state.set('dataToDelete', fromJS([1]));
+    const expectedState = state.set('dataToDelete', List([1]));
+
+    expect(reducer(state, action)).toEqual(expectedState);
+  });
+
+  it('should empty dataToDelete if all items are selected', () => {
+    const data = [
+      {
+        id: 1,
+        name: 'Capture d’écran 2020-02-25 à 15.43.44.png',
+        ext: '.png',
+        mime: 'image/png',
+        size: 146.25,
+        url: '/uploads/ba0c3352c4b14132aed3fcf3110b481c.png',
+        created_at: '2020-03-04T09:45:32.444Z',
+        updated_at: '2020-03-04T09:45:32.444Z',
+      },
+      {
+        id: 2,
+        name: 'photo_2020-02-27 17.07.08.jpeg',
+        ext: '.jpeg',
+        mime: 'image/jpeg',
+        size: 140.64,
+        url: '/uploads/1d2ac677ea194b48bbe55ecec1b452d6.jpeg',
+        created_at: '2020-03-04T14:16:35.148Z',
+        updated_at: '2020-03-04T14:16:35.148Z',
+      },
+    ];
+    const state = initialState.set('data', data).set('dataToDelete', List([1, 2]));
+
+    const action = {
+      type: 'TOGGLE_SELECT_ALL',
+    };
+
+    const expectedState = state.set('dataToDelete', List([]));
+
+    expect(reducer(state, action)).toEqual(expectedState);
+  });
+
+  it('should fill dataToDelete if all items are not selected', () => {
+    const data = [
+      {
+        id: 1,
+        name: 'Capture d’écran 2020-02-25 à 15.43.44.png',
+        ext: '.png',
+        mime: 'image/png',
+        size: 146.25,
+        url: '/uploads/ba0c3352c4b14132aed3fcf3110b481c.png',
+        created_at: '2020-03-04T09:45:32.444Z',
+        updated_at: '2020-03-04T09:45:32.444Z',
+      },
+      {
+        id: 2,
+        name: 'photo_2020-02-27 17.07.08.jpeg',
+        ext: '.jpeg',
+        mime: 'image/jpeg',
+        size: 140.64,
+        url: '/uploads/1d2ac677ea194b48bbe55ecec1b452d6.jpeg',
+        created_at: '2020-03-04T14:16:35.148Z',
+        updated_at: '2020-03-04T14:16:35.148Z',
+      },
+    ];
+    const state = initialState.set('data', data).set('dataToDelete', List([1]));
+
+    const action = {
+      type: 'TOGGLE_SELECT_ALL',
+    };
+
+    const expectedState = state.set('dataToDelete', List([1, 2]));
 
     expect(reducer(state, action)).toEqual(expectedState);
   });