import React, { useContext, useEffect, useState } from 'react'; import getNests, { Context as NestsContext } from '@/api/admin/nests/getNests'; import NewNestButton from '@/components/admin/nests/NewNestButton'; 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'; import AdminCheckbox from '@/components/admin/AdminCheckbox'; import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable'; const RowCheckbox = ({ id }: { id: number}) => { const isChecked = AdminContext.useStoreState(state => state.nests.selectedNests.indexOf(id) >= 0); const appendSelectedNest = AdminContext.useStoreActions(actions => actions.nests.appendSelectedNest); const removeSelectedNest = AdminContext.useStoreActions(actions => actions.nests.removeSelectedNest); return ( ) => { if (e.currentTarget.checked) { appendSelectedNest(id); } else { removeSelectedNest(id); } }} /> ); }; const NestsContainer = () => { const match = useRouteMatch(); const { page, setPage } = useContext(NestsContext); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { data: nests, error, isValidating } = getNests(); useEffect(() => { if (!error) { clearFlashes('nests'); return; } clearAndAddHttpError({ error, key: 'nests' }); }, [ error ]); const length = nests?.items?.length || 0; const setSelectedNests = AdminContext.useStoreActions(actions => actions.nests.setSelectedNests); const selectedNestsLength = AdminContext.useStoreState(state => state.nests.selectedNests.length); const onSelectAllClick = (e: React.ChangeEvent) => { setSelectedNests(e.currentTarget.checked ? (nests?.items?.map(nest => nest.id) || []) : []); }; useEffect(() => { setSelectedNests([]); }, [ page ]); return (

Nests

All nests currently available on this system.

{ nests === undefined || (error && isValidating) ? : length < 1 ? :
{ nests.items.map(nest => ( )) }
{nest.id} {nest.name} {nest.description}
}
); }; export default () => { const [ page, setPage ] = useState(1); return ( ); };