Skip to content

Commit 31e5b2b

Browse files
justandrasjustandras
authored
fix: type issue on property forms (#93)
1 parent 37ec0f7 commit 31e5b2b

4 files changed

Lines changed: 119 additions & 111 deletions

File tree

‎backend/src/background/api/parts.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,12 @@ export const mutations = {
8888
if (!defaultPartType) {
8989
return { error: new Error('No part type manifests exist') }
9090
}
91+
const payloadHasType = payload.partType && payload.partType === ''
9192

92-
if (payload.payload?.type) {
93+
if (payloadHasType) {
9394
const { result } = await typeManifestMutations.readOne(String(payload.partType))
9495
if (!result || result.entityType !== TypeManifestEntity.Part) {
95-
return { error: new Error(`Invalid part type: ${payload.payload.type}`) }
96+
return { error: new Error(`Invalid part type: ${payload.partType}`) }
9697
}
9798
}
9899

@@ -109,7 +110,7 @@ export const mutations = {
109110
const id = payload.id || uuid()
110111
const document: Partial<MutationPartCreate> = {
111112
...payload,
112-
partType: payload.partType ?? defaultPartType,
113+
partType: payloadHasType ? payload.partType : defaultPartType,
113114
payload: {
114115
...payload.payload
115116
},

‎backend/src/background/api/segments.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,9 @@ export const mutations = {
7979
return { error: new Error('No segment type manifests exist') }
8080
}
8181

82-
if (payload.payload?.type) {
82+
const payloadHasType = payload.segmentType && payload.segmentType === ''
83+
84+
if (payloadHasType) {
8385
const { result } = await typeManifestMutations.readOne(String(payload.segmentType))
8486
if (!result || result.entityType !== TypeManifestEntity.Segment) {
8587
return { error: new Error(`Invalid segment type: ${payload.payload.type}`) }
@@ -98,7 +100,7 @@ export const mutations = {
98100
const document: Partial<MutationSegmentCreate> = {
99101
isTemplate: false,
100102
...payload,
101-
segmentType: payload.segmentType ?? defaultSegmentType,
103+
segmentType: payloadHasType ? payload.segmentType : defaultSegmentType,
102104
rank: payload.rank ?? segmentsLength
103105
}
104106
delete document.playlistId

‎frontend/src/components/rundown/partPropertiesForm.tsx‎

Lines changed: 55 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ export function PartPropertiesForm({ part }: { part: Part }) {
1212
const dispatch = useAppDispatch()
1313
const toasts = useToasts()
1414

15-
const manifest = useAppSelector((state) =>
16-
state.typeManifests.manifests?.find((p) => p.id === part.partType)
17-
)
15+
const manifests = useAppSelector((state) => state.typeManifests.manifests)
1816

1917
const form = useForm({
2018
defaultValues: part,
@@ -141,59 +139,64 @@ export function PartPropertiesForm({ part }: { part: Part }) {
141139
)}
142140
/>
143141

144-
{manifest?.payload?.map((fieldInfo) => {
145-
return (
146-
<form.Field
147-
key={`payload.${fieldInfo.id}`}
148-
name={`payload.${fieldInfo.id}`}
149-
children={(field) => (
150-
<>
151-
<Form.Group className="mb-3">
152-
<Form.Label htmlFor={field.name}>{fieldInfo.label}:</Form.Label>
142+
<form.Subscribe selector={(state) => state.values.partType}>
143+
{(segmentType) => {
144+
const manifest = manifests?.find((m) => m.id === segmentType)
153145

154-
{fieldInfo.type === 'string' && (
155-
<Form.Control
156-
name={field.name}
157-
type="text"
158-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
159-
value={field.state.value as any}
160-
onBlur={field.handleBlur}
161-
onChange={(e) => field.handleChange(e.target.value)}
162-
/>
163-
)}
146+
if (!manifest) {
147+
return (
148+
<Form.Group className="mb-3">
149+
<Form.Text>Type not found</Form.Text>
150+
</Form.Group>
151+
)
152+
}
164153

165-
{fieldInfo.type === 'number' && (
166-
<Form.Control
167-
name={field.name}
168-
type="number"
169-
value={Number(field.state.value)}
170-
onBlur={field.handleBlur}
171-
onChange={(e) => field.handleChange(Number(e.target.value))}
172-
/>
173-
)}
154+
return (
155+
<>
156+
{manifest.payload?.map((fieldInfo) => (
157+
<form.Field key={`payload.${fieldInfo.id}`} name={`payload.${fieldInfo.id}`}>
158+
{(field) => (
159+
<>
160+
<Form.Group className="mb-3">
161+
<Form.Label htmlFor={field.name}>{fieldInfo.label}:</Form.Label>
174162

175-
{fieldInfo.type === 'boolean' && (
176-
<Form.Switch
177-
name={field.name}
178-
type="text"
179-
checked={Boolean(field.state.value)}
180-
onBlur={field.handleBlur}
181-
onChange={(e) => field.handleChange(e.target.checked)}
182-
/>
183-
)}
184-
</Form.Group>
185-
<FieldInfo field={field} />
186-
</>
187-
)}
188-
/>
189-
)
190-
})}
163+
{fieldInfo.type === 'string' && (
164+
<Form.Control
165+
type="text"
166+
value={String(field.state.value ?? '')}
167+
onBlur={field.handleBlur}
168+
onChange={(e) => field.handleChange(e.target.value)}
169+
/>
170+
)}
171+
172+
{fieldInfo.type === 'number' && (
173+
<Form.Control
174+
name={field.name}
175+
type="number"
176+
value={Number(field.state.value ?? 0)}
177+
onBlur={field.handleBlur}
178+
onChange={(e) => field.handleChange(Number(e.target.value))}
179+
/>
180+
)}
191181

192-
{!manifest && (
193-
<Form.Group className="mb-3">
194-
<Form.Text>Type not found</Form.Text>
195-
</Form.Group>
196-
)}
182+
{fieldInfo.type === 'boolean' && (
183+
<Form.Switch
184+
name={field.name}
185+
checked={Boolean(field.state.value)}
186+
onBlur={field.handleBlur}
187+
onChange={(e) => field.handleChange(e.target.checked)}
188+
/>
189+
)}
190+
</Form.Group>
191+
<FieldInfo field={field} />
192+
</>
193+
)}
194+
</form.Field>
195+
))}
196+
</>
197+
)
198+
}}
199+
</form.Subscribe>
197200

198201
<form.Subscribe
199202
selector={(state) => [state.canSubmit, state.isSubmitting, state.isPristine]}

‎frontend/src/components/rundown/segmentPropertiesForm.tsx‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ export function SegmentPropertiesForm({
1717
const dispatch = useAppDispatch()
1818
const toasts = useToasts()
1919

20-
const manifest = useAppSelector((state) =>
21-
state.typeManifests.manifests?.find((p) => p.id === segment.segmentType)
22-
)
20+
const manifests = useAppSelector((state) => state.typeManifests.manifests)
2321

2422
const form = useForm({
2523
defaultValues: segment,
@@ -130,61 +128,65 @@ export function SegmentPropertiesForm({
130128
</>
131129
)}
132130
/>
131+
<form.Subscribe selector={(state) => state.values.segmentType}>
132+
{(segmentType) => {
133+
const manifest = manifests?.find((m) => m.id === segmentType)
133134

134-
{manifest?.payload?.map((fieldInfo) => {
135-
console.log(fieldInfo)
136-
return (
137-
<form.Field
138-
key={`payload.${fieldInfo.id}`}
139-
name={`payload.${fieldInfo.id}`}
140-
children={(field) => (
141-
<>
142-
<Form.Group className="mb-3">
143-
<Form.Label htmlFor={field.name}>{fieldInfo.label}:</Form.Label>
144-
145-
{fieldInfo.type === 'string' && (
146-
<Form.Control
147-
name={field.name}
148-
type="text"
149-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
150-
value={field.state.value as any}
151-
onBlur={field.handleBlur}
152-
onChange={(e) => field.handleChange(e.target.value)}
153-
/>
154-
)}
135+
if (!manifest) {
136+
return (
137+
<Form.Group className="mb-3">
138+
<Form.Text>Type not found</Form.Text>
139+
</Form.Group>
140+
)
141+
}
155142

156-
{fieldInfo.type === 'number' && (
157-
<Form.Control
158-
name={field.name}
159-
type="number"
160-
value={Number(field.state.value)}
161-
onBlur={field.handleBlur}
162-
onChange={(e) => field.handleChange(Number(e.target.value))}
163-
/>
143+
return (
144+
<>
145+
{manifest.payload?.map((fieldInfo) => (
146+
<form.Field key={`payload.${fieldInfo.id}`} name={`payload.${fieldInfo.id}`}>
147+
{(field) => (
148+
<>
149+
<Form.Group className="mb-3">
150+
<Form.Label htmlFor={field.name}>{fieldInfo.label}:</Form.Label>
151+
152+
{fieldInfo.type === 'string' && (
153+
<Form.Control
154+
type="text"
155+
value={String(field.state.value ?? '')}
156+
onBlur={field.handleBlur}
157+
onChange={(e) => field.handleChange(e.target.value)}
158+
/>
159+
)}
160+
161+
{fieldInfo.type === 'number' && (
162+
<Form.Control
163+
name={field.name}
164+
type="number"
165+
value={Number(field.state.value ?? 0)}
166+
onBlur={field.handleBlur}
167+
onChange={(e) => field.handleChange(Number(e.target.value))}
168+
/>
169+
)}
170+
171+
{fieldInfo.type === 'boolean' && (
172+
<Form.Switch
173+
name={field.name}
174+
checked={Boolean(field.state.value)}
175+
onBlur={field.handleBlur}
176+
onChange={(e) => field.handleChange(e.target.checked)}
177+
/>
178+
)}
179+
</Form.Group>
180+
<FieldInfo field={field} />
181+
</>
164182
)}
183+
</form.Field>
184+
))}
185+
</>
186+
)
187+
}}
188+
</form.Subscribe>
165189

166-
{fieldInfo.type === 'boolean' && (
167-
<Form.Switch
168-
name={field.name}
169-
type="text"
170-
checked={Boolean(field.state.value)}
171-
onBlur={field.handleBlur}
172-
onChange={(e) => field.handleChange(e.target.checked)}
173-
/>
174-
)}
175-
</Form.Group>
176-
<FieldInfo field={field} />
177-
</>
178-
)}
179-
/>
180-
)
181-
})}
182-
183-
{!manifest && (
184-
<Form.Group className="mb-3">
185-
<Form.Text>Type not found</Form.Text>
186-
</Form.Group>
187-
)}
188190
<form.Subscribe
189191
selector={(state) => [state.canSubmit, state.isSubmitting, state.isPristine]}
190192
children={([canSubmit, isSubmitting, isPristine]) => (

0 commit comments

Comments
 (0)