import React, { useEffect, useState } from 'react'; import Spinner from '@/components/elements/Spinner'; import useFlash from '@/plugins/useFlash'; import ServerContentBlock from '@/components/elements/ServerContentBlock'; import { ServerContext } from '@/state/server'; import AllocationRow from '@/components/server/network/AllocationRow'; import Button from '@/components/elements/Button'; import createServerAllocation from '@/api/server/network/createServerAllocation'; import tw from 'twin.macro'; import Can from '@/components/elements/Can'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import getServerAllocations from '@/api/swr/getServerAllocations'; import isEqual from 'react-fast-compare'; import { Allocation } from '@/api/server/getServer'; const NetworkContainer = () => { const [ loading, setLoading ] = useState(false); const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const allocationLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.allocations); // @ts-ignore const allocations: Allocation[] = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual); const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { data, error, mutate } = getServerAllocations(); useEffect(() => { mutate(allocations, false); }, []); useEffect(() => { if (error) { clearAndAddHttpError({ key: 'server:network', error }); } }, [ error ]); const onCreateAllocation = () => { clearFlashes('server:network'); setLoading(true); createServerAllocation(uuid) .then(allocation => { setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) })); return mutate(data?.concat(allocation), false); }) .catch(error => clearAndAddHttpError({ key: 'server:network', error })) .then(() => setLoading(false)); }; return ( {!data ? : <> { data.map(allocation => ( )) }

You are currently using {data.length} of {allocationLimit} allowed allocations for this server.

{allocationLimit > data.length && }
}
); }; export default NetworkContainer;