import React, { useContext, useEffect, useState } from 'react'; import AdminCheckbox from '@/components/admin/AdminCheckbox'; import CopyOnClick from '@/components/elements/CopyOnClick'; import getUsers, { Context as UsersContext } from '@/api/admin/users/getUsers'; import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader } 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 } = useContext(UsersContext); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { data: users, error, isValidating } = getUsers(); useEffect(() => { if (!error) { clearFlashes('users'); return; } clearAndAddHttpError({ error, key: 'users' }); }, [ 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) || []) : []); }; useEffect(() => { setSelectedUsers([]); }, [ page ]); return (

Users

All registered users on the system.

{ users === undefined || (error && isValidating) ? : length < 1 ? :
{ users.items.map(user => ( )) }
{user.id}
{user.firstName} {user.lastName}
{user.email}
{user.username} Active {user.roleName || 'None'}
}
); }; export default () => { const [ page, setPage ] = useState(1); return ( ); };