Skip to content

Instantly share code, notes, and snippets.

@gamename
Created July 17, 2023 11:35
Show Gist options
  • Save gamename/e8eb66fc4a62b9219efa4019ec08ae91 to your computer and use it in GitHub Desktop.
Save gamename/e8eb66fc4a62b9219efa4019ec08ae91 to your computer and use it in GitHub Desktop.
The Amplify Component
/***************************************************************************
* The contents of this file were generated with Amplify Studio. *
* Please refrain from making any modifications to this file. *
* Any changes to this file will be overwritten when running amplify pull. *
**************************************************************************/
/* eslint-disable */
import * as React from "react";
import {Button, Flex, Grid, Heading, TextAreaField, TextField, useTheme,} from "@aws-amplify/ui-react";
import {getOverrideProps} from "@aws-amplify/ui-react/internal";
import {fetchByPath, validateField} from "./utils";
export default function ProblemReport(props) {
const {onSubmit, onCancel, onValidate, onChange, overrides, ...rest} =
props;
const {tokens} = useTheme();
const initialValues = {
Field0: "",
Field1: "",
Field2: "",
};
const [Field0, setField0] = React.useState(initialValues.Field0);
const [Field1, setField1] = React.useState(initialValues.Field1);
const [Field2, setField2] = React.useState(initialValues.Field2);
const [errors, setErrors] = React.useState({});
const resetStateValues = () => {
setField0(initialValues.Field0);
setField1(initialValues.Field1);
setField2(initialValues.Field2);
setErrors({});
};
const validations = {
Field0: [],
Field1: [{type: "Email"}],
Field2: [],
};
const runValidationTasks = async (
fieldName,
currentValue,
getDisplayValue
) => {
const value =
currentValue && getDisplayValue
? getDisplayValue(currentValue)
: currentValue;
let validationResponse = validateField(value, validations[fieldName]);
const customValidator = fetchByPath(onValidate, fieldName);
if (customValidator) {
validationResponse = await customValidator(value, validationResponse);
}
setErrors((errors) => ({...errors, [fieldName]: validationResponse}));
return validationResponse;
};
return (
<Grid
as="form"
rowGap={tokens.space.large.value}
columnGap={tokens.space.large.value}
padding={tokens.space.large.value}
onSubmit={async (event) => {
event.preventDefault();
const modelFields = {
Field0,
Field1,
Field2,
};
const validationResponses = await Promise.all(
Object.keys(validations).reduce((promises, fieldName) => {
if (Array.isArray(modelFields[fieldName])) {
promises.push(
...modelFields[fieldName].map((item) =>
runValidationTasks(fieldName, item)
)
);
return promises;
}
promises.push(
runValidationTasks(fieldName, modelFields[fieldName])
);
return promises;
}, [])
);
if (validationResponses.some((r) => r.hasError)) {
return;
}
await onSubmit(modelFields);
}}
{...getOverrideProps(overrides, "ProblemReport")}
{...rest}
>
<Heading
children="Problem Reporting"
{...getOverrideProps(overrides, "SectionalElement0")}
></Heading>
<TextField
label="Name (optional)"
value={Field0}
onChange={(e) => {
let {value} = e.target;
if (onChange) {
const modelFields = {
Field0: value,
Field1,
Field2,
};
const result = onChange(modelFields);
value = result?.Field0 ?? value;
}
if (errors.Field0?.hasError) {
runValidationTasks("Field0", value);
}
setField0(value);
}}
onBlur={() => runValidationTasks("Field0", Field0)}
errorMessage={errors.Field0?.errorMessage}
hasError={errors.Field0?.hasError}
{...getOverrideProps(overrides, "Field0")}
></TextField>
<TextField
label="Email (optional)"
value={Field1}
onChange={(e) => {
let {value} = e.target;
if (onChange) {
const modelFields = {
Field0,
Field1: value,
Field2,
};
const result = onChange(modelFields);
value = result?.Field1 ?? value;
}
if (errors.Field1?.hasError) {
runValidationTasks("Field1", value);
}
setField1(value);
}}
onBlur={() => runValidationTasks("Field1", Field1)}
errorMessage={errors.Field1?.errorMessage}
hasError={errors.Field1?.hasError}
{...getOverrideProps(overrides, "Field1")}
></TextField>
<TextAreaField
label="Description"
isRequired={false}
onChange={(e) => {
let {value} = e.target;
if (onChange) {
const modelFields = {
Field0,
Field1,
Field2: value,
};
const result = onChange(modelFields);
value = result?.Field2 ?? value;
}
if (errors.Field2?.hasError) {
runValidationTasks("Field2", value);
}
setField2(value);
}}
onBlur={() => runValidationTasks("Field2", Field2)}
errorMessage={errors.Field2?.errorMessage}
hasError={errors.Field2?.hasError}
{...getOverrideProps(overrides, "Field2")}
></TextAreaField>
<Flex
justifyContent="space-between"
{...getOverrideProps(overrides, "CTAFlex")}
>
<Flex
gap={tokens.space.large.value}
{...getOverrideProps(overrides, "RightAlignCTASubFlex")}
>
<Button
children="Cancel"
type="button"
onClick={() => {
onCancel && onCancel();
}}
{...getOverrideProps(overrides, "CancelButton")}
></Button>
<Button
children="Submit"
type="submit"
variation="primary"
isDisabled={Object.values(errors).some((e) => e?.hasError)}
{...getOverrideProps(overrides, "SubmitButton")}
></Button>
</Flex>
</Flex>
</Grid>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment