More refactoring, cleaned up icons, nav buttons, add messages.

components/pages/settings/teams/TeamAddForm.js

@@ -22,6 +22,7 @@ export default function TeamAddForm({ onSave, onClose }) {
     mutate(data, {
       onSuccess: async () => {
         onSave();
+        onClose();
       },
     });
   };
@@ -29,7 +30,7 @@ export default function TeamAddForm({ onSave, onClose }) {
   return (
     <Form ref={ref} onSubmit={handleSubmit} error={error}>
       <FormRow label={formatMessage(labels.name)}>
-        <FormInput name="name" rules={{ required: 'Required' }}>
+        <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
           <TextField autoComplete="off" />
         </FormInput>
       </FormRow>

components/pages/settings/teams/TeamEditForm.js

@@ -47,7 +47,7 @@ export default function TeamEditForm({ teamId, data, onSave }) {
         <TextField value={teamId} readOnly allowCopy />
       </FormRow>
       <FormRow label={formatMessage(labels.name)}>
-        <FormInput name="name" rules={{ required: 'Required' }}>
+        <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
           <TextField />
         </FormInput>
       </FormRow>

components/pages/settings/teams/TeamMembersTable.js

@@ -11,11 +11,9 @@ import {
   Flexbox,
   Text,
 } from 'react-basics';
+import { useIntl } from 'react-intl';
 import { ROLES } from 'lib/constants';
 import { labels } from 'components/messages';
-import { useIntl } from 'react-intl';
-
-const { Close } = Icons;
 
 export default function TeamMembersTable({ data = [] }) {
   const { formatMessage } = useIntl();
@@ -48,7 +46,7 @@ export default function TeamMembersTable({ data = [] }) {
               <div>
                 <Button>
                   <Icon>
-                    <Close />
+                    <Icons.Close />
                   </Icon>
                   <Text>{formatMessage(labels.remove)}</Text>
                 </Button>

components/pages/settings/teams/TeamWebsites.js

@@ -7,7 +7,7 @@ import { messages } from 'components/messages';
 export default function TeamWebsites({ teamId }) {
   const { formatMessage } = useIntl();
   const { get, useQuery } = useApi();
-  const { data, isLoading } = useQuery(['team/websites', teamId], () =>
+  const { data, isLoading } = useQuery(['teams/websites', teamId], () =>
     get(`/teams/${teamId}/websites`),
   );
   const hasData = data && data.length !== 0;

components/pages/settings/teams/TeamsList.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, Icon, Modal, useToast, Icons, Text } from 'react-basics';
+import { Button, Icon, Modal, ModalTrigger, useToast, Icons, Text } from 'react-basics';
 import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@@ -9,58 +9,43 @@ import TeamsTable from 'components/pages/settings/teams/TeamsTable';
 import Page from 'components/layout/Page';
 import { labels, messages } from 'components/messages';
 
-const { Plus } = Icons;
-
 export default function TeamsList() {
   const { formatMessage } = useIntl();
-  const [edit, setEdit] = useState(false);
   const [update, setUpdate] = useState(0);
   const { get, useQuery } = useApi();
   const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
   const hasData = data && data.length !== 0;
   const { toast, showToast } = useToast();
 
-  const handleAdd = () => {
-    setEdit(true);
-  };
-
   const handleSave = () => {
-    setEdit(false);
     setUpdate(state => state + 1);
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
   };
 
-  const handleClose = () => {
-    setEdit(false);
-  };
+  const createButton = (
+    <ModalTrigger>
+      <Button variant="primary">
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Text>{formatMessage(labels.createTeam)}</Text>
+      </Button>
+      <Modal title={formatMessage(labels.createTeam)}>
+        {close => <TeamAddForm onSave={handleSave} onClose={close} />}
+      </Modal>
+    </ModalTrigger>
+  );
 
   return (
     <Page loading={isLoading} error={error}>
       {toast}
-      <PageHeader title={formatMessage(labels.team)}>
-        <Button variant="primary" onClick={handleAdd}>
-          <Icon>
-            <Plus />
-          </Icon>
-          <Text>{formatMessage(labels.createTeam)}</Text>
-        </Button>
-      </PageHeader>
+      <PageHeader title={formatMessage(labels.team)}>{createButton}</PageHeader>
       {hasData && <TeamsTable data={data} />}
       {!hasData && (
         <EmptyPlaceholder message={formatMessage(messages.noTeams)}>
-          <Button variant="primary" onClick={handleAdd}>
-            <Icon>
-              <Plus />
-            </Icon>
-            <Text>{formatMessage(labels.createTeam)}</Text>
-          </Button>
+          {createButton}
         </EmptyPlaceholder>
       )}
-      {edit && (
-        <Modal title={formatMessage(labels.createTeam)} onClose={handleClose}>
-          {close => <TeamAddForm onSave={handleSave} onClose={close} />}
-        </Modal>
-      )}
     </Page>
   );
 }

components/pages/settings/teams/TeamsTable.js

@@ -15,8 +15,6 @@ import {
 import { useIntl } from 'react-intl';
 import { labels } from 'components/messages';
 
-const { ArrowRight } = Icons;
-
 export default function TeamsTable({ data = [] }) {
   const { formatMessage } = useIntl();
 
@@ -46,7 +44,7 @@ export default function TeamsTable({ data = [] }) {
                 <a>
                   <Button>
                     <Icon>
-                      <ArrowRight />
+                      <Icons.ArrowRight />
                     </Icon>
                     <Text>{formatMessage(labels.settings)}</Text>
                   </Button>