StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update more of the UI to use new design elements

Browse source
This commit is contained in:
DaneEveritt 2022-06-20 15:28:27 -04:00
parent 2824db7352
commit 61018b5e67
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
14 changed files with 100 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

36
resources/scripts/components/server/network/DeleteAllocationButton.tsx
View file

@ -2,11 +2,12 @@ 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 ConfirmationModal from '@/components/elements/ConfirmationModal';
import { ServerContext } from '@/state/server';
import deleteServerAllocation from '@/api/server/network/deleteServerAllocation';
import getServerAllocations from '@/api/swr/getServerAllocations';
import useFlash from '@/plugins/useFlash';
import { useFlashKey } from '@/plugins/useFlash';
import { Dialog } from '@/components/elements/dialog';
import { Button } from '@/components/elements/button/index';
interface Props {
allocation: number;
@ -19,36 +20,41 @@ const DeleteAllocationButton = ({ allocation }: Props) => {
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const { mutate } = getServerAllocations();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const deleteAllocation = () => {
clearFlashes('server:network');
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({ key: 'server:network', error }));
.catch(error => {
clearAndAddHttpError(error);
mutate();
});
};
return (
<>
<ConfirmationModal
visible={confirm}
title={'Remove this allocation?'}
buttonText={'Delete'}
<Dialog.Confirm
open={confirm}
onClose={() => setConfirm(false)}
title={'Remove Allocation'}
confirm={'Delete'}
onConfirmed={deleteAllocation}
onModalDismissed={() => setConfirm(false)}
>
This allocation will be immediately removed from your server. Are you sure you want to continue?
</ConfirmationModal>
<button
css={tw`text-neutral-400 px-2 py-1 mr-2 transition-colors duration-150 hover:text-red-400`}
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>
</Button.Danger>
</>
);
};