import { AdminContext } from '@/state/admin'; import React, { useContext, useEffect } from 'react'; import { NavLink } from 'react-router-dom'; import tw from 'twin.macro'; import getAllocations, { Context as AllocationsContext, Filters } from '@/api/admin/nodes/allocations/getAllocations'; import AdminCheckbox from '@/components/admin/AdminCheckbox'; import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader, useTableHooks } from '@/components/admin/AdminTable'; import CopyOnClick from '@/components/elements/CopyOnClick'; import useFlash from '@/plugins/useFlash'; function RowCheckbox ({ id }: { id: number }) { const isChecked = AdminContext.useStoreState(state => state.allocations.selectedAllocations.indexOf(id) >= 0); const appendSelectedAllocation = AdminContext.useStoreActions(actions => actions.allocations.appendSelectedAllocation); const removeSelectedAllocation = AdminContext.useStoreActions(actions => actions.allocations.removeSelectedAllocation); return ( ) => { if (e.currentTarget.checked) { appendSelectedAllocation(id); } else { removeSelectedAllocation(id); } }} /> ); } interface Props { nodeId: string; filters?: Filters; } function AllocationsTable ({ nodeId, filters }: Props) { const { clearFlashes, clearAndAddHttpError } = useFlash(); const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(AllocationsContext); const { data: allocations, error, isValidating } = getAllocations(nodeId, [ 'server' ]); const length = allocations?.items?.length || 0; const setSelectedAllocations = AdminContext.useStoreActions(actions => actions.allocations.setSelectedAllocations); const selectedAllocationLength = AdminContext.useStoreState(state => state.allocations.selectedAllocations.length); const onSelectAllClick = (e: React.ChangeEvent) => { setSelectedAllocations(e.currentTarget.checked ? (allocations?.items?.map?.(allocation => allocation.id) || []) : []); }; const onSearch = (query: string): Promise => { return new Promise((resolve) => { if (query.length < 2) { setFilters(filters || null); } else { setFilters({ ...filters, ip: query }); } return resolve(); }); }; useEffect(() => { setSelectedAllocations([]); }, [ page ]); useEffect(() => { if (!error) { clearFlashes('allocations'); return; } clearAndAddHttpError({ key: 'allocations', error }); }, [ error ]); return (
setSort('ip')}/> setSort('port')}/> { allocations !== undefined && !error && !isValidating && length > 0 && allocations.items.map(allocation => ( {allocation.alias !== null ? : {allocation.relations.server !== undefined ? : )) }
{allocation.ip} {allocation.alias} } {allocation.port} {allocation.relations.server.name} }
{ allocations === undefined || (error && isValidating) ? : length < 1 ? : null }
); } export default (props: Props) => { const hooks = useTableHooks(props.filters); return ( ); };