Skip to content

Commit

Permalink
feat: disable form submit when model is invalid (#826)
Browse files Browse the repository at this point in the history 
* feat: disable form submit when model is invalid

- fixed typo on existing test

* fix: exposing form data type to form-renderer helper
  • Loading branch information
@bombguy
bombguy authored and Scott Young committed Dec 9, 2022
1 parent 8525640 commit 810a595
Show file tree
Hide file tree
Showing 6 changed files with 210 additions and 83 deletions.
107 changes: 70 additions & 37 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4021,10 +4021,15 @@ export default function MyPostForm(props) {
<Button
children=\\"Reset\\"
type=\\"reset\\"
<<<<<<< HEAD
onClick={(event) => {
event.preventDefault();
resetStateValues();
}}
=======
onClick={resetStateValues}
isDisabled={!(id || post)}
>>>>>>> 6898d10 (feat: disable form submit when model is invalid (#826))
{...getOverrideProps(overrides, \\"ResetButton\\")}
></Button>
<Flex
Expand All @@ -4043,7 +4048,9 @@ export default function MyPostForm(props) {
children=\\"Submit\\"
type=\\"submit\\"
variation=\\"primary\\"
isDisabled={Object.values(errors).some((e) => e?.hasError)}
isDisabled={
!(id || post) || Object.values(errors).some((e) => e?.hasError)
}
{...getOverrideProps(overrides, \\"SubmitButton\\")}
></Button>
</Flex>
Expand Down Expand Up @@ -4229,10 +4236,15 @@ export default function MyPostForm(props) {
<Button
children=\\"Reset\\"
type=\\"reset\\"
<<<<<<< HEAD
onClick={(event) => {
event.preventDefault();
resetStateValues();
}}
=======
onClick={resetStateValues}
isDisabled={!(id || post)}
>>>>>>> 6898d10 (feat: disable form submit when model is invalid (#826))
{...getOverrideProps(overrides, \\"ResetButton\\")}
></Button>
<Flex
Expand All @@ -4251,7 +4263,9 @@ export default function MyPostForm(props) {
children=\\"Submit\\"
type=\\"submit\\"
variation=\\"primary\\"
isDisabled={Object.values(errors).some((e) => e?.hasError)}
isDisabled={
!(id || post) || Object.values(errors).some((e) => e?.hasError)
}
{...getOverrideProps(overrides, \\"SubmitButton\\")}
></Button>
</Flex>
Expand Down Expand Up @@ -4464,10 +4478,9 @@ function ArrayField({
</React.Fragment>
);
}
export default function MyFlexUpdateForm(props) {
export default function MyFlexCreateForm(props) {
const {
id,
flex,
clearOnSuccess = true,
onSuccess,
onError,
onSubmit,
Expand All @@ -4493,6 +4506,7 @@ export default function MyFlexUpdateForm(props) {
);
const [errors, setErrors] = React.useState({});
const resetStateValues = () => {
<<<<<<< HEAD
const cleanValues = { ...initialValues, ...flexRecord };
setUsername(cleanValues.username);
setCaption(cleanValues.caption);
Expand All @@ -4501,17 +4515,17 @@ export default function MyFlexUpdateForm(props) {
setTags(cleanValues.tags ?? []);
setCurrentTagsValue(\\"\\");
setProfile_url(cleanValues.profile_url);
=======
setUsername(initialValues.username);
setCaption(initialValues.caption);
setCustomtags(initialValues.Customtags);
setCurrentCustomtagsValue(undefined);
setTags(initialValues.tags);
setCurrentTagsValue(undefined);
setProfile_url(initialValues.profile_url);
>>>>>>> 6898d10 (feat: disable form submit when model is invalid (#826))
setErrors({});
};
const [flexRecord, setFlexRecord] = React.useState(flex);
React.useEffect(() => {
const queryData = async () => {
const record = id ? await DataStore.query(Flex0, id) : flex0;
setFlexRecord(record);
};
queryData();
}, [id, flex]);
React.useEffect(resetStateValues, [flexRecord]);
const [currentCustomtagsValue, setCurrentCustomtagsValue] =
React.useState(\\"\\");
const CustomtagsRef = React.createRef();
Expand Down Expand Up @@ -4577,35 +4591,39 @@ export default function MyFlexUpdateForm(props) {
modelFields = onSubmit(modelFields);
}
try {
await DataStore.save(
Flex0.copyOf(flexRecord, (updated) => {
Object.assign(updated, modelFields);
})
);
await DataStore.save(new Flex0(modelFields));
if (onSuccess) {
onSuccess(modelFields);
}
if (clearOnSuccess) {
resetStateValues();
}
} catch (err) {
if (onError) {
onError(modelFields, err.message);
}
}
}}
{...getOverrideProps(overrides, \\"MyFlexUpdateForm\\")}
{...getOverrideProps(overrides, \\"MyFlexCreateForm\\")}
{...rest}
>
<Flex
justifyContent=\\"space-between\\"
{...getOverrideProps(overrides, \\"CTAFlex\\")}
>
<Button
children=\\"Reset\\"
children=\\"Clear\\"
type=\\"reset\\"
<<<<<<< HEAD
onClick={(event) => {
event.preventDefault();
resetStateValues();
}}
{...getOverrideProps(overrides, \\"ResetButton\\")}
=======
onClick={resetStateValues}
{...getOverrideProps(overrides, \\"ClearButton\\")}
>>>>>>> 6898d10 (feat: disable form submit when model is invalid (#826))
></Button>
<Flex
gap=\\"15px\\"
Expand Down Expand Up @@ -4639,7 +4657,10 @@ export default function MyFlexUpdateForm(props) {
isRequired={false}
isReadOnly={false}
placeholder=\\"john\\"
<<<<<<< HEAD
value={username}
=======
>>>>>>> 6898d10 (feat: disable form submit when model is invalid (#826))
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -4668,7 +4689,10 @@ export default function MyFlexUpdateForm(props) {
isRequired={false}
isReadOnly={false}
placeholder=\\"i love code\\"
<<<<<<< HEAD
value={caption}
=======
>>>>>>> 6898d10 (feat: disable form submit when model is invalid (#826))
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -4786,7 +4810,10 @@ export default function MyFlexUpdateForm(props) {
label=\\"Profile url\\"
isRequired={false}
isReadOnly={false}
<<<<<<< HEAD
value={profile_url}
=======
>>>>>>> 6898d10 (feat: disable form submit when model is invalid (#826))
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -4818,51 +4845,49 @@ export default function MyFlexUpdateForm(props) {

exports[`amplify form renderer tests datastore form tests should render a create form with colliding model name 2`] = `
"import * as React from \\"react\\";
import { Flex as Flex0 } from \\"../models\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { GridProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
export declare type ValidationResponse = {
hasError: boolean;
errorMessage?: string;
};
export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
export declare type MyFlexUpdateFormInputValues = {
export declare type MyFlexCreateFormInputValues = {
username?: string;
caption?: string;
Customtags?: string[];
tags?: string[];
profile_url?: string;
};
export declare type MyFlexUpdateFormValidationValues = {
export declare type MyFlexCreateFormValidationValues = {
username?: ValidationFunction<string>;
caption?: ValidationFunction<string>;
Customtags?: ValidationFunction<string>;
tags?: ValidationFunction<string>;
profile_url?: ValidationFunction<string>;
};
export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type MyFlexUpdateFormOverridesProps = {
MyFlexUpdateFormGrid?: FormProps<GridProps>;
export declare type MyFlexCreateFormOverridesProps = {
MyFlexCreateFormGrid?: FormProps<GridProps>;
RowGrid0?: FormProps<GridProps>;
username?: FormProps<TextFieldProps>;
caption?: FormProps<TextFieldProps>;
Customtags?: FormProps<TextFieldProps>;
tags?: FormProps<TextFieldProps>;
profile_url?: FormProps<TextFieldProps>;
} & EscapeHatchProps;
export declare type MyFlexUpdateFormProps = React.PropsWithChildren<{
overrides?: MyFlexUpdateFormOverridesProps | undefined | null;
export declare type MyFlexCreateFormProps = React.PropsWithChildren<{
overrides?: MyFlexCreateFormOverridesProps | undefined | null;
} & {
id?: string;
flex?: Flex0;
onSubmit?: (fields: MyFlexUpdateFormInputValues) => MyFlexUpdateFormInputValues;
onSuccess?: (fields: MyFlexUpdateFormInputValues) => void;
onError?: (fields: MyFlexUpdateFormInputValues, errorMessage: string) => void;
clearOnSuccess?: boolean;
onSubmit?: (fields: MyFlexCreateFormInputValues) => MyFlexCreateFormInputValues;
onSuccess?: (fields: MyFlexCreateFormInputValues) => void;
onError?: (fields: MyFlexCreateFormInputValues, errorMessage: string) => void;
onCancel?: () => void;
onChange?: (fields: MyFlexUpdateFormInputValues) => MyFlexUpdateFormInputValues;
onValidate?: MyFlexUpdateFormValidationValues;
onChange?: (fields: MyFlexCreateFormInputValues) => MyFlexCreateFormInputValues;
onValidate?: MyFlexCreateFormValidationValues;
} & React.CSSProperties>;
export default function MyFlexUpdateForm(props: MyFlexUpdateFormProps): React.ReactElement;
export default function MyFlexCreateForm(props: MyFlexCreateFormProps): React.ReactElement;
"
`;

Expand Down Expand Up @@ -7080,10 +7105,15 @@ export default function InputGalleryUpdateForm(props) {
<Button
children=\\"Reset\\"
type=\\"reset\\"
<<<<<<< HEAD
onClick={(event) => {
event.preventDefault();
resetStateValues();
}}
=======
onClick={resetStateValues}
isDisabled={!(id || inputGallery)}
>>>>>>> 6898d10 (feat: disable form submit when model is invalid (#826))
{...getOverrideProps(overrides, \\"ResetButton\\")}
></Button>
<Flex
Expand All @@ -7102,7 +7132,10 @@ export default function InputGalleryUpdateForm(props) {
children=\\"Submit\\"
type=\\"submit\\"
variation=\\"primary\\"
isDisabled={Object.values(errors).some((e) => e?.hasError)}
isDisabled={
!(id || inputGallery) ||
Object.values(errors).some((e) => e?.hasError)
}
{...getOverrideProps(overrides, \\"SubmitButton\\")}
></Button>
</Flex>
Expand Down
Loading

0 comments on commit 810a595

Please sign in to comment.