diff --git a/packages/strapi-plugin-upload/admin/src/components/Card/index.js b/packages/strapi-plugin-upload/admin/src/components/Card/index.js
index 24f495508e..9fe622ac10 100644
--- a/packages/strapi-plugin-upload/admin/src/components/Card/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/Card/index.js
@@ -16,7 +16,7 @@ const Card = ({ checked, id, name, size, small, type, onChange, url }) => {
-
+
@@ -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,
diff --git a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js
index d1df484e1d..3209f90c48 100644
--- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js
+++ b/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}
/>
-
+
handleClickToggleModal()} />
{} }}
diff --git a/packages/strapi-plugin-upload/admin/src/containers/HomePage/reducer.js b/packages/strapi-plugin-upload/admin/src/containers/HomePage/reducer.js
index 09505f59f0..2be0faabf3 100644
--- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/reducer.js
+++ b/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) {
- return state.update('dataToDelete', () => []);
+ if (isSelected) {
+ 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;
diff --git a/packages/strapi-plugin-upload/admin/src/containers/HomePage/tests/reducer.test.js b/packages/strapi-plugin-upload/admin/src/containers/HomePage/tests/reducer.test.js
index 8f3733d678..c0a20189c9 100644
--- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/tests/reducer.test.js
+++ b/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);
});