79 lines
1.8 KiB
JavaScript

import {__, _x, _n, _nx} from '@wordpress/i18n';
import {useState, useEffect} from '@wordpress/element';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
export default function DeleteModal({video, setVideos}) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
function deleteVideo() {
const formData = new FormData();
formData.append('video_id', video.guid);
formData.append('nonce', IUP_VIDEO.nonce);
const options = {
method: 'POST',
headers: {
Accept: 'application/json',
},
body: formData,
};
fetch(`${ajaxurl}?action=infinite-uploads-video-delete`, options)
.then((response) => response.json())
.then((data) => {
console.log(data);
if (data.success) {
setVideos((videos) =>
videos.filter((v) => v.guid !== video.guid)
);
handleClose();
} else {
console.error(data.data);
}
})
.catch((error) => {
console.log('Error:', error);
});
}
return (
<>
<Button
variant="outline-danger"
size="sm"
onClick={handleShow}
className="rounded-4"
>
{__('Delete Video', 'infinite-uploads')}
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>
{__('Delete Video:', 'infinite-uploads')}{' '}
{video.title}
</Modal.Title>
</Modal.Header>
<Modal.Body>
{__(
'Are you sure you would like to delete this video?',
'infinite-uploads'
)}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
{__('Cancel', 'infinite-uploads')}
</Button>
<Button variant="danger" onClick={deleteVideo}>
{__('Delete', 'infinite-uploads')}
</Button>
</Modal.Footer>
</Modal>
</>
);
}