Move loading button logic out.

components/pages/settings/teams/TeamMemberRemoveButton.js

@@ -0,0 +1,29 @@
+import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
+import { Icon, Icons, LoadingButton, Text } from 'react-basics';
+
+export default function TeamMemberRemoveButton({ teamUserId, disabled, onSave }) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isLoading } = useMutation(() => del(`/teamUsers/${teamUserId}`));
+
+  const handleRemoveTeamMember = () => {
+    mutate(
+      { teamUserId },
+      {
+        onSuccess: () => {
+          onSave();
+        },
+      },
+    );
+  };
+
+  return (
+    <LoadingButton onClick={() => handleRemoveTeamMember()} disabled={disabled} loading={isLoading}>
+      <Icon>
+        <Icons.Close />
+      </Icon>
+      <Text>{formatMessage(labels.remove)}</Text>
+    </LoadingButton>
+  );
+}

components/pages/settings/teams/TeamMembersTable.js

@@ -1,28 +1,20 @@
+import useMessages from 'hooks/useMessages';
+import useUser from 'hooks/useUser';
+import { ROLES } from 'lib/constants';
 import {
+  Flexbox,
   Table,
-  TableHeader,
   TableBody,
-  TableRow,
   TableCell,
   TableColumn,
-  LoadingButton,
+  TableHeader,
-  Icon,
+  TableRow,
-  Icons,
-  Flexbox,
-  Text,
 } from 'react-basics';
-import { ROLES } from 'lib/constants';
+import TeamMemberRemoveButton from './TeamMemberRemoveButton';
-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 } },
@@ -30,23 +22,6 @@ export default function TeamMembersTable({ data = [], onSave, readOnly }) {
     { 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 (
     <Table columns={columns} rows={data}>
       <TableHeader>
@@ -67,16 +42,11 @@ export default function TeamMembersTable({ data = [], onSave, readOnly }) {
             ),
             action: !readOnly && (
               <Flexbox flex={1} justifyContent="end">
-                <LoadingButton
+                <TeamMemberRemoveButton
-                  onClick={() => handleRemoveTeamMember(row.id)}
+                  teamUserId={row.id}
                   disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
-                  loading={isLoading && loadingIds.some(a => a === row.id)}
+                  onSave={onSave}
-                >
+                ></TeamMemberRemoveButton>
-                  <Icon>
-                    <Icons.Close />
-                  </Icon>
-                  <Text>{formatMessage(labels.remove)}</Text>
-                </LoadingButton>
               </Flexbox>
             ),
           };

components/pages/settings/teams/TeamWebsiteRemoveButton.js

@@ -0,0 +1,29 @@
+import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
+import { Icon, Icons, LoadingButton, Text } from 'react-basics';
+
+export default function TeamWebsiteRemoveButton({ teamWebsiteId, onSave }) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isLoading } = useMutation(() => del(`/teamWebsites/${teamWebsiteId}`));
+
+  const handleRemoveTeamMember = () => {
+    mutate(
+      { teamWebsiteId },
+      {
+        onSuccess: () => {
+          onSave();
+        },
+      },
+    );
+  };
+
+  return (
+    <LoadingButton onClick={() => handleRemoveTeamMember()} loading={isLoading}>
+      <Icon>
+        <Icons.Close />
+      </Icon>
+      <Text>{formatMessage(labels.remove)}</Text>
+    </LoadingButton>
+  );
+}

components/pages/settings/teams/TeamWebsitesTable.js

@@ -1,44 +1,30 @@
+import useMessages from 'hooks/useMessages';
+import useUser from 'hooks/useUser';
 import Link from 'next/link';
 import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableRow,
-  TableCell,
-  TableColumn,
   Button,
-  Text,
+  Flexbox,
   Icon,
   Icons,
-  Flexbox,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Text,
 } from 'react-basics';
-import useUser from 'hooks/useUser';
+import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
-import useApi from 'hooks/useApi';
-import useMessages from 'hooks/useMessages';
 
 export default function TeamWebsitesTable({ data = [], onSave }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
-  const { del, useMutation } = useApi();
-  const { mutate } = useMutation(({ teamWebsiteId }) => del(`/teamWebsites/${teamWebsiteId}`));
-
   const columns = [
     { name: 'name', label: formatMessage(labels.name) },
     { name: 'domain', label: formatMessage(labels.domain) },
     { name: 'action', label: ' ' },
   ];
 
-  const handleRemoveWebsite = teamWebsiteId => {
-    mutate(
-      { teamWebsiteId },
-      {
-        onSuccess: async () => {
-          onSave();
-        },
-      },
-    );
-  };
-
   return (
     <Table columns={columns} rows={data}>
       <TableHeader>
@@ -72,12 +58,10 @@ export default function TeamWebsitesTable({ data = [], onSave }) {
                 </Button>
               </Link>
               {canRemove && (
-                <Button onClick={() => handleRemoveWebsite(teamWebsiteId)}>
+                <TeamWebsiteRemoveButton
-                  <Icon>
+                  teamWebsiteId={teamWebsiteId}
-                    <Icons.Trash />
+                  onSave={onSave}
-                  </Icon>
+                ></TeamWebsiteRemoveButton>
-                  <Text>{formatMessage(labels.remove)}</Text>
-                </Button>
               )}
             </Flexbox>
           );