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 committed Dec 9, 2022
1 parent 7e68a65 commit 6898d10
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 93 deletions.
87 changes: 40 additions & 47 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 @@ -3977,6 +3977,7 @@ export default function MyPostForm(props) {
children=\\"Reset\\"
type=\\"reset\\"
onClick={resetStateValues}
isDisabled={!(id || post)}
{...getOverrideProps(overrides, \\"ResetButton\\")}
></Button>
<Flex
Expand All @@ -3995,7 +3996,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 @@ -4182,6 +4185,7 @@ export default function MyPostForm(props) {
children=\\"Reset\\"
type=\\"reset\\"
onClick={resetStateValues}
isDisabled={!(id || post)}
{...getOverrideProps(overrides, \\"ResetButton\\")}
></Button>
<Flex
Expand All @@ -4200,7 +4204,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 @@ -4413,10 +4419,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 @@ -4442,25 +4447,15 @@ export default function MyFlexUpdateForm(props) {
);
const [errors, setErrors] = React.useState({});
const resetStateValues = () => {
const cleanValues = { ...initialValues, ...flexRecord };
setUsername(cleanValues.username);
setCaption(cleanValues.caption);
setCustomtags(cleanValues.Customtags ?? []);
setUsername(initialValues.username);
setCaption(initialValues.caption);
setCustomtags(initialValues.Customtags);
setCurrentCustomtagsValue(undefined);
setTags(cleanValues.tags ?? []);
setTags(initialValues.tags);
setCurrentTagsValue(undefined);
setProfile_url(cleanValues.profile_url);
setProfile_url(initialValues.profile_url);
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(undefined);
const CustomtagsRef = React.createRef();
Expand Down Expand Up @@ -4526,32 +4521,31 @@ 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\\"
onClick={resetStateValues}
{...getOverrideProps(overrides, \\"ResetButton\\")}
{...getOverrideProps(overrides, \\"ClearButton\\")}
></Button>
<Flex
gap=\\"15px\\"
Expand Down Expand Up @@ -4585,7 +4579,6 @@ export default function MyFlexUpdateForm(props) {
isRequired={false}
isReadOnly={false}
placeholder=\\"john\\"
defaultValue={username}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -4614,7 +4607,6 @@ export default function MyFlexUpdateForm(props) {
isRequired={false}
isReadOnly={false}
placeholder=\\"i love code\\"
defaultValue={caption}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -4732,7 +4724,6 @@ export default function MyFlexUpdateForm(props) {
label=\\"Profile url\\"
isRequired={false}
isReadOnly={false}
defaultValue={profile_url}
onChange={(e) => {
let { value } = e.target;
if (onChange) {
Expand Down Expand Up @@ -4764,51 +4755,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 @@ -6993,6 +6982,7 @@ export default function InputGalleryUpdateForm(props) {
children=\\"Reset\\"
type=\\"reset\\"
onClick={resetStateValues}
isDisabled={!(id || inputGallery)}
{...getOverrideProps(overrides, \\"ResetButton\\")}
></Button>
<Flex
Expand All @@ -7011,7 +7001,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

0 comments on commit 6898d10

Please sign in to comment.