🐛 Fix add or modify service undefined errors

This commit is contained in:
ajnart
2022-08-02 00:20:04 +02:00
parent 318dc83d2d
commit 09a8dd7db8

View File

@@ -85,25 +85,26 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
const [isLoading, setLoading] = useState(false); const [isLoading, setLoading] = useState(false);
// Extract all the categories from the services in config // Extract all the categories from the services in config
const categoryList = config.services.reduce((acc, cur) => { const InitialCategories = config.services.reduce((acc, cur) => {
if (cur.category && !acc.includes(cur.category)) { if (cur.category && !acc.includes(cur.category)) {
acc.push(cur.category); acc.push(cur.category);
} }
return acc; return acc;
}, [] as string[]); }, [] as string[]);
const [categories, setCategories] = useState<string[]>(InitialCategories);
const form = useForm({ const form = useForm({
initialValues: { initialValues: {
id: props.id ?? uuidv4(), id: props.id ?? uuidv4(),
type: props.type ?? 'Other', type: props.type ?? 'Other',
category: props.category ?? undefined, category: props.category ?? null,
name: props.name ?? '', name: props.name ?? '',
icon: props.icon ?? DEFAULT_ICON, icon: props.icon ?? DEFAULT_ICON,
url: props.url ?? '', url: props.url ?? '',
apiKey: props.apiKey ?? (undefined as unknown as string), apiKey: props.apiKey ?? undefined,
username: props.username ?? (undefined as unknown as string), username: props.username ?? undefined,
password: props.password ?? (undefined as unknown as string), password: props.password ?? undefined,
openedUrl: props.openedUrl ?? (undefined as unknown as string), openedUrl: props.openedUrl ?? undefined,
status: props.status ?? ['200'], status: props.status ?? ['200'],
newTab: props.newTab ?? true, newTab: props.newTab ?? true,
}, },
@@ -162,21 +163,21 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
</Center> </Center>
<form <form
onSubmit={form.onSubmit(() => { onSubmit={form.onSubmit(() => {
if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) { const newForm = { ...form.values };
form.values.status = undefined; if (newForm.newTab === true) newForm.newTab = undefined;
} if (newForm.category === null) newForm.category = undefined;
if (form.values.newTab === true) { if (newForm.status.length === 1 && newForm.status[0] === '200') {
form.values.newTab = undefined; delete newForm.status;
} }
// If service already exists, update it. // If service already exists, update it.
if (config.services && config.services.find((s) => s.id === form.values.id)) { if (config.services && config.services.find((s) => s.id === newForm.id)) {
setConfig({ setConfig({
...config, ...config,
// replace the found item by matching ID // replace the found item by matching ID
services: config.services.map((s) => { services: config.services.map((s) => {
if (s.id === form.values.id) { if (s.id === newForm.id) {
return { return {
...form.values, ...newForm,
}; };
} }
return s; return s;
@@ -185,7 +186,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
} else { } else {
setConfig({ setConfig({
...config, ...config,
services: [...config.services, form.values], services: [...config.services, newForm],
}); });
} }
setOpened(false); setOpened(false);
@@ -205,7 +206,6 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
placeholder="Plex" placeholder="Plex"
{...form.getInputProps('name')} {...form.getInputProps('name')}
/> />
<TextInput <TextInput
required required
label="Icon URL" label="Icon URL"
@@ -234,17 +234,18 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
/> />
<Select <Select
label="Category" label="Category"
data={categoryList} data={categories}
placeholder="Select a category or create a new one" placeholder="Select a category or create a new one"
nothingFound="Nothing found" nothingFound="Nothing found"
searchable searchable
clearable clearable
creatable creatable
onClick={(e) => { onCreate={(query) => {
e.preventDefault(); const item = { value: query, label: query };
setCategories([...InitialCategories, query]);
return item;
}} }}
getCreateLabel={(query) => `+ Create "${query}"`} getCreateLabel={(query) => `+ Create "${query}"`}
onCreate={(query) => {}}
{...form.getInputProps('category')} {...form.getInputProps('category')}
/> />
<LoadingOverlay visible={isLoading} /> <LoadingOverlay visible={isLoading} />