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

Apply new eslint rules; default to prettier for styling

Browse source
This commit is contained in:
DaneEveritt 2022-06-26 15:13:52 -04:00
parent f22cce8881
commit dc84af9937
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
218 changed files with 3876 additions and 3564 deletions
Download patch file Download diff file Expand all files Collapse all files

53
resources/scripts/components/server/network/AllocationRow.tsx
View file

@ -21,20 +21,22 @@ import getServerAllocations from '@/api/swr/getServerAllocations';
import { ip } from '@/lib/formatters';
import Code from '@/components/elements/Code';
const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
const Label = styled.label`
${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}
`;
interface Props {
allocation: Allocation;
}
const AllocationRow = ({ allocation }: Props) => {
const [ loading, setLoading ] = useState(false);
const [loading, setLoading] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const { mutate } = getServerAllocations();
const onNotesChanged = useCallback((id: number, notes: string) => {
mutate(data => data?.map(a => a.id === id ? { ...a, notes } : a), false);
mutate((data) => data?.map((a) => (a.id === id ? { ...a, notes } : a)), false);
}, []);
const setAllocationNotes = debounce((notes: string) => {
@ -43,31 +45,38 @@ const AllocationRow = ({ allocation }: Props) => {
setServerAllocationNotes(uuid, allocation.id, notes)
.then(() => onNotesChanged(allocation.id, notes))
.catch(error => clearAndAddHttpError(error))
.catch((error) => clearAndAddHttpError(error))
.then(() => setLoading(false));
}, 750);
const setPrimaryAllocation = () => {
clearFlashes();
mutate(data => data?.map(a => ({ ...a, isDefault: a.id === allocation.id })), false);
mutate((data) => data?.map((a) => ({ ...a, isDefault: a.id === allocation.id })), false);
setPrimaryServerAllocation(uuid, allocation.id)
.catch(error => {
clearAndAddHttpError(error);
mutate();
});
setPrimaryServerAllocation(uuid, allocation.id).catch((error) => {
clearAndAddHttpError(error);
mutate();
});
};
return (
<GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
<div className={'flex items-center w-full md:w-auto'}>
<div className={'pl-4 pr-6 text-neutral-400'}>
<FontAwesomeIcon icon={faNetworkWired}/>
<FontAwesomeIcon icon={faNetworkWired} />
</div>
<div className={'mr-4 flex-1 md:w-40'}>
{allocation.alias ?
<CopyOnClick text={allocation.alias}><Code dark className={'w-40 truncate'}>{allocation.alias}</Code></CopyOnClick> :
<CopyOnClick text={ip(allocation.ip)}><Code dark>{ip(allocation.ip)}</Code></CopyOnClick>}
{allocation.alias ? (
<CopyOnClick text={allocation.alias}>
<Code dark className={'w-40 truncate'}>
{allocation.alias}
</Code>
</CopyOnClick>
) : (
<CopyOnClick text={ip(allocation.ip)}>
<Code dark>{ip(allocation.ip)}</Code>
</CopyOnClick>
)}
<Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
</div>
<div className={'w-16 md:w-24 overflow-hidden'}>
@ -81,17 +90,19 @@ const AllocationRow = ({ allocation }: Props) => {
className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
placeholder={'Notes'}
defaultValue={allocation.notes || undefined}
onChange={e => setAllocationNotes(e.currentTarget.value)}
onChange={(e) => setAllocationNotes(e.currentTarget.value)}
/>
</InputSpinner>
</div>
<div className={'flex justify-end space-x-4 mt-4 w-full md:mt-0 md:w-48'}>
{allocation.isDefault ?
<Button size={Button.Sizes.Small} className={'!text-gray-50 !bg-blue-600'} disabled>Primary</Button>
:
{allocation.isDefault ? (
<Button size={Button.Sizes.Small} className={'!text-gray-50 !bg-blue-600'} disabled>
Primary
</Button>
) : (
<>
<Can action={'allocation.delete'}>
<DeleteAllocationButton allocation={allocation.id}/>
<DeleteAllocationButton allocation={allocation.id} />
</Can>
<Can action={'allocation.update'}>
<Button.Text size={Button.Sizes.Small} onClick={setPrimaryAllocation}>
@ -99,7 +110,7 @@ const AllocationRow = ({ allocation }: Props) => {
</Button.Text>
</Can>
</>
}
)}
</div>
</GreyRowBox>
);

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

@ -14,10 +14,10 @@ interface Props {
}
const DeleteAllocationButton = ({ allocation }: Props) => {
const [ confirm, setConfirm ] = useState(false);
const [confirm, setConfirm] = useState(false);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
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');
@ -25,14 +25,13 @@ const DeleteAllocationButton = ({ allocation }: Props) => {
const deleteAllocation = () => {
clearFlashes();
mutate(data => data?.filter(a => a.id !== allocation), false);
setServerFromState(s => ({ ...s, allocations: s.allocations.filter(a => a.id !== allocation) }));
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();
});
deleteServerAllocation(uuid, allocation).catch((error) => {
clearAndAddHttpError(error);
mutate();
});
};
return (
@ -53,7 +52,7 @@ const DeleteAllocationButton = ({ allocation }: Props) => {
type={'button'}
onClick={() => setConfirm(true)}
>
<Icon icon={faTrashAlt} css={tw`w-3 h-auto`}/>
<Icon icon={faTrashAlt} css={tw`w-3 h-auto`} />
</Button.Danger>
</>
);

51
resources/scripts/components/server/network/NetworkContainer.tsx
View file

@ -14,11 +14,11 @@ 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 [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();
@ -29,59 +29,54 @@ const NetworkContainer = () => {
useEffect(() => {
clearAndAddHttpError(error);
}, [ error ]);
}, [error]);
useDeepCompareEffect(() => {
if (!data) return;
setServerFromState(state => ({ ...state, allocations: data }));
}, [ data ]);
setServerFromState((state) => ({ ...state, allocations: data }));
}, [data]);
const onCreateAllocation = () => {
clearFlashes();
setLoading(true);
createServerAllocation(uuid)
.then(allocation => {
setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) }));
.then((allocation) => {
setServerFromState((s) => ({ ...s, allocations: s.allocations.concat(allocation) }));
return mutate(data?.concat(allocation), false);
})
.catch(error => clearAndAddHttpError(error))
.catch((error) => clearAndAddHttpError(error))
.then(() => setLoading(false));
};
return (
<ServerContentBlock showFlashKey={'server:network'} title={'Network'}>
{!data ?
<Spinner size={'large'} centered/>
:
{!data ? (
<Spinner size={'large'} centered />
) : (
<>
{
data.map(allocation => (
<AllocationRow
key={`${allocation.ip}:${allocation.port}`}
allocation={allocation}
/>
))
}
{allocationLimit > 0 &&
{data.map((allocation) => (
<AllocationRow key={`${allocation.ip}:${allocation.port}`} allocation={allocation} />
))}
{allocationLimit > 0 && (
<Can action={'allocation.create'}>
<SpinnerOverlay visible={loading}/>
<SpinnerOverlay visible={loading} />
<div css={tw`mt-6 sm:flex items-center justify-end`}>
<p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
You are currently using {data.length} of {allocationLimit} allowed allocations for
this server.
</p>
{allocationLimit > data.length &&
{allocationLimit > data.length && (
<Button css={tw`w-full sm:w-auto`} color={'primary'} onClick={onCreateAllocation}>
Create Allocation
</Button>
}
)}
</div>
</Can>
}
)}
</>
}
)}
</ServerContentBlock>
);
};