Rewrite admin. (#1713)

* Rewrite admin.

* Clean up password forms.

* Fix naming issues.

* CSS Naming.

components/tables/UsersTable.js

@@ -0,0 +1,100 @@
+import { useQuery } from '@tanstack/react-query';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import { formatDistance } from 'date-fns';
+import { getAuthToken } from 'lib/client';
+import { useApi } from 'next-basics';
+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(getAuthToken());
+  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>
+      )}
+    </>
+  );
+}