Updated add team website form.

src/app/(main)/settings/teams/TeamsDataTable.js

@@ -4,16 +4,21 @@ import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
 import useApi from 'components/hooks/useApi';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 
-export function TeamsList() {
+export function TeamsDataTable() {
   const { get } = useApi();
-  const filterQuery = useFilterQuery(['teams'], params => {
+  const queryResult = useFilterQuery(['teams'], params => {
     return get(`/teams`, {
       ...params,
     });
   });
-  const { getProps } = filterQuery;
 
-  return <DataTable {...getProps()}>{({ data }) => <TeamsTable data={data} />}</DataTable>;
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => {
+        return <TeamsTable data={data} />;
+      }}
+    </DataTable>
+  );
 }
 
-export default TeamsList;
+export default TeamsDataTable;

src/app/(main)/settings/teams/[id]/TeamAddWebsiteForm.js

@@ -1,22 +1,20 @@
 import useApi from 'components/hooks/useApi';
-import { useRef, useState } from 'react';
-import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from 'react-basics';
-import WebsiteTags from '../WebsiteTags';
+import { useState } from 'react';
+import { Button, Form, FormButtons, GridColumn, Loading, SubmitButton, Toggle } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
+import WebsitesDataTable from '../../websites/WebsitesDataTable';
 
 export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
   const { formatMessage, labels } = useMessages();
   const { get, post, useQuery, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
   const { data: websites } = useQuery(['websites'], () => get('/websites'));
-  const [newWebsites, setNewWebsites] = useState([]);
-  const formRef = useRef();
-
+  const [selected, setSelected] = useState([]);
   const hasData = websites && websites.data.length > 0;
 
   const handleSubmit = () => {
     mutate(
-      { websiteIds: newWebsites },
+      { websiteIds: selected },
       {
         onSuccess: async () => {
           onSave();
@@ -26,34 +24,29 @@ export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
     );
   };
 
-  const handleAddWebsite = value => {
-    if (!newWebsites.some(a => a === value)) {
-      const nextValue = [...newWebsites];
-
-      nextValue.push(value);
-
-      setNewWebsites(nextValue);
-    }
-  };
-
-  const handleRemoveWebsite = value => {
-    const newValue = newWebsites.filter(a => a !== value);
-
-    setNewWebsites(newValue);
+  const handleSelect = id => {
+    setSelected(state => (state.includes(id) ? state.filter(n => n !== id) : state.concat(id)));
   };
 
   return (
     <>
+      {!hasData && <Loading />}
       {hasData && (
-        <Form onSubmit={handleSubmit} error={error} ref={formRef}>
-          <FormRow label={formatMessage(labels.websites)}>
-            <Dropdown items={websites.data} onChange={handleAddWebsite} style={{ width: 300 }}>
-              {({ id, name }) => <Item key={id}>{name}</Item>}
-            </Dropdown>
-          </FormRow>
-          <WebsiteTags items={websites.data} websites={newWebsites} onClick={handleRemoveWebsite} />
+        <Form onSubmit={handleSubmit} error={error}>
+          <WebsitesDataTable showHeader={false} showActions={false}>
+            <GridColumn name="select" label={formatMessage(labels.selectWebsite)} alignment="end">
+              {row => (
+                <Toggle
+                  key={row.id}
+                  value={row.id}
+                  checked={selected?.includes(row.id)}
+                  onChange={handleSelect.bind(null, row.id)}
+                />
+              )}
+            </GridColumn>
+          </WebsitesDataTable>
           <FormButtons flex>
-            <SubmitButton disabled={newWebsites && newWebsites.length === 0}>
+            <SubmitButton disabled={selected?.length === 0}>
               {formatMessage(labels.addWebsite)}
             </SubmitButton>
             <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>

src/app/(main)/settings/teams/[id]/TeamMembers.js

@@ -5,7 +5,7 @@ import DataTable from 'components/common/DataTable';
 
 export function TeamMembers({ teamId, readOnly }) {
   const { get } = useApi();
-  const { getProps } = useFilterQuery(
+  const queryResult = useFilterQuery(
     ['team:users', teamId],
     params => {
       return get(`/teams/${teamId}/users`, {
@@ -17,7 +17,7 @@ export function TeamMembers({ teamId, readOnly }) {
 
   return (
     <>
-      <DataTable {...getProps()}>
+      <DataTable queryResult={queryResult}>
         {({ data }) => <TeamMembersTable data={data} readOnly={readOnly} />}
       </DataTable>
     </>

src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.js

@@ -19,7 +19,7 @@ export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
   };
 
   return (
-    <LoadingButton onClick={() => handleRemoveTeamMember()} isLoading={isLoading}>
+    <LoadingButton variant="quiet" onClick={() => handleRemoveTeamMember()} isLoading={isLoading}>
       <Icon>
         <Icons.Close />
       </Icon>

src/app/(main)/settings/teams/[id]/TeamWebsites.js

@@ -11,7 +11,7 @@ export function TeamWebsites({ teamId }) {
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const { get } = useApi();
-  const { getProps, refetch } = useFilterQuery(
+  const queryResult = useFilterQuery(
     ['team:websites', teamId],
     params => {
       return get(`/teams/${teamId}/websites`, {
@@ -21,8 +21,8 @@ export function TeamWebsites({ teamId }) {
     { enabled: !!user },
   );
 
-  const handleWebsiteAdd = () => {
-    refetch();
+  const handleChange = () => {
+    queryResult.refetch();
   };
 
   return (
@@ -36,13 +36,13 @@ export function TeamWebsites({ teamId }) {
             <Text>{formatMessage(labels.addWebsite)}</Text>
           </Button>
           <Modal title={formatMessage(labels.addWebsite)}>
-            {close => (
-              <TeamAddWebsiteForm teamId={teamId} onSave={handleWebsiteAdd} onClose={close} />
-            )}
+            {close => <TeamAddWebsiteForm teamId={teamId} onSave={handleChange} onClose={close} />}
           </Modal>
         </ModalTrigger>
       </ActionForm>
-      <DataTable {...getProps()}>{({ data }) => <TeamWebsitesTable data={data} />}</DataTable>
+      <DataTable queryResult={queryResult}>
+        {({ data }) => <TeamWebsitesTable data={data} onRemove={handleChange} />}
+      </DataTable>
     </>
   );
 }

src/app/(main)/settings/teams/[id]/TeamWebsitesTable.js

@@ -1,10 +1,10 @@
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
 import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
-import TeamWebsiteRemoveButton from '../TeamWebsiteRemoveButton';
+import useMessages from 'components/hooks/useMessages';
+import useUser from 'components/hooks/useUser';
+import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
 
-export function TeamWebsitesTable({ data = [], onSave }) {
+export function TeamWebsitesTable({ data = [], onRemove }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
@@ -20,6 +20,9 @@ export function TeamWebsitesTable({ data = [], onSave }) {
           const canRemove = user.id === userId || user.id === owner.userId;
           return (
             <>
+              {canRemove && (
+                <TeamWebsiteRemoveButton teamId={teamId} websiteId={websiteId} onSave={onRemove} />
+              )}
               <Link href={`/websites/${websiteId}`}>
                 <Button>
                   <Icon>
@@ -28,9 +31,6 @@ export function TeamWebsitesTable({ data = [], onSave }) {
                   <Text>{formatMessage(labels.view)}</Text>
                 </Button>
               </Link>
-              {canRemove && (
-                <TeamWebsiteRemoveButton teamId={teamId} websiteId={websiteId} onSave={onSave} />
-              )}
             </>
           );
         }}

src/app/(main)/settings/teams/page.js

@@ -1,4 +1,4 @@
-import TeamsList from 'app/(main)/settings/teams/TeamsList';
+import TeamsDataTable from './TeamsDataTable';
 import TeamsHeader from './TeamsHeader';
 
 export default function () {
@@ -9,7 +9,7 @@ export default function () {
   return (
     <>
       <TeamsHeader />
-      <TeamsList />
+      <TeamsDataTable />
     </>
   );
 }