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} /> </ControlsWrapper> - <List onChange={handleChangeCheck} selectedItems={dataToDelete} /> + <List data={data} onChange={handleChangeCheck} selectedItems={dataToDelete} /> <ListEmpty onClick={() => handleClickToggleModal()} /> <PageFooter context={{ emitEvent: () => {} }} 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); });