Refactored settings components.

components/pages/settings/teams/TeamAddForm.js

@@ -0,0 +1,35 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, TextField, Button } from 'react-basics';
+import useApi from 'hooks/useApi';
+
+export default function TeamAddForm({ onSave, onClose }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      <FormRow label="Name">
+        <FormInput name="name" rules={{ required: 'Required' }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <Button type="submit" variant="primary" disabled={isLoading}>
+          Save
+        </Button>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/teams/TeamDetails.js

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
+import useApi from 'hooks/useApi';
+import Link from 'next/link';
+import Page from 'components/layout/Page';
+import TeamEditForm from 'components/pages/settings/teams/TeamEditForm';
+import PageHeader from 'components/layout/PageHeader';
+import TeamMembers from 'components/pages/settings/teams/TeamMembers';
+
+export default function TeamDetails({ teamId }) {
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('details');
+  const { get, useQuery } = useApi();
+  const { toast, showToast } = useToast();
+  const { data, isLoading } = useQuery(
+    ['team', teamId],
+    () => {
+      if (teamId) {
+        return get(`/teams/${teamId}`);
+      }
+    },
+    { cacheTime: 0 },
+  );
+
+  const handleSave = data => {
+    showToast({ message: 'Saved successfully.', variant: 'success' });
+    setValues(state => ({ ...state, ...data }));
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  return (
+    <Page loading={isLoading || !values}>
+      {toast}
+      <PageHeader>
+        <Breadcrumbs>
+          <Item>
+            <Link href="/settings/teams">Teams</Link>
+          </Item>
+          <Item>{values?.name}</Item>
+        </Breadcrumbs>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+        <Item key="details">Details</Item>
+        <Item key="members">Members</Item>
+        <Item key="websites">Websites</Item>
+      </Tabs>
+      {tab === 'details' && <TeamEditForm teamId={teamId} data={values} onSave={handleSave} />}
+      {tab === 'members' && <TeamMembers teamId={teamId} />}
+    </Page>
+  );
+}

components/pages/settings/teams/TeamEditForm.js

@@ -0,0 +1,62 @@
+import {
+  SubmitButton,
+  Form,
+  FormInput,
+  FormRow,
+  FormButtons,
+  TextField,
+  Button,
+  Flexbox,
+} from 'react-basics';
+import { getRandomChars } from 'next-basics';
+import { useRef, useState } from 'react';
+import useApi from 'hooks/useApi';
+
+const generateId = () => getRandomChars(16);
+
+export default function TeamEditForm({ teamId, data, onSave }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
+  const ref = useRef(null);
+  const [accessCode, setAccessCode] = useState(data.accessCode);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        ref.current.reset(data);
+        onSave(data);
+      },
+    });
+  };
+
+  const handleRegenerate = () => {
+    const code = generateId();
+    ref.current.setValue('accessCode', code, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setAccessCode(code);
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+      <FormRow label="Team ID">
+        <TextField value={teamId} readOnly allowCopy />
+      </FormRow>
+      <FormRow label="Name">
+        <FormInput name="name" rules={{ required: 'Required' }}>
+          <TextField />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Access code">
+        <Flexbox gap={10}>
+          <TextField value={accessCode} readOnly allowCopy />
+          <Button onClick={handleRegenerate}>Regenerate</Button>
+        </Flexbox>
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary">Save</SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/teams/TeamMembers.js

@@ -0,0 +1,16 @@
+import { Loading } from 'react-basics';
+import useApi from 'hooks/useApi';
+import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
+
+export default function TeamMembers({ teamId }) {
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['team-members', teamId], () =>
+    get(`/teams/${teamId}/users`),
+  );
+
+  if (isLoading) {
+    return <Loading icon="dots" position="block" />;
+  }
+
+  return <TeamMembersTable data={data} />;
+}

components/pages/settings/teams/TeamMembersTable.js

@@ -0,0 +1,61 @@
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumn,
+  Button,
+  Icon,
+} from 'react-basics';
+import styles from './TeamsTable.module.css';
+
+const columns = [
+  { name: 'username', label: 'Username', style: { flex: 4 } },
+  { name: 'role', label: 'Role' },
+  { name: 'action', label: '' },
+];
+
+export default function TeamMembersTable({ data = [] }) {
+  return (
+    <Table className={styles.table} columns={columns} rows={data}>
+      <TableHeader>
+        {(column, index) => {
+          return (
+            <TableColumn key={index} style={{ ...column.style }}>
+              {column.label}
+            </TableColumn>
+          );
+        }}
+      </TableHeader>
+      <TableBody>
+        {(row, keys, rowIndex) => {
+          row.action = (
+            <div className={styles.actions}>
+              <Button>
+                <Icon icon="cross" />
+                Remove
+              </Button>
+            </div>
+          );
+
+          return (
+            <TableRow key={rowIndex} data={row} keys={keys}>
+              {(data, key, colIndex) => {
+                return (
+                  <TableCell
+                    key={colIndex}
+                    className={styles.cell}
+                    style={{ ...columns[colIndex]?.style }}
+                  >
+                    {data[key] ?? data?.user?.[key]}
+                  </TableCell>
+                );
+              }}
+            </TableRow>
+          );
+        }}
+      </TableBody>
+    </Table>
+  );
+}

components/pages/settings/teams/TeamsList.js

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { Button, Icon, Modal, useToast } from 'react-basics';
+import useApi from 'hooks/useApi';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
+import PageHeader from 'components/layout/PageHeader';
+import TeamsTable from 'components/pages/settings/teams/TeamsTable';
+import Page from 'components/layout/Page';
+
+export default function TeamsList() {
+  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: 'Team saved.', variant: 'success' });
+  };
+
+  const handleClose = () => {
+    setEdit(false);
+  };
+
+  return (
+    <Page loading={isLoading} error={error}>
+      {toast}
+      <PageHeader title="Teams">
+        <Button onClick={handleAdd}>
+          <Icon icon="plus" /> Create team
+        </Button>
+      </PageHeader>
+      {hasData && <TeamsTable data={data} />}
+      {!hasData && (
+        <EmptyPlaceholder message="You don't have any teams configured.">
+          <Button variant="primary" onClick={handleAdd}>
+            <Icon icon="plus" /> Create team
+          </Button>
+        </EmptyPlaceholder>
+      )}
+      {edit && (
+        <Modal title="Create team" onClose={handleClose}>
+          {close => <TeamAddForm onSave={handleSave} onClose={close} />}
+        </Modal>
+      )}
+    </Page>
+  );
+}

components/pages/settings/teams/TeamsTable.js

@@ -0,0 +1,67 @@
+import Link from 'next/link';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumn,
+  Button,
+  Icon,
+} from 'react-basics';
+import styles from './TeamsTable.module.css';
+
+const columns = [
+  { name: 'name', label: 'Name', style: { flex: 2 } },
+  { name: 'action', label: ' ' },
+];
+
+export default function TeamsTable({ data = [] }) {
+  return (
+    <Table className={styles.table} columns={columns} rows={data}>
+      <TableHeader>
+        {(column, index) => {
+          return (
+            <TableColumn key={index} style={{ ...column.style }}>
+              {column.label}
+            </TableColumn>
+          );
+        }}
+      </TableHeader>
+      <TableBody>
+        {(row, keys, rowIndex) => {
+          const { id } = row;
+
+          row.action = (
+            <div className={styles.actions}>
+              <Link href={`/settings/teams/${id}`}>
+                <a>
+                  <Button>
+                    <Icon icon="arrow-right" />
+                    Settings
+                  </Button>
+                </a>
+              </Link>
+            </div>
+          );
+
+          return (
+            <TableRow key={rowIndex} data={row} keys={keys}>
+              {(data, key, colIndex) => {
+                return (
+                  <TableCell
+                    key={colIndex}
+                    className={styles.cell}
+                    style={{ ...columns[colIndex]?.style }}
+                  >
+                    {data[key]}
+                  </TableCell>
+                );
+              }}
+            </TableRow>
+          );
+        }}
+      </TableBody>
+    </Table>
+  );
+}

components/pages/settings/teams/TeamsTable.module.css

@@ -0,0 +1,18 @@
+.table th,
+.table td {
+  flex: 2;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+}
+
+.cell:last-child {
+  justify-content: flex-end;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}