62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
|
|
import tw from 'twin.macro';
|
|
import Icon from '@/components/elements/Icon';
|
|
import { ServerContext } from '@/state/server';
|
|
import deleteServerAllocation from '@/api/server/network/deleteServerAllocation';
|
|
import getServerAllocations from '@/api/swr/getServerAllocations';
|
|
import { useFlashKey } from '@/plugins/useFlash';
|
|
import { Dialog } from '@/components/elements/dialog';
|
|
import { Button } from '@/components/elements/button/index';
|
|
|
|
interface Props {
|
|
allocation: number;
|
|
}
|
|
|
|
const DeleteAllocationButton = ({ allocation }: Props) => {
|
|
const [ confirm, setConfirm ] = useState(false);
|
|
|
|
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
|
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
|
|
|
|
const { mutate } = getServerAllocations();
|
|
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
|
|
|
|
const deleteAllocation = () => {
|
|
clearFlashes();
|
|
|
|
mutate(data => data?.filter(a => a.id !== allocation), false);
|
|
setServerFromState(s => ({ ...s, allocations: s.allocations.filter(a => a.id !== allocation) }));
|
|
|
|
deleteServerAllocation(uuid, allocation)
|
|
.catch(error => {
|
|
clearAndAddHttpError(error);
|
|
mutate();
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Dialog.Confirm
|
|
open={confirm}
|
|
onClose={() => setConfirm(false)}
|
|
title={'Remove Allocation'}
|
|
confirm={'Delete'}
|
|
onConfirmed={deleteAllocation}
|
|
>
|
|
This allocation will be immediately removed from your server.
|
|
</Dialog.Confirm>
|
|
<Button.Danger
|
|
variant={Button.Variants.Secondary}
|
|
size={Button.Sizes.Small}
|
|
shape={Button.Shapes.IconSquare}
|
|
type={'button'}
|
|
onClick={() => setConfirm(true)}
|
|
>
|
|
<Icon icon={faTrashAlt} css={tw`w-3 h-auto`}/>
|
|
</Button.Danger>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DeleteAllocationButton;
|