gitscope
/
← marzneshin / app/dashboard/src/pages/users/modals/reset-all-usage-modal.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/pages/users/modals/reset-all-usage-modal.tsx · v0.1.2
Source
1 a47eb4c Dawsh 2y ago import {
2 a47eb4c Dawsh 2y ago Button,
3 a47eb4c Dawsh 2y ago chakra,
4 a47eb4c Dawsh 2y ago Modal,
5 a47eb4c Dawsh 2y ago ModalBody,
6 a47eb4c Dawsh 2y ago ModalCloseButton,
7 a47eb4c Dawsh 2y ago ModalContent,
8 a47eb4c Dawsh 2y ago ModalFooter,
9 a47eb4c Dawsh 2y ago ModalHeader,
10 a47eb4c Dawsh 2y ago ModalOverlay,
11 a47eb4c Dawsh 2y ago Spinner,
12 a47eb4c Dawsh 2y ago Text,
13 a47eb4c Dawsh 2y ago useToast,
14 bf7c131 Mardin 2y ago } from '@chakra-ui/react';
15 bf7c131 Mardin 2y ago import { FC, useState } from 'react';
16 bf7c131 Mardin 2y ago import { DocumentMinusIcon } from '@heroicons/react/24/outline';
17 bedeeff Mardin 2y ago import { Icon } from 'components/icon';
18 bf7c131 Mardin 2y ago import { useTranslation } from 'react-i18next';
19 89f8f93 Mardin 2y ago import { useUsers } from 'stores';
20 a47eb4c Dawsh 2y ago
21 a47eb4c Dawsh 2y ago export const ResetIcon = chakra(DocumentMinusIcon, {
22 a47eb4c Dawsh 2y ago baseStyle: {
23 a47eb4c Dawsh 2y ago w: 5,
24 a47eb4c Dawsh 2y ago h: 5,
25 a47eb4c Dawsh 2y ago },
26 a47eb4c Dawsh 2y ago });
27 a47eb4c Dawsh 2y ago
28 bedeeff Mardin 2y ago type DeleteUserModalProps = {};
29 a47eb4c Dawsh 2y ago
30 a47eb4c Dawsh 2y ago export const ResetAllUsageModal: FC<DeleteUserModalProps> = () => {
31 a47eb4c Dawsh 2y ago const [loading, setLoading] = useState(false);
32 4205669 Mardin 2y ago const { isResetingAllUsage, onResetAllUsage, resetAllUsage } = useUsers();
33 a47eb4c Dawsh 2y ago const { t } = useTranslation();
34 a47eb4c Dawsh 2y ago const toast = useToast();
35 a47eb4c Dawsh 2y ago const onClose = () => {
36 a47eb4c Dawsh 2y ago onResetAllUsage(false);
37 a47eb4c Dawsh 2y ago };
38 a47eb4c Dawsh 2y ago const onReset = () => {
39 a47eb4c Dawsh 2y ago setLoading(true);
40 a47eb4c Dawsh 2y ago resetAllUsage()
41 a47eb4c Dawsh 2y ago .then(() => {
42 a47eb4c Dawsh 2y ago toast({
43 bf7c131 Mardin 2y ago title: t('resetAllUsage.success'),
44 bf7c131 Mardin 2y ago status: 'success',
45 a47eb4c Dawsh 2y ago isClosable: true,
46 bf7c131 Mardin 2y ago position: 'top',
47 a47eb4c Dawsh 2y ago duration: 3000,
48 a47eb4c Dawsh 2y ago });
49 a47eb4c Dawsh 2y ago })
50 a47eb4c Dawsh 2y ago .catch(() => {
51 a47eb4c Dawsh 2y ago toast({
52 bf7c131 Mardin 2y ago title: t('resetAllUsage.error'),
53 bf7c131 Mardin 2y ago status: 'error',
54 a47eb4c Dawsh 2y ago isClosable: true,
55 bf7c131 Mardin 2y ago position: 'top',
56 a47eb4c Dawsh 2y ago duration: 3000,
57 a47eb4c Dawsh 2y ago });
58 a47eb4c Dawsh 2y ago })
59 a47eb4c Dawsh 2y ago .finally(() => {
60 a47eb4c Dawsh 2y ago setLoading(false);
61 a47eb4c Dawsh 2y ago });
62 a47eb4c Dawsh 2y ago };
63 a47eb4c Dawsh 2y ago return (
64 a47eb4c Dawsh 2y ago <Modal isCentered isOpen={isResetingAllUsage} onClose={onClose} size="sm">
65 a47eb4c Dawsh 2y ago <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
66 a47eb4c Dawsh 2y ago <ModalContent mx="3">
67 a47eb4c Dawsh 2y ago <ModalHeader pt={6}>
68 a47eb4c Dawsh 2y ago <Icon color="red">
69 a47eb4c Dawsh 2y ago <ResetIcon />
70 a47eb4c Dawsh 2y ago </Icon>
71 a47eb4c Dawsh 2y ago </ModalHeader>
72 a47eb4c Dawsh 2y ago <ModalCloseButton mt={3} />
73 a47eb4c Dawsh 2y ago <ModalBody>
74 a47eb4c Dawsh 2y ago <Text fontWeight="semibold" fontSize="lg">
75 bf7c131 Mardin 2y ago {t('resetAllUsage.title')}
76 a47eb4c Dawsh 2y ago </Text>
77 a47eb4c Dawsh 2y ago {isResetingAllUsage && (
78 a47eb4c Dawsh 2y ago <Text
79 a47eb4c Dawsh 2y ago mt={1}
80 a47eb4c Dawsh 2y ago fontSize="sm"
81 bf7c131 Mardin 2y ago _dark={{ color: 'gray.400' }}
82 a47eb4c Dawsh 2y ago color="gray.600"
83 a47eb4c Dawsh 2y ago >
84 bf7c131 Mardin 2y ago {t('resetAllUsage.prompt')}
85 a47eb4c Dawsh 2y ago </Text>
86 a47eb4c Dawsh 2y ago )}
87 a47eb4c Dawsh 2y ago </ModalBody>
88 a47eb4c Dawsh 2y ago <ModalFooter display="flex">
89 a47eb4c Dawsh 2y ago <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
90 bf7c131 Mardin 2y ago {t('cancel')}
91 a47eb4c Dawsh 2y ago </Button>
92 a47eb4c Dawsh 2y ago <Button
93 a47eb4c Dawsh 2y ago size="sm"
94 a47eb4c Dawsh 2y ago w="full"
95 a47eb4c Dawsh 2y ago colorScheme="red"
96 a47eb4c Dawsh 2y ago onClick={onReset}
97 a47eb4c Dawsh 2y ago leftIcon={loading ? <Spinner size="xs" /> : undefined}
98 a47eb4c Dawsh 2y ago >
99 bf7c131 Mardin 2y ago {t('reset')}
100 a47eb4c Dawsh 2y ago </Button>
101 a47eb4c Dawsh 2y ago </ModalFooter>
102 a47eb4c Dawsh 2y ago </ModalContent>
103 a47eb4c Dawsh 2y ago </Modal>
104 a47eb4c Dawsh 2y ago );
105 a47eb4c Dawsh 2y ago };