gitscope
/
← marzneshin / app/dashboard/src/pages/users/modals/reset-user-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-user-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 { ArrowPathIcon } from '@heroicons/react/24/outline';
17 bedeeff Mardin 2y ago import { Icon } from 'components/icon';
18 bf7c131 Mardin 2y ago import { useTranslation, Trans } from 'react-i18next';
19 89f8f93 Mardin 2y ago import { useUsers } from 'stores';
20 a47eb4c Dawsh 2y ago
21 bedeeff Mardin 2y ago const ResetIcon = chakra(ArrowPathIcon, {
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 ResetUserUsageModal: FC<DeleteUserModalProps> = () => {
31 a47eb4c Dawsh 2y ago const [loading, setLoading] = useState(false);
32 4205669 Mardin 2y ago const { resetUsageUser: user, resetDataUsage } = 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 4205669 Mardin 2y ago useUsers.setState({ resetUsageUser: null });
37 a47eb4c Dawsh 2y ago };
38 a47eb4c Dawsh 2y ago const onReset = () => {
39 a47eb4c Dawsh 2y ago if (user) {
40 a47eb4c Dawsh 2y ago setLoading(true);
41 a47eb4c Dawsh 2y ago resetDataUsage(user)
42 a47eb4c Dawsh 2y ago .then(() => {
43 a47eb4c Dawsh 2y ago toast({
44 bf7c131 Mardin 2y ago title: t('resetUserUsage.success', { username: user.username }),
45 bf7c131 Mardin 2y ago status: 'success',
46 a47eb4c Dawsh 2y ago isClosable: true,
47 bf7c131 Mardin 2y ago position: 'top',
48 a47eb4c Dawsh 2y ago duration: 3000,
49 a47eb4c Dawsh 2y ago });
50 a47eb4c Dawsh 2y ago })
51 a47eb4c Dawsh 2y ago .catch(() => {
52 a47eb4c Dawsh 2y ago toast({
53 bf7c131 Mardin 2y ago title: t('resetUserUsage.error'),
54 bf7c131 Mardin 2y ago status: 'error',
55 a47eb4c Dawsh 2y ago isClosable: true,
56 bf7c131 Mardin 2y ago position: 'top',
57 a47eb4c Dawsh 2y ago duration: 3000,
58 a47eb4c Dawsh 2y ago });
59 a47eb4c Dawsh 2y ago })
60 a47eb4c Dawsh 2y ago .finally(() => {
61 a47eb4c Dawsh 2y ago setLoading(false);
62 a47eb4c Dawsh 2y ago });
63 a47eb4c Dawsh 2y ago }
64 a47eb4c Dawsh 2y ago };
65 a47eb4c Dawsh 2y ago return (
66 a47eb4c Dawsh 2y ago <Modal isCentered isOpen={!!user} onClose={onClose} size="sm">
67 a47eb4c Dawsh 2y ago <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
68 a47eb4c Dawsh 2y ago <ModalContent mx="3">
69 a47eb4c Dawsh 2y ago <ModalHeader pt={6}>
70 a47eb4c Dawsh 2y ago <Icon color="blue">
71 a47eb4c Dawsh 2y ago <ResetIcon />
72 a47eb4c Dawsh 2y ago </Icon>
73 a47eb4c Dawsh 2y ago </ModalHeader>
74 a47eb4c Dawsh 2y ago <ModalCloseButton mt={3} />
75 a47eb4c Dawsh 2y ago <ModalBody>
76 a47eb4c Dawsh 2y ago <Text fontWeight="semibold" fontSize="lg">
77 bf7c131 Mardin 2y ago {t('resetUserUsage.title')}
78 a47eb4c Dawsh 2y ago </Text>
79 a47eb4c Dawsh 2y ago {user && (
80 a47eb4c Dawsh 2y ago <Text
81 a47eb4c Dawsh 2y ago mt={1}
82 a47eb4c Dawsh 2y ago fontSize="sm"
83 bf7c131 Mardin 2y ago _dark={{ color: 'gray.400' }}
84 a47eb4c Dawsh 2y ago color="gray.600"
85 a47eb4c Dawsh 2y ago >
86 a47eb4c Dawsh 2y ago <Trans
87 bf7c131 Mardin 2y ago components={{ b: <b /> }}>
88 bf7c131 Mardin 2y ago {t('resetUserUsage.prompt', { username: user.username })}
89 a47eb4c Dawsh 2y ago </Trans>
90 a47eb4c Dawsh 2y ago </Text>
91 a47eb4c Dawsh 2y ago )}
92 a47eb4c Dawsh 2y ago </ModalBody>
93 a47eb4c Dawsh 2y ago <ModalFooter display="flex">
94 a47eb4c Dawsh 2y ago <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
95 bf7c131 Mardin 2y ago {t('cancel')}
96 a47eb4c Dawsh 2y ago </Button>
97 a47eb4c Dawsh 2y ago <Button
98 a47eb4c Dawsh 2y ago size="sm"
99 a47eb4c Dawsh 2y ago w="full"
100 a47eb4c Dawsh 2y ago colorScheme="blue"
101 a47eb4c Dawsh 2y ago onClick={onReset}
102 a47eb4c Dawsh 2y ago leftIcon={loading ? <Spinner size="xs" /> : undefined}
103 a47eb4c Dawsh 2y ago >
104 bf7c131 Mardin 2y ago {t('reset')}
105 a47eb4c Dawsh 2y ago </Button>
106 a47eb4c Dawsh 2y ago </ModalFooter>
107 a47eb4c Dawsh 2y ago </ModalContent>
108 a47eb4c Dawsh 2y ago </Modal>
109 a47eb4c Dawsh 2y ago );
110 a47eb4c Dawsh 2y ago };