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