Skip to content

Commit e6d996b

Browse files
committed
Use existing types for forms
1 parent 97b0137 commit e6d996b

3 files changed

Lines changed: 28 additions & 39 deletions

File tree

app/forms/anti-affinity-group-create.tsx

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
queryClient,
1313
useApiMutation,
1414
usePrefetchedQuery,
15-
type AffinityPolicy,
15+
type AntiAffinityGroupCreate,
1616
} from '@oxide/api'
1717

1818
import { DescriptionField } from '~/components/form/fields/DescriptionField'
@@ -29,13 +29,6 @@ import { affinityGroupList, antiAffinityGroupList } from './affinity-util'
2929

3030
export const handle = titleCrumb('New anti-affinity group')
3131

32-
type AntiAffinityGroupFormValues = {
33-
name: string
34-
description: string
35-
policy: AffinityPolicy
36-
affinityGroupMembers: string[]
37-
}
38-
3932
export async function clientLoader({ params }: LoaderFunctionArgs) {
4033
const { project } = getProjectSelector(params)
4134
await Promise.all([
@@ -62,13 +55,13 @@ export default function CreateAntiAffintyGroupForm() {
6255
const {
6356
data: { items: existingAntiAffinityGroups },
6457
} = usePrefetchedQuery(antiAffinityGroupList({ project }))
65-
const defaultValues: AntiAffinityGroupFormValues = {
58+
const defaultValues = {
6659
name: '',
6760
description: '',
68-
policy: 'allow',
69-
affinityGroupMembers: [],
61+
failureDomain: 'sled' as const,
62+
policy: 'allow' as const,
7063
}
71-
const form = useForm({ defaultValues })
64+
const form = useForm<AntiAffinityGroupCreate>({ defaultValues })
7265
const control = form.control
7366

7467
return (
@@ -81,12 +74,7 @@ export default function CreateAntiAffintyGroupForm() {
8174
onSubmit={(values) => {
8275
createAntiAffinityGroup.mutate({
8376
query: { project },
84-
body: {
85-
name: values.name,
86-
description: values.description,
87-
policy: values.policy,
88-
failureDomain: 'sled',
89-
},
77+
body: { ...values },
9078
})
9179
}}
9280
loading={createAntiAffinityGroup.isPending}

app/forms/anti-affinity-group-edit.tsx

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -61,18 +61,17 @@ export default function EditAntiAffintyGroupForm() {
6161
},
6262
})
6363

64-
const {
65-
data: { items: existingAntiAffinityGroups },
66-
} = usePrefetchedQuery(antiAffinityGroupList({ project }))
64+
const { data: existingAntiAffinityGroups } = usePrefetchedQuery(
65+
antiAffinityGroupList({ project })
66+
)
67+
6768
const { data: antiAffinityGroupData } = usePrefetchedQuery(
6869
antiAffinityGroupView({ project, antiAffinityGroup })
6970
)
70-
const defaultValues: AntiAffinityGroupUpdate = {
71-
name: antiAffinityGroupData.name,
72-
description: antiAffinityGroupData.description,
73-
}
74-
const form = useForm({ defaultValues })
75-
const control = form.control
71+
72+
const form = useForm<AntiAffinityGroupUpdate>({
73+
defaultValues: { ...antiAffinityGroupData },
74+
})
7675

7776
return (
7877
<SideModalForm
@@ -85,10 +84,7 @@ export default function EditAntiAffintyGroupForm() {
8584
editAntiAffinityGroup.mutate({
8685
path: { antiAffinityGroup },
8786
query: { project },
88-
body: {
89-
name: values.name || antiAffinityGroupData.name,
90-
description: values.description || '',
91-
},
87+
body: { ...values },
9288
})
9389
}}
9490
loading={editAntiAffinityGroup.isPending}
@@ -97,14 +93,14 @@ export default function EditAntiAffintyGroupForm() {
9793
>
9894
<NameField
9995
name="name"
100-
control={control}
96+
control={form.control}
10197
validate={(name) => {
102-
if (existingAntiAffinityGroups.find((g) => g.name === name)) {
98+
if (existingAntiAffinityGroups.items.find((g) => g.name === name)) {
10399
return 'Name taken. To update an existing group, edit it directly.'
104100
}
105101
}}
106102
/>
107-
<DescriptionField name="description" control={control} />
103+
<DescriptionField name="description" control={form.control} />
108104
</SideModalForm>
109105
)
110106
}

app/forms/anti-affinity-group-member-add.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@
88

99
import { useForm } from 'react-hook-form'
1010

11-
import { queryClient, useApiMutation, type Instance } from '~/api'
11+
import {
12+
queryClient,
13+
useApiMutation,
14+
type AntiAffinityGroupMemberInstanceAddPathParams,
15+
type Instance,
16+
} from '~/api'
1217
import { ComboboxField } from '~/components/form/fields/ComboboxField'
1318
import { HL } from '~/components/HL'
1419
import { useAntiAffinityGroupSelector } from '~/hooks/use-params'
@@ -27,9 +32,9 @@ export function AddAntiAffinityGroupMemberForm({
2732
}) {
2833
const { project, antiAffinityGroup } = useAntiAffinityGroupSelector()
2934

30-
const form = useForm({
35+
const form = useForm<AntiAffinityGroupMemberInstanceAddPathParams>({
3136
defaultValues: {
32-
antiAffinityGroupMember: '',
37+
instance: '',
3338
},
3439
})
3540

@@ -58,7 +63,7 @@ export function AddAntiAffinityGroupMemberForm({
5863
<ComboboxField
5964
label="Instance"
6065
placeholder="Select an instance"
61-
name="antiAffinityGroupMember"
66+
name="instance"
6267
items={toComboboxItems(availableInstances)}
6368
required
6469
control={form.control}
@@ -71,7 +76,7 @@ export function AddAntiAffinityGroupMemberForm({
7176
addMember({
7277
path: {
7378
antiAffinityGroup,
74-
instance: form.getValues('antiAffinityGroupMember'),
79+
instance: form.getValues('instance'),
7580
},
7681
query: { project },
7782
})

0 commit comments

Comments
 (0)