Only show 5 ready-to-vet members at first

This commit is contained in:
Tanner Collin 2022-04-24 22:58:16 +00:00
parent 33aaf68c5e
commit b4a98859e0

View File

@ -51,6 +51,7 @@ export function AdminVetting(props) {
const [vetting, setVetting] = useState(vettingCache); const [vetting, setVetting] = useState(vettingCache);
const [refreshCount, refreshVetting] = useReducer(x => x + 1, 0); const [refreshCount, refreshVetting] = useReducer(x => x + 1, 0);
const [error, setError] = useState(false); const [error, setError] = useState(false);
const [showAll, setShowAll] = useState(false);
useEffect(() => { useEffect(() => {
requester('/vetting/', 'GET', token) requester('/vetting/', 'GET', token)
@ -63,6 +64,8 @@ export function AdminVetting(props) {
}); });
}, [refreshCount]); }, [refreshCount]);
const displayAll = (vetting && vetting.length <= 5) || showAll;
return ( return (
<div> <div>
{!error ? {!error ?
@ -80,7 +83,7 @@ export function AdminVetting(props) {
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{vetting.map(x => {(displayAll ? vetting : vetting.slice(0,5)).map(x =>
<Table.Row key={x.id}> <Table.Row key={x.id}>
<Table.Cell><Link to={'/members/'+x.id}>{x.first_name} {x.last_name}</Link></Table.Cell> <Table.Cell><Link to={'/members/'+x.id}>{x.first_name} {x.last_name}</Link></Table.Cell>
<Table.Cell><a href={'mailto:'+x.email}>Email</a></Table.Cell> <Table.Cell><a href={'mailto:'+x.email}>Email</a></Table.Cell>
@ -95,8 +98,16 @@ export function AdminVetting(props) {
</Table.Body> </Table.Body>
</Table> </Table>
<p>{displayAll ? '' : '5 / '}{vetting.length} members</p>
<p> <p>
{displayAll ?
<>
&#8627; <a href={'mailto:'+vetting.map(x => x.email).join(',')}>Email All</a> &#8627; <a href={'mailto:'+vetting.map(x => x.email).join(',')}>Email All</a>
</>
:
<Button onClick={() => setShowAll(true)}>Show All</Button>
}
</p> </p>
</> </>
: :