diff --git a/components/pages/settings/teams/TeamMembers.js b/components/pages/settings/teams/TeamMembers.js index 73926385..8873a4d3 100644 --- a/components/pages/settings/teams/TeamMembers.js +++ b/components/pages/settings/teams/TeamMembers.js @@ -1,10 +1,14 @@ -import { Loading } from 'react-basics'; -import useApi from 'hooks/useApi'; +import { messages } from 'components/messages'; import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable'; +import useApi from 'hooks/useApi'; +import { Loading, useToast } from 'react-basics'; +import { useIntl } from 'react-intl'; export default function TeamMembers({ teamId, readOnly }) { + const { toast, showToast } = useToast(); const { get, useQuery } = useApi(); - const { data, isLoading } = useQuery(['teams:users', teamId], () => + const { formatMessage } = useIntl(); + const { data, isLoading, refetch } = useQuery(['teams:users', teamId], () => get(`/teams/${teamId}/users`), ); @@ -12,5 +16,15 @@ export default function TeamMembers({ teamId, readOnly }) { return ; } - return ; + const handleSave = async () => { + await refetch(); + showToast({ message: formatMessage(messages.saved), variant: 'success' }); + }; + + return ( + <> + {toast} + + + ); } diff --git a/components/pages/settings/teams/TeamMembersTable.js b/components/pages/settings/teams/TeamMembersTable.js index 7d66dfa6..f0369f06 100644 --- a/components/pages/settings/teams/TeamMembersTable.js +++ b/components/pages/settings/teams/TeamMembersTable.js @@ -15,10 +15,13 @@ import { useIntl } from 'react-intl'; import { ROLES } from 'lib/constants'; import { labels } from 'components/messages'; import useUser from 'hooks/useUser'; +import useApi from 'hooks/useApi'; -export default function TeamMembersTable({ data = [], readOnly }) { +export default function TeamMembersTable({ data = [], onSave, readOnly }) { const { formatMessage } = useIntl(); const { user } = useUser(); + const { del, useMutation } = useApi(); + const { mutate } = useMutation(data => del(`/teamUsers/${data.teamUserId}`)); const columns = [ { name: 'username', label: formatMessage(labels.username), style: { flex: 2 } }, @@ -26,6 +29,17 @@ export default function TeamMembersTable({ data = [], readOnly }) { { name: 'action', label: '', style: { flex: 1 } }, ]; + const handleRemoveTeamMember = teamUserId => { + mutate( + { teamUserId }, + { + onSuccess: async () => { + onSave(); + }, + }, + ); + }; + return ( @@ -46,7 +60,10 @@ export default function TeamMembersTable({ data = [], readOnly }) { ), action: !readOnly && ( -