@@ -23,6 +23,7 @@ import {
2323 ArraySchema ,
2424 createSubmitHandler ,
2525 getErrorObject ,
26+ getErrorString ,
2627 ObjectSchema ,
2728 PartialForm ,
2829 removeNull ,
@@ -52,16 +53,19 @@ import ActionLinkInputComponent from './actionLinkInput';
5253interface ActionLinkFormValue extends ActionLinkType {
5354 clientId : string ;
5455}
55- type PartialFormType = Omit < PartialForm < HighlightCreateInput > , 'actionLinks' > & {
56- actionLinks ?: PartialForm < ActionLinkFormValue > [ ] ;
56+
57+ type PartialActionLinkForm = PartialForm < ActionLinkFormValue , 'clientId' > ;
58+
59+ type PartialFormType = Omit < PartialForm < HighlightCreateInput > , 'actionLinks' > &
60+ { actionLinks ?: PartialActionLinkForm [ ] ;
5761} ;
5862
5963type FormSchema = ObjectSchema < PartialFormType > ;
6064type FormSchemaFields = ReturnType < FormSchema [ 'fields' ] > ;
6165
62- type ActionLinkSchema = ObjectSchema < PartialForm < ActionLinkFormValue > , PartialFormType > ;
66+ type ActionLinkSchema = ObjectSchema < PartialActionLinkForm , PartialFormType > ;
6367type ActionLinkSchemaFields = ReturnType < ActionLinkSchema [ 'fields' ] > ;
64- type ActionLinksSchema = ArraySchema < PartialForm < ActionLinkFormValue > , PartialFormType > ;
68+ type ActionLinksSchema = ArraySchema < PartialActionLinkForm , PartialFormType > ;
6569type ActionLinksSchemaMember = ReturnType < ActionLinksSchema [ 'member' ] > ;
6670
6771const HighlightSchema : FormSchema = {
@@ -78,10 +82,10 @@ const HighlightSchema: FormSchema = {
7882 required : true ,
7983 } ,
8084 actionLinks : {
81- keySelector : ( col ) => col . clientId ?? '' ,
85+ keySelector : ( col ) => col . clientId ,
8286 member : ( ) : ActionLinksSchemaMember => ( {
8387 fields : ( ) : ActionLinkSchemaFields => ( {
84- clientId : { } ,
88+ clientId : { required : true } ,
8589 id : { } ,
8690 label : {
8791 required : true ,
@@ -102,17 +106,15 @@ const HighlightSchema: FormSchema = {
102106 } ) ,
103107} ;
104108
105- const defaultEditFormValue : PartialFormType = {
106- actionLinks : [ { clientId : randomString ( ) } ] ,
107- } ;
109+ const defaultEditFormValue : PartialFormType = { } ;
108110
109111function HighlightForm ( ) {
110112 const { id } = useParams ( ) ;
111113 const navigate = useRouting ( ) ;
112114 const alert = useAlert ( ) ;
113115
114116 const [ { data, fetching : highlightDetailFetch } ] = useHighlightDetailQuery ( {
115- variables : { id : id || '' } , pause : ! id ,
117+ variables : { id : ( id ?? '' ) } , pause : ! id ,
116118 } ) ;
117119 const [ { fetching : createPending } , createHighlightMutate ] = useCreateHighlightMutation ( ) ;
118120 const [ { fetching : updatePending } , updateHighlightMutate ] = useUpdateHighlightMutation ( ) ;
@@ -132,7 +134,7 @@ function HighlightForm() {
132134 const {
133135 setValue : onActionLinkChange ,
134136 removeValue : onActionLinkRemove ,
135- } = useFormArray < 'actionLinks' , PartialForm < ActionLinkFormValue > > ( 'actionLinks' , setFieldValue ) ;
137+ } = useFormArray < 'actionLinks' , PartialActionLinkForm > ( 'actionLinks' , setFieldValue ) ;
136138
137139 const handleMutation = useCallback ( async ( mutationData : PartialFormType ) => {
138140 const redirectPath = 'highlight' ;
@@ -215,10 +217,16 @@ function HighlightForm() {
215217 }
216218 const {
217219 image,
220+ actionLinks,
218221 ...other
219222 } = removeNull ( data . highlight ) ;
220223
221- setValue ( { ...other } ) ;
224+ const actionLinksWithClientId = ( actionLinks ?? [ ] ) . map ( ( link ) => ( {
225+ ...link ,
226+ clientId : randomString ( ) ,
227+ } ) ) ;
228+
229+ setValue ( { ...other , actionLinks : actionLinksWithClientId } ) ;
222230
223231 if ( image ) {
224232 urlToFile ( image . url , image . name ) . then ( ( file ) => {
@@ -233,12 +241,12 @@ function HighlightForm() {
233241 const handleCollectionAdd = useCallback (
234242 ( ) => {
235243 const clientId = randomString ( ) ;
236- const newActionLink : PartialForm < ActionLinkFormValue > = {
244+ const newActionLink : PartialActionLinkForm = {
237245 clientId,
238246 } ;
239247
240248 setFieldValue (
241- ( oldValue : PartialForm < ActionLinkFormValue > [ ] | undefined ) => (
249+ ( oldValue : PartialActionLinkForm [ ] | undefined ) => (
242250 [ ...( oldValue ?? [ ] ) , newActionLink ]
243251 ) ,
244252 'actionLinks' ,
@@ -287,7 +295,7 @@ function HighlightForm() {
287295 name = "heading"
288296 autoFocus
289297 value = { value . heading }
290- error = { error ?. heading as string }
298+ error = { error ?. heading }
291299 onChange = { setFieldValue }
292300 placeholder = "heading"
293301 />
@@ -300,7 +308,7 @@ function HighlightForm() {
300308 < TextArea
301309 name = "description"
302310 value = { value . description }
303- error = { error ?. description as string }
311+ error = { error ?. description }
304312 onChange = { setFieldValue }
305313 placeholder = "description"
306314
@@ -327,7 +335,7 @@ function HighlightForm() {
327335 name = "image"
328336 onChange = { setFieldValue }
329337 value = { value . image }
330- error = { error ?. image as string }
338+ error = { getErrorString ( error ?. image ) }
331339 />
332340 </ InputSection >
333341 < InputSection
0 commit comments