-
Notifications
You must be signed in to change notification settings - Fork 2k
/
CreateTeam.tsx
126 lines (126 loc) · 3.52 KB
/
CreateTeam.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import {
Button,
Flex,
IconButton,
Image,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalHeader,
ModalOverlay,
Spinner,
useDisclosure,
useToast
} from '@chakra-ui/react';
import CustomInput from './Input';
import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import useSessionStore from '@/stores/session';
import { createRequest } from '@/api/namespace';
import { useCustomToast } from '@/hooks/useCustomToast';
import { ApiResp } from '@/types';
import { useTranslation } from 'react-i18next';
import { AddIcon, GroupAddIcon } from '@sealos/ui';
export default function CreateTeam({ textButton = false }: { textButton?: boolean }) {
const { onOpen, isOpen, onClose } = useDisclosure();
const { t } = useTranslation();
const [teamName, setTeamName] = useState('');
const session = useSessionStore((s) => s.session);
const userId = session.user.userId;
const queryClient = useQueryClient();
const { toast } = useCustomToast({ status: 'error' });
const mutation = useMutation(createRequest, {
mutationKey: [{ teamName, userId }],
onSuccess(data) {
if (data.code === 200) {
queryClient.invalidateQueries({ queryKey: ['teamList'] });
onClose();
}
},
onError(error) {
toast({ title: (error as ApiResp).message });
}
});
const submit = () => {
//!todo
mutation.mutate({ teamName });
};
return (
<>
{textButton ? (
<Button
onClick={() => {
onOpen();
setTeamName('');
}}
variant={'primary'}
leftIcon={<AddIcon boxSize={'20px'} color={'white'} />}
iconSpacing={'8px'}
>
{t('Create Team')}
</Button>
) : (
<IconButton
onClick={() => {
onOpen();
setTeamName('');
}}
variant={'white-bg-icon'}
mr="4px"
p="4px"
aria-label={'create team'}
icon={<AddIcon boxSize={'20px'} color={'brightBlue.600'} />}
/>
)}
<Modal isOpen={isOpen} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent
borderRadius={'4px'}
maxW={'380px'}
bgColor={'#FFF'}
backdropFilter="blur(150px)"
p="24px"
>
<ModalCloseButton right={'24px'} top="24px" p="0" />
<ModalHeader p="0">{t('Create Team')}</ModalHeader>
{mutation.isLoading ? (
<Spinner mx={'auto'} />
) : (
<>
<ModalBody h="100%" w="100%" p="0" mt="22px">
<CustomInput
onChange={(e) => {
e.preventDefault();
setTeamName(e.target.value);
}}
placeholder={t('Name of Team') || ''}
value={teamName}
/>
<Button
w="100%"
variant={'unstyled'}
bg="#24282C"
borderRadius={'4px'}
color="#fff"
py="6px"
px="12px"
mt="24px"
_hover={{
opacity: '0.8'
}}
onClick={(e) => {
e.preventDefault();
submit();
}}
>
{t('Confirm')}
</Button>
</ModalBody>
</>
)}
</ModalContent>
</Modal>
</>
);
}