ui(admin): don't block render until egg is loaded

This commit is contained in:
Matthew Penner 2021-09-16 20:19:10 -06:00
parent 34da772db7
commit db4fb3ac53
No known key found for this signature in database
GPG Key ID: 030E4AB751DC756F

View File

@ -18,10 +18,14 @@ import { Actions, useStoreActions } from 'easy-peasy';
import Label from '@/components/elements/Label'; import Label from '@/components/elements/Label';
import { object } from 'yup'; import { object } from 'yup';
function ServerStartupLineContainer ({ egg, server }: { egg: Egg; server: Server }) { function ServerStartupLineContainer ({ egg, server }: { egg: Egg | null; server: Server }) {
const { isSubmitting, setFieldValue } = useFormikContext(); const { isSubmitting, setFieldValue } = useFormikContext();
useEffect(() => { useEffect(() => {
if (egg === null) {
return;
}
if (server.eggId === egg.id) { if (server.eggId === egg.id) {
setFieldValue('startup', server.container.startup); setFieldValue('startup', server.container.startup);
return; return;
@ -47,7 +51,7 @@ function ServerStartupLineContainer ({ egg, server }: { egg: Egg; server: Server
<div> <div>
<Label>Default Startup Command</Label> <Label>Default Startup Command</Label>
<Input value={egg.startup} readOnly/> <Input value={egg?.startup || ''} readOnly/>
</div> </div>
</AdminBox> </AdminBox>
); );
@ -126,7 +130,7 @@ function ServerVariableContainer ({ variable, defaultValue }: { variable: EggVar
); );
} }
function ServerStartupForm ({ egg, setEgg, server }: { egg: Egg, setEgg: (value: Egg | null) => void; server: Server }) { function ServerStartupForm ({ egg, setEgg, server }: { egg: Egg | null, setEgg: (value: Egg | null) => void; server: Server }) {
const { isSubmitting, isValid } = useFormikContext(); const { isSubmitting, isValid } = useFormikContext();
return ( return (
@ -154,7 +158,7 @@ function ServerStartupForm ({ egg, setEgg, server }: { egg: Egg, setEgg: (value:
</div> </div>
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8`}> <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8`}>
{egg.relations.variables?.map((v, i) => ( {egg?.relations.variables?.map((v, i) => (
<ServerVariableContainer <ServerVariableContainer
key={i} key={i}
variable={v} variable={v}
@ -188,10 +192,6 @@ export default function ServerStartupContainer ({ server }: { server: Server })
.catch(error => console.error(error)); .catch(error => console.error(error));
}, []); }, []);
if (egg === null) {
return (<></>);
}
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => { const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('server'); clearFlashes('server');
@ -212,7 +212,7 @@ export default function ServerStartupContainer ({ server }: { server: Server })
initialValues={{ initialValues={{
startup: server.container.startup, startup: server.container.startup,
// Don't ask. // Don't ask.
environment: Object.fromEntries(egg.relations.variables?.map(v => [ v.envVariable, '' ]) || []), environment: Object.fromEntries(egg?.relations.variables?.map(v => [ v.envVariable, '' ]) || []),
image: server.container.image, image: server.container.image,
eggId: server.eggId, eggId: server.eggId,
skipScripts: false, skipScripts: false,