import CopyOnClick from '@/components/elements/CopyOnClick'; import React, { useContext, useEffect } from 'react'; import getEggs, { Context as EggsContext, Filters } from '@/api/admin/nests/getEggs'; import useFlash from '@/plugins/useFlash'; import { NavLink, useRouteMatch } from 'react-router-dom'; import tw from 'twin.macro'; import AdminCheckbox from '@/components/admin/AdminCheckbox'; import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable'; import { Context } from '@/components/admin/nests/NestEditContainer'; const RowCheckbox = ({ id }: { id: number}) => { const isChecked = Context.useStoreState(state => state.selectedEggs.indexOf(id) >= 0); const appendSelectedEggs = Context.useStoreActions(actions => actions.appendSelectedEggs); const removeSelectedEggs = Context.useStoreActions(actions => actions.removeSelectedEggs); return ( ) => { if (e.currentTarget.checked) { appendSelectedEggs(id); } else { removeSelectedEggs(id); } }} /> ); }; const EggsTable = () => { const match = useRouteMatch<{ nestId: string }>(); const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(EggsContext); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { data: eggs, error, isValidating } = getEggs(Number(match.params.nestId)); useEffect(() => { if (!error) { clearFlashes('nests'); return; } clearAndAddHttpError({ key: 'nests', error }); }, [ error ]); const length = eggs?.items?.length || 0; const setSelectedEggs = Context.useStoreActions(actions => actions.setSelectedEggs); const selectedEggsLength = Context.useStoreState(state => state.selectedEggs.length); const onSelectAllClick = (e: React.ChangeEvent) => { setSelectedEggs(e.currentTarget.checked ? (eggs?.items?.map(nest => nest.id) || []) : []); }; const onSearch = (query: string): Promise => { return new Promise((resolve) => { if (query.length < 2) { setFilters(null); } else { setFilters({ name: query }); } return resolve(); }); }; useEffect(() => { setSelectedEggs([]); }, [ page ]); return (
setSort('id')}/> setSort('name')}/> { eggs !== undefined && !error && !isValidating && length > 0 && eggs.items.map(egg => ( )) }
{egg.id} {egg.name} {egg.description}
{ eggs === undefined || (error && isValidating) ? : length < 1 ? : null }
); }; export default () => { const hooks = useTableHooks(); return ( ); };