Refactored intl messages.

components/pages/settings/users/UsersTable.js

@@ -8,26 +8,38 @@ import {
   TableColumn,
   TableHeader,
   TableRow,
+  Flexbox,
+  Icons,
+  ModalTrigger,
 } from 'react-basics';
+import { useIntl } from 'react-intl';
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { Edit } from 'components/icons';
-import styles from './UsersTable.module.css';
+import useUser from 'hooks/useUser';
+import UserDeleteForm from './UserDeleteForm';
+import { labels } from 'components/messages';
+import { ROLES } from 'lib/constants';
 
-const columns = [
-  { name: 'username', label: 'Username', style: { flex: 2 } },
-  { name: 'role', label: 'Role', style: { flex: 2 } },
-  { name: 'created', label: 'Created' },
-  { name: 'action', label: ' ' },
-];
+const { Trash } = Icons;
+
+export default function UsersTable({ data = [], onDelete }) {
+  const { formatMessage } = useIntl();
+  const { user } = useUser();
+
+  const columns = [
+    { name: 'username', label: formatMessage(labels.username), style: { flex: 2 } },
+    { name: 'role', label: formatMessage(labels.role), style: { flex: 1 } },
+    { name: 'created', label: formatMessage(labels.created), style: { flex: 1 } },
+    { name: 'action', label: ' ', style: { flex: 2 } },
+  ];
 
-export default function UsersTable({ data = [] }) {
   return (
-    <Table className={styles.table} columns={columns} rows={data}>
+    <Table columns={columns} rows={data}>
       <TableHeader>
         {(column, index) => {
           return (
-            <TableColumn key={index} className={styles.header} style={{ ...column.style }}>
+            <TableColumn key={index} style={{ ...column.style }}>
               {column.label}
             </TableColumn>
           );
@@ -35,33 +47,57 @@ export default function UsersTable({ data = [] }) {
       </TableHeader>
       <TableBody>
         {(row, keys, rowIndex) => {
-          row.created = formatDistance(new Date(row.createdAt), new Date(), {
-            addSuffix: true,
-          });
-
-          row.action = (
-            <div className={styles.actions}>
-              <Link href={`/settings/users/${row.id}`}>
-                <Button>
-                  <Icon>
-                    <Edit />
-                  </Icon>
-                  <Text>Edit</Text>
-                </Button>
-              </Link>
-            </div>
-          );
+          const rowData = {
+            ...row,
+            created: formatDistance(new Date(row.createdAt), new Date(), {
+              addSuffix: true,
+            }),
+            role: formatMessage(
+              labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
+            ),
+            action: (
+              <>
+                <Link href={`/settings/users/${row.id}`}>
+                  <Button>
+                    <Icon>
+                      <Edit />
+                    </Icon>
+                    <Text>{formatMessage(labels.edit)}</Text>
+                  </Button>
+                </Link>
+                <ModalTrigger disabled={row.id === user.id}>
+                  <Button disabled={row.id === user.id}>
+                    <Icon>
+                      <Trash />
+                    </Icon>
+                    <Text>{formatMessage(labels.delete)}</Text>
+                  </Button>
+                  {close => (
+                    <UserDeleteForm
+                      userId={row.id}
+                      username={row.username}
+                      onSave={onDelete}
+                      onClose={close}
+                    />
+                  )}
+                </ModalTrigger>
+              </>
+            ),
+          };
 
           return (
-            <TableRow key={rowIndex} data={row} keys={keys}>
+            <TableRow key={rowIndex} data={rowData} keys={keys}>
               {(data, key, colIndex) => {
                 return (
-                  <TableCell
-                    key={colIndex}
-                    className={styles.cell}
-                    style={{ ...columns[colIndex]?.style }}
-                  >
-                    {data[key]}
+                  <TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
+                    <Flexbox
+                      flex={1}
+                      gap={10}
+                      alignItems="center"
+                      justifyContent={key === 'action' ? 'end' : undefined}
+                    >
+                      {data[key]}
+                    </Flexbox>
                   </TableCell>
                 );
               }}