import { Table, TableHeader, TableBody, TableRow, TableCell, TableColumn, LoadingButton, Icon, Icons, Flexbox, Text, } from 'react-basics'; import { ROLES } from 'lib/constants'; import useUser from 'hooks/useUser'; import useApi from 'hooks/useApi'; import useMessages from 'hooks/useMessages'; import { useState } from 'react'; export default function TeamMembersTable({ data = [], onSave, readOnly }) { const { formatMessage, labels } = useMessages(); const { user } = useUser(); const { del, useMutation } = useApi(); const { mutate, isLoading } = useMutation(data => del(`/teamUsers/${data.teamUserId}`)); const [loadingIds, setLoadingIds] = useState([]); const columns = [ { name: 'username', label: formatMessage(labels.username), style: { flex: 2 } }, { name: 'role', label: formatMessage(labels.role), style: { flex: 1 } }, { name: 'action', label: '', style: { flex: 1 } }, ]; const handleRemoveTeamMember = teamUserId => { setLoadingIds(prev => [...prev, teamUserId]); mutate( { teamUserId }, { onSuccess: () => { setLoadingIds(loadingIds.filter(a => a !== teamUserId)); onSave(); }, onError: () => { setLoadingIds(loadingIds.filter(a => a !== teamUserId)); }, }, ); }; return (