fix: missing error messages

This commit is contained in:
Sérgio Salgado 2022-10-11 23:46:33 +01:00
parent c0ce1a0c42
commit 7532b5c904
14 changed files with 93 additions and 65 deletions

View file

@ -153,16 +153,18 @@ const TermsConditions = () => {
}
const validationSchema = Yup.object().shape({
title: Yup.string()
.required()
title: Yup.string('The screen title must be a string')
.required('The screen title is required')
.max(50, 'Too long'),
text: Yup.string().required(),
acceptButtonText: Yup.string()
.required()
.max(50, 'Too long'),
cancelButtonText: Yup.string()
.required()
.max(50, 'Too long')
text: Yup.string('The text content must be a string').required(
'The text content is required'
),
acceptButtonText: Yup.string('The accept button text must be a string')
.required('The accept button text is required')
.max(50, 'The accept button text is too long'),
cancelButtonText: Yup.string('The cancel button text must be a string')
.required('The cancel button text is required')
.max(50, 'The cancel button text is too long')
})
return (
@ -236,37 +238,42 @@ const TermsConditions = () => {
setEditing(false)
setError(null)
}}>
<Form>
<PromptWhenDirty />
{fields.map((f, idx) => (
<div className={classes.row} key={idx}>
<Field
editing={editing}
name={f.name}
width={f.width}
placeholder={f.placeholder}
label={f.label}
value={f.value}
multiline={f.multiline}
rows={f.rows}
onFocus={() => setError(null)}
/>
{({ errors }) => (
<Form>
<PromptWhenDirty />
{fields.map((f, idx) => (
<div className={classes.row} key={idx}>
<Field
editing={editing}
name={f.name}
width={f.width}
placeholder={f.placeholder}
label={f.label}
value={f.value}
multiline={f.multiline}
rows={f.rows}
onFocus={() => setError(null)}
/>
</div>
))}
<div className={classnames(classes.row, classes.submit)}>
{editing && (
<>
<Link color="primary" type="submit">
Save
</Link>
<Link color="secondary" type="reset">
Cancel
</Link>
{!R.isEmpty(errors) && (
<ErrorMessage>{R.head(R.values(errors))}</ErrorMessage>
)}
{error && <ErrorMessage>Failed to save changes</ErrorMessage>}
</>
)}
</div>
))}
<div className={classnames(classes.row, classes.submit)}>
{editing && (
<>
<Link color="primary" type="submit">
Save
</Link>
<Link color="secondary" type="reset">
Cancel
</Link>
{error && <ErrorMessage>Failed to save changes</ErrorMessage>}
</>
)}
</div>
</Form>
</Form>
)}
</Formik>
</>
)