ConfirmDeleteModal.tsx64 lines · main

1	import { useEffect, useState } from 'react'
2	import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
3
4	import { STORAGE_ROW_TYPES } from '../Storage.constants'
5	import { useStorageExplorerStateSnapshot } from '@/state/storage-explorer'
6
7	export const ConfirmDeleteModal = () => {
8	const [deleting, setDeleting] = useState(false)
9	const { selectedItemsToDelete, deleteFolder, deleteFiles, setSelectedItemsToDelete } =
10	useStorageExplorerStateSnapshot()
11
12	const visible = selectedItemsToDelete.length > 0
13	const multipleFiles = selectedItemsToDelete.length > 1
14
15	const title = multipleFiles
16	? `Confirm deletion of ${selectedItemsToDelete.length} items`
17	: selectedItemsToDelete.length === 1
18	? `Confirm deletion of ${selectedItemsToDelete[0].name}`
19	: ``
20
21	const description = multipleFiles
22	? `Are you sure you want to delete the selected ${selectedItemsToDelete.length} items?`
23	: selectedItemsToDelete.length === 1
24	? `Are you sure you want to delete the selected ${selectedItemsToDelete[0].type.toLowerCase()}?`
25	: ``
26
27	const onDeleteSelectedFiles = async () => {
28	try {
29	setDeleting(true)
30	if (
31	selectedItemsToDelete.length === 1 &&
32	selectedItemsToDelete[0].type === STORAGE_ROW_TYPES.FOLDER
33	) {
34	await deleteFolder(selectedItemsToDelete[0])
35	} else {
36	await deleteFiles({ files: selectedItemsToDelete })
37	}
38	} catch (err) {
39	} finally {
40	setDeleting(false)
41	}
42	}
43
44	useEffect(() => {
45	setDeleting(false)
46	}, [visible])
47
48	return (
49	<ConfirmationModal
50	size="medium"
51	visible={visible}
52	title={<span className="wrap-break-word">{title}</span>}
53	loading={deleting}
54	onCancel={() => setSelectedItemsToDelete([])}
55	onConfirm={onDeleteSelectedFiles}
56	variant="destructive"
57	alert={{
58	base: { variant: 'destructive' },
59	title: 'This action cannot be undone',
60	description,
61	}}
62	/>
63	)
64	}