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 && (
-