The Amplify Component

ProblemReport.jsx

/***************************************************************************
 * 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>
    );
}