import React, { useEffect, useState } from 'react'; import Spinner from '@/components/elements/Spinner'; import { useFlashKey } 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 { useDeepCompareEffect } from '@/plugins/useDeepCompareEffect'; 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); const allocations = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual); const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState); const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network'); const { data, error, mutate } = getServerAllocations(); useEffect(() => { mutate(allocations); }, []); useEffect(() => { clearAndAddHttpError(error); }, [ error ]); useDeepCompareEffect(() => { if (!data) return; setServerFromState(state => ({ ...state, allocations: data })); }, [ data ]); const onCreateAllocation = () => { clearFlashes(); setLoading(true); createServerAllocation(uuid) .then(allocation => { setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) })); return mutate(data?.concat(allocation), false); }) .catch(error => clearAndAddHttpError(error)) .then(() => setLoading(false)); }; return ( {!data ? : <> { data.map(allocation => ( )) } {allocationLimit > 0 &&

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

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