misc_pterodactyl-panel/resources/scripts/components/server/network/DeleteAllocationButton.tsx

62 lines
2.2 KiB
TypeScript
Raw Normal View History

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;