delete multiple medias

Signed-off-by: Virginie Ky <virginie.ky@gmail.com>
This commit is contained in:
Virginie Ky 2020-03-11 22:50:02 +01:00
parent f0240a2c5e
commit 8ed0849432
4 changed files with 99 additions and 14 deletions

View File

@ -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,

View File

@ -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: () => {} }}

View File

@ -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;

View File

@ -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);
});