/
delDodal.tsx
99 lines (94 loc) · 2.48 KB
/
delDodal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import {
Box,
Button,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay
} from '@chakra-ui/react';
import { useCallback, useState } from 'react';
import { useToast } from '@/hooks/useToast';
import { useTranslation } from 'next-i18next';
import { deleteAllResources } from '@/api/delete';
import { useResourceStore } from '@/store/resource';
const DelModal = ({
name,
onClose,
onSuccess
}: {
name: string;
onClose: () => void;
onSuccess: () => void;
}) => {
const { t } = useTranslation();
const { resource } = useResourceStore();
const [inputValue, setInputValue] = useState('');
const [loading, setLoading] = useState(false);
const { toast } = useToast();
const handleDelApp = useCallback(async () => {
try {
setLoading(true);
await deleteAllResources(resource);
toast({
title: t('Delete successful'),
status: 'success'
});
onSuccess();
onClose();
} catch (error: any) {
toast({
title: typeof error === 'string' ? error : error.message || t('Delete Failed'),
status: 'error'
});
console.error(error);
}
setLoading(false);
}, [resource, toast, t, onSuccess, onClose]);
return (
<Modal isOpen onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{t('Deletion warning')}</ModalHeader>
<ModalCloseButton />
<ModalBody pb={4}>
<Box color={'myGray.600'}>
{t('delete message')}
<Box my={3}>
{t('Please Enter')}
<Box as={'span'} color={'myGray.900'} fontWeight={'bold'} userSelect={'all'} px="4px">
{name}
</Box>
{t('Confirm')}
</Box>
</Box>
<Input
placeholder={`${t('Please Enter')}:${name}`}
value={inputValue}
bg={'myWhite.300'}
onChange={(e) => setInputValue(e.target.value)}
/>
</ModalBody>
<ModalFooter>
<Button onClick={onClose} variant={'base'}>
{t('Cancel')}
</Button>
<Button
colorScheme="red"
ml={3}
variant={'solid'}
isDisabled={inputValue !== name}
isLoading={loading}
onClick={handleDelApp}
>
{t('Confirm deletion')}
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
};
export default DelModal;