Refactored settings components.

components/pages/settings/users/UserDelete.js

@@ -0,0 +1,30 @@
+import UserDeleteForm from 'components/pages/settings/users/UserDeleteForm';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Button, Form, FormRow, Modal } from 'react-basics';
+
+export default function UserDelete({ userId, onSave }) {
+  const [modal, setModal] = useState(null);
+  const router = useRouter();
+
+  const handleDelete = async () => {
+    onSave();
+    await router.push('/users');
+  };
+
+  const handleClose = () => setModal(null);
+
+  return (
+    <Form>
+      <FormRow label="Delete user">
+        <p>All user data will be deleted.</p>
+        <Button onClick={() => setModal('delete')}>Delete</Button>
+      </FormRow>
+      {modal === 'delete' && (
+        <Modal title="Delete user" onClose={handleClose}>
+          {close => <UserDeleteForm userId={userId} onSave={handleDelete} onClose={close} />}
+        </Modal>
+      )}
+    </Form>
+  );
+}

components/pages/settings/users/UserDeleteForm.js

@@ -0,0 +1,47 @@
+import { useMutation } from '@tanstack/react-query';
+import useApi from 'hooks/useApi';
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+
+const CONFIRM_VALUE = 'DELETE';
+
+export default function UserDeleteForm({ userId, onSave, onClose }) {
+  const { del } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => del(`/users/${userId}`, data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <p>
+        To delete this user, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
+      </p>
+      <FormRow label="Confirm">
+        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          Save
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/users/UserEditForm.js

@@ -0,0 +1,69 @@
+import {
+  Dropdown,
+  Item,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  TextField,
+  SubmitButton,
+} from 'react-basics';
+import { useRef } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import useApi from 'hooks/useApi';
+import { ROLES } from 'lib/constants';
+import styles from './UserForm.module.css';
+
+const items = [
+  {
+    value: ROLES.user,
+    label: 'User',
+  },
+  {
+    value: ROLES.admin,
+    label: 'Admin',
+  },
+];
+
+export default function UserEditForm({ data, onSave }) {
+  const { id } = data;
+  const { post } = useApi();
+  const { mutate, error } = useMutation(({ username }) => post(`/user/${id}`, { username }));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+        ref.current.reset(data);
+      },
+    });
+  };
+
+  return (
+    <Form
+      key={id}
+      className={styles.form}
+      ref={ref}
+      onSubmit={handleSubmit}
+      error={error}
+      values={data}
+    >
+      <FormRow label="Username">
+        <FormInput name="username">
+          <TextField />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Role">
+        <FormInput name="role">
+          <Dropdown items={items} style={{ width: 200 }}>
+            {({ value, label }) => <Item key={value}>{label}</Item>}
+          </Dropdown>
+        </FormInput>
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary">Save</SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/users/UserForm.module.css

@@ -0,0 +1,6 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 300px;
+}

components/pages/settings/users/UserPasswordForm.js

@@ -0,0 +1,78 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
+import useApi from 'hooks/useApi';
+import styles from './UserPasswordForm.module.css';
+import useUser from 'hooks/useUser';
+
+export default function UserPasswordForm({ onSave, onClose, userId }) {
+  const user = useUser();
+
+  const isCurrentUser = !userId || user?.id === userId;
+  const url = isCurrentUser ? `/users/${user?.id}/password` : `/users/${user?.id}`;
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post(url, data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    const payload = isCurrentUser
+      ? data
+      : {
+          password: data.newPassword,
+        };
+
+    mutate(payload, {
+      onSuccess: async () => {
+        onSave();
+        ref.current.reset();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return "Passwords don't match";
+    }
+    return true;
+  };
+
+  return (
+    <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
+      {isCurrentUser && (
+        <FormRow label="Current password">
+          <FormInput name="currentPassword" rules={{ required: 'Required' }}>
+            <PasswordField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+      )}
+      <FormRow label="New password">
+        <FormInput
+          name="newPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: 'Minimum length 8 characters' },
+          }}
+        >
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Confirm password">
+        <FormInput
+          name="confirmPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: 'Minimum length 8 characters' },
+            validate: samePassword,
+          }}
+        >
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <Button type="submit" variant="primary" disabled={isLoading}>
+          Save
+        </Button>
+        <Button onClick={onClose}>Close</Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/users/UserPasswordForm.module.css

@@ -0,0 +1,6 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 300px;
+}

components/pages/settings/users/UserSettings.js

@@ -0,0 +1,93 @@
+import { useQuery } from '@tanstack/react-query';
+import UserDelete from 'components/pages/settings/users/UserDelete';
+import UserEditForm from 'components/pages/settings/users/UserEditForm';
+import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import useApi from 'hooks/useApi';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { Breadcrumbs, Item, Icon, Tabs, useToast, Modal, Button } from 'react-basics';
+import Pen from 'assets/pen.svg';
+
+export default function UserSettings({ userId }) {
+  const [edit, setEdit] = useState(false);
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('general');
+  const { get } = useApi();
+  const { toast, showToast } = useToast();
+  const router = useRouter();
+  const { data, isLoading } = useQuery(
+    ['user', userId],
+    () => {
+      if (userId) {
+        return get(`/users/${userId}`);
+      }
+    },
+    { cacheTime: 0 },
+  );
+
+  const handleSave = data => {
+    showToast({ message: 'Saved successfully.', variant: 'success' });
+    if (data) {
+      setValues(state => ({ ...state, ...data }));
+    }
+
+    if (edit) {
+      setEdit(false);
+    }
+  };
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleClose = () => {
+    setEdit(false);
+  };
+
+  const handleDelete = async () => {
+    showToast({ message: 'Deleted successfully.', variant: 'danger' });
+    await router.push('/users');
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  return (
+    <Page loading={isLoading || !values}>
+      {toast}
+      <PageHeader>
+        <Breadcrumbs>
+          <Item>
+            <Link href="/users">Users</Link>
+          </Item>
+          <Item>{values?.username}</Item>
+        </Breadcrumbs>
+        <Button onClick={handleAdd}>
+          <Icon>
+            <Pen />
+          </Icon>
+          Change Password
+        </Button>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+        <Item key="general">General</Item>
+        <Item key="delete">Danger Zone</Item>
+      </Tabs>
+      {tab === 'general' && <UserEditForm userId={userId} data={values} onSave={handleSave} />}
+      {tab === 'delete' && <UserDelete userId={userId} onSave={handleDelete} />}
+      {edit && (
+        <Modal title="Add website" onClose={handleClose}>
+          {close => (
+            <UserPasswordForm userId={userId} data={values} onSave={handleSave} onClose={close} />
+          )}
+        </Modal>
+      )}
+    </Page>
+  );
+}

components/pages/settings/users/UsersList.js

@@ -0,0 +1,44 @@
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import UsersTable from 'components/pages/settings/users/UsersTable';
+import { useState } from 'react';
+import { Button, Icon, useToast } from 'react-basics';
+import { useMutation } from '@tanstack/react-query';
+import useApi from 'hooks/useApi';
+
+export default function UsersList() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const { toast, showToast } = useToast();
+  const { post } = useApi();
+  const { mutate, isLoading } = useMutation(data => post('/api-key', data));
+
+  const handleSave = () => {
+    mutate(
+      {},
+      {
+        onSuccess: async () => {
+          showToast({ message: 'API key saved.', variant: 'success' });
+        },
+      },
+    );
+  };
+
+  return (
+    <Page loading={loading || isLoading} error={error}>
+      {toast}
+      <PageHeader title="Users">
+        <Button onClick={handleSave}>
+          <Icon icon="plus" /> Create user
+        </Button>
+      </PageHeader>
+      <UsersTable
+        onLoading={({ isLoading, error }) => {
+          setLoading(isLoading);
+          setError(error);
+        }}
+        onAddKeyClick={handleSave}
+      />
+    </Page>
+  );
+}

components/pages/settings/users/UsersTable.js

@@ -0,0 +1,99 @@
+import { useQuery } from '@tanstack/react-query';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import { formatDistance } from 'date-fns';
+import useApi from 'hooks/useApi';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  Icon,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from 'react-basics';
+import styles from './UsersTable.module.css';
+
+const defaultColumns = [
+  { name: 'username', label: 'Username', style: { flex: 2 } },
+  { name: 'role', label: 'Role', style: { flex: 2 } },
+  { name: 'created', label: 'Created' },
+  { name: 'action', label: ' ' },
+];
+
+export default function UsersTable({ columns = defaultColumns, onLoading, onAddKeyClick }) {
+  const [values, setValues] = useState(null);
+  const { get } = useApi();
+  const { data, isLoading, error } = useQuery(['user'], () => get(`/users`));
+  const hasData = data && data.length !== 0;
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+      onLoading({ data, isLoading, error });
+    }
+  }, [onLoading, data, isLoading, error]);
+
+  return (
+    <>
+      {hasData && (
+        <Table className={styles.table} columns={columns} rows={values}>
+          <TableHeader>
+            {(column, index) => {
+              return (
+                <TableColumn key={index} className={styles.header} style={{ ...column.style }}>
+                  {column.label}
+                </TableColumn>
+              );
+            }}
+          </TableHeader>
+          <TableBody>
+            {(row, keys, rowIndex) => {
+              row.created = formatDistance(new Date(row.createdAt), new Date(), {
+                addSuffix: true,
+              });
+
+              row.action = (
+                <div className={styles.actions}>
+                  <Link href={`/users/${row.id}`} shallow>
+                    <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>
+      )}
+      {!hasData && (
+        <EmptyPlaceholder className={styles.empty} msg="You don't have any Users.">
+          <Button variant="primary" onClick={onAddKeyClick}>
+            <Icon icon="plus" /> Create User
+          </Button>
+        </EmptyPlaceholder>
+      )}
+    </>
+  );
+}

components/pages/settings/users/UsersTable.module.css

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