STILL BROKEN: Refactored some forms to have bare functionality. Appears that v4 antd has extensive issues.

This commit is contained in:
Patrick Fic
2020-02-28 15:55:31 -08:00
parent 93be1417be
commit 6e0d9da257
24 changed files with 986 additions and 1198 deletions

View File

@@ -19,7 +19,8 @@ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
function VendorsFormContainer({ vendorId, refetch, bodyshop }) {
const [form] = Form.useForm();
const { t } = useTranslation();
const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, {
variables: { id: vendorId },
@@ -45,61 +46,49 @@ function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
});
};
const handleSubmit = e => {
e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (err) {
notification["error"]({
message: t("jobs.errors.validationtitle"),
description: t("jobs.errors.validation")
const handleFinish = values => {
delete values.keys;
if (vendorId) {
//It's a vendor to update.
updateVendor({
variables: { id: vendorId, vendor: values }
})
.then(r => {
notification["success"]({
message: t("vendors.successes.saved")
});
//TODO Better way to reset the field decorators?
if (refetch) refetch().then(r => form.resetFields());
})
.catch(error => {
notification["error"]({
message: t("vendors.errors.saving")
});
});
}
if (!err) {
console.log("Received values of form: ", values);
delete values.keys;
if (vendorId) {
//It's a vendor to update.
updateVendor({
variables: { id: vendorId, vendor: values }
})
.then(r => {
notification["success"]({
message: t("vendors.successes.saved")
});
//TODO Better way to reset the field decorators?
if (refetch) refetch().then(r => form.resetFields());
})
.catch(error => {
notification["error"]({
message: t("vendors.errors.saving")
});
});
} else {
//It's a new vendor to insert.
insertvendor({
variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] }
})
.then(r => {
notification["success"]({
message: t("vendors.successes.saved")
});
//TODO Better way to reset the field decorators?
if (refetch) refetch().then(r => form.resetFields());
})
.catch(error => {
notification["error"]({
message: t("vendors.errors.saving")
});
});
}
}
});
} else {
//It's a new vendor to insert.
insertvendor({
variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] }
})
.then(r => {
notification["success"]({
message: t("vendors.successes.saved")
});
//TODO Better way to reset the field decorators?
if (refetch) refetch().then(r => form.resetFields());
})
.catch(error => {
notification["error"]({
message: t("vendors.errors.saving")
});
});
}
};
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<Form onSubmit={handleSubmit} autoComplete="new-password">
<Form onFinish={handleFinish} form={form} autoComplete="new-password">
{data ? (
<VendorsFormComponent
form={form}
@@ -112,7 +101,4 @@ function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
</Form>
);
}
export default connect(
mapStateToProps,
null
)(Form.create({ name: "VendorsFormContainer" })(VendorsFormContainer));
export default connect(mapStateToProps, null)(VendorsFormContainer);