import React, { useState } from 'react'; import classNames from 'classnames'; import PageHeader from 'components/layout/PageHeader'; import Button from 'components/common/Button'; import Icon from 'components/common/Icon'; import Table from 'components/common/Table'; import Modal from 'components/common/Modal'; import AccountEditForm from 'components/forms/AccountEditForm'; import ButtonLayout from 'components/layout/ButtonLayout'; import DeleteForm from 'components/forms/DeleteForm'; import useFetch from 'hooks/useFetch'; import Pen from 'assets/pen.svg'; import Plus from 'assets/plus.svg'; import Trash from 'assets/trash.svg'; import Check from 'assets/check.svg'; import styles from './AccountSettings.module.css'; import Toast from '../common/Toast'; export default function AccountSettings() { const [addAccount, setAddAccount] = useState(); const [editAccount, setEditAccount] = useState(); const [deleteAccount, setDeleteAccount] = useState(); const [saved, setSaved] = useState(0); const [message, setMessage] = useState(); const { data } = useFetch(`/api/accounts`, {}, { update: [saved] }); const Checkmark = ({ is_admin }) => (is_admin ? } size="medium" /> : null); const Buttons = row => row.username !== 'admin' ? ( ) : null; const columns = [ { key: 'username', label: 'Username', className: 'col-6 col-md-4' }, { key: 'is_admin', label: 'Administrator', className: 'col-6 col-md-4', render: Checkmark, }, { className: classNames(styles.buttons, 'col-12 col-md-4 pt-2 pt-md-0'), render: Buttons, }, ]; function handleSave() { setSaved(state => state + 1); setMessage('Saved successfully.'); handleClose(); } function handleClose() { setEditAccount(null); setAddAccount(null); setDeleteAccount(null); } if (!data) { return null; } return ( <>
Accounts
{editAccount && ( )} {addAccount && ( )} {deleteAccount && ( )} {message && setMessage(null)} />} ); }