import React, { useContext, useEffect } from 'react'; import AdminCheckbox from '@/components/admin/AdminCheckbox'; import CopyOnClick from '@/components/elements/CopyOnClick'; import getUsers, { Context as UsersContext, Filters } from '@/api/admin/users/getUsers'; import AdminTable, { TableBody, TableHead, TableHeader, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable'; import Button from '@/components/elements/Button'; import FlashMessageRender from '@/components/FlashMessageRender'; import useFlash from '@/plugins/useFlash'; import { AdminContext } from '@/state/admin'; import { NavLink, useRouteMatch } from 'react-router-dom'; import tw from 'twin.macro'; import AdminContentBlock from '@/components/admin/AdminContentBlock'; const RowCheckbox = ({ id }: { id: number }) => { const isChecked = AdminContext.useStoreState(state => state.users.selectedUsers.indexOf(id) >= 0); const appendSelectedUser = AdminContext.useStoreActions(actions => actions.users.appendSelectedUser); const removeSelectedUser = AdminContext.useStoreActions(actions => actions.users.removeSelectedUser); return ( ) => { if (e.currentTarget.checked) { appendSelectedUser(id); } else { removeSelectedUser(id); } }} /> ); }; const UsersContainer = () => { const match = useRouteMatch(); const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(UsersContext); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { data: users, error, isValidating } = getUsers(); useEffect(() => { if (!error) { clearFlashes('users'); return; } clearAndAddHttpError({ key: 'users', error }); }, [ error ]); const length = users?.items?.length || 0; const setSelectedUsers = AdminContext.useStoreActions(actions => actions.users.setSelectedUsers); const selectedUserLength = AdminContext.useStoreState(state => state.users.selectedUsers.length); const onSelectAllClick = (e: React.ChangeEvent) => { setSelectedUsers(e.currentTarget.checked ? (users?.items?.map(user => user.id) || []) : []); }; const onSearch = (query: string): Promise => { return new Promise((resolve) => { if (query.length < 2) { setFilters(null); } else { setFilters({ username: query }); } return resolve(); }); }; useEffect(() => { setSelectedUsers([]); }, [ page ]); return (

Users

All registered users on the system.

setSort('id')}/> setSort('email')}/> setSort('username')}/> setSort('admin_role_id')}/> { users !== undefined && !error && !isValidating && length > 0 && users.items.map(user => ( )) }
{user.id}
{user.firstName} {user.lastName}
{user.email}
{user.username} Active {user.roleName || 'None'}
{ users === undefined || (error && isValidating) ? : length < 1 ? : null }
); }; export default () => { const hooks = useTableHooks(); return ( ); };