mirror of
				https://github.com/strapi/strapi.git
				synced 2025-11-04 03:43:34 +00:00 
			
		
		
		
	delete multiple medias
Signed-off-by: Virginie Ky <virginie.ky@gmail.com>
This commit is contained in:
		
							parent
							
								
									f0240a2c5e
								
							
						
					
					
						commit
						8ed0849432
					
				@ -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,
 | 
			
		||||
 | 
			
		||||
@ -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: () => {} }}
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
 | 
			
		||||
@ -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);
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user