70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { useField } from 'formik';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { WithRelationships } from '@/api/admin';
|
|
import { Egg, searchEggs } from '@/api/admin/egg';
|
|
import Label from '@/components/elements/Label';
|
|
import Select from '@/components/elements/Select';
|
|
|
|
interface Props {
|
|
nestId?: number;
|
|
selectedEggId?: number;
|
|
onEggSelect: (egg: Egg | null) => void;
|
|
}
|
|
|
|
export default ({ nestId, selectedEggId, onEggSelect }: Props) => {
|
|
const [ , , { setValue, setTouched } ] = useField<Record<string, string | undefined>>('environment');
|
|
const [ eggs, setEggs ] = useState<WithRelationships<Egg, 'variables'>[] | null>(null);
|
|
|
|
const selectEgg = (egg: Egg | null) => {
|
|
if (egg === null) {
|
|
onEggSelect(null);
|
|
return;
|
|
}
|
|
|
|
// Clear values
|
|
setValue({});
|
|
setTouched(true);
|
|
|
|
onEggSelect(egg);
|
|
|
|
const values: Record<string, any> = {};
|
|
egg.relationships.variables?.forEach(v => { values[v.environmentVariable] = v.defaultValue; });
|
|
setValue(values);
|
|
setTouched(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!nestId) {
|
|
setEggs(null);
|
|
return;
|
|
}
|
|
|
|
searchEggs(nestId, {})
|
|
.then(eggs => {
|
|
setEggs(eggs);
|
|
selectEgg(eggs[0] || null);
|
|
})
|
|
.catch(error => console.error(error));
|
|
}, [ nestId ]);
|
|
|
|
const onSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
selectEgg(eggs?.find(egg => egg.id.toString() === e.currentTarget.value) || null);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Label>Egg</Label>
|
|
<Select id={'eggId'} name={'eggId'} defaultValue={selectedEggId} onChange={onSelectChange}>
|
|
{!eggs ?
|
|
<option disabled>Loading...</option>
|
|
:
|
|
eggs.map(v => (
|
|
<option key={v.id} value={v.id.toString()}>
|
|
{v.name}
|
|
</option>
|
|
))
|
|
}
|
|
</Select>
|
|
</>
|
|
);
|
|
};
|