From f9dca56922e0f67e6b2a5192bbed031dcb3e536b Mon Sep 17 00:00:00 2001 From: swaysway <7465495+SwaySway@users.noreply.github.com> Date: Fri, 29 Jul 2022 21:26:38 +0000 Subject: [PATCH] fix: onSubmit for custom forms --- ...studio-ui-codegen-react-forms.test.ts.snap | 18 +- .../__utils__/amplify-renderer-generator.ts | 37 ++- .../studio-ui-codegen-react-forms.test.ts | 33 +-- .../lib/amplify-ui-renderers/form.ts | 253 ++++++++++-------- .../lib/forms/form-renderer-helper.ts | 2 +- 5 files changed, 181 insertions(+), 162 deletions(-) diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap index 9fa720874..f959bc8ce 100644 --- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap +++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap @@ -9,7 +9,6 @@ import { useStateMutationAction, } from \\"@aws-amplify/ui-react/internal\\"; import { Button, Flex, Grid, TextField } from \\"@aws-amplify/ui-react\\"; -import { DataStore } from \\"aws-amplify\\"; export default function customDataForm(props) { const { onSubmit: customDataFormOnSubmit, @@ -26,22 +25,7 @@ export default function customDataForm(props) {
{ event.preventDefault(); - if (onSubmitBefore) { - setModelFields(onSubmitBefore({ fields: modelFields })); - } - try { - await DataStore.save(new Post(modelFields)); - if (onSubmitComplete) { - onSubmitComplete({ saveSuccessful: true }); - } - } catch (err) { - if (onSubmitComplete) { - onSubmitComplete({ - saveSuccessful: false, - errorMessage: err.message, - }); - } - } + await customDataFormOnSubmit(modelFields); }} {...rest} {...getOverrideProps(overrides, \\"customDataForm\\")} diff --git a/packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts b/packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts index 8e8b2aad4..8dfd01e64 100644 --- a/packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts +++ b/packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts @@ -13,11 +13,26 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { StudioTemplateRendererFactory, GenericDataSchema, StudioComponent } from '@aws-amplify/codegen-ui'; +import { + StudioTemplateRendererFactory, + GenericDataSchema, + StudioComponent, + getGenericFromDataStore, + Schema, + StudioForm, +} from '@aws-amplify/codegen-ui'; +import { AmplifyFormRenderer } from '../../amplify-ui-renderers/amplify-form-renderer'; import { AmplifyRenderer } from '../../amplify-ui-renderers/amplify-renderer'; -import { ReactRenderConfig } from '../../react-render-config'; +import { ModuleKind, ReactRenderConfig, ScriptKind, ScriptTarget } from '../../react-render-config'; import { loadSchemaFromJSONFile } from './example-schema'; +export const defaultCLIRenderConfig: ReactRenderConfig = { + module: ModuleKind.ES2020, + target: ScriptTarget.ES2020, + script: ScriptKind.JSX, + renderTypeDeclarations: true, +}; + export const generateWithAmplifyRenderer = ( jsonSchemaFile: string, renderConfig: ReactRenderConfig = {}, @@ -32,3 +47,21 @@ export const generateWithAmplifyRenderer = ( ? { componentText: renderer.renderSampleCodeSnippet().compText } : renderer.renderComponent(); }; + +export const generateWithAmplifyFormRenderer = ( + formJsonFile: string, + dataSchemaJsonFile: string | undefined, + renderConfig: ReactRenderConfig = defaultCLIRenderConfig, +): { componentText: string; declaration?: string } => { + let dataSchema: GenericDataSchema | undefined; + if (dataSchemaJsonFile) { + const dataStoreSchema = loadSchemaFromJSONFile(dataSchemaJsonFile); + dataSchema = getGenericFromDataStore(dataStoreSchema); + } + const rendererFactory = new StudioTemplateRendererFactory( + (component: StudioForm) => new AmplifyFormRenderer(component, dataSchema, renderConfig), + ); + + const renderer = rendererFactory.buildRenderer(loadSchemaFromJSONFile(formJsonFile)); + return renderer.renderComponent(); +}; diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts index 01edf7488..608e6e372 100644 --- a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts +++ b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts @@ -13,36 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. */ - -import { StudioTemplateRendererFactory } from '@aws-amplify/codegen-ui/lib/template-renderer-factory'; -import { StudioForm, Schema, GenericDataSchema, getGenericFromDataStore } from '@aws-amplify/codegen-ui'; -import { ReactRenderConfig, AmplifyFormRenderer, ModuleKind, ScriptKind, ScriptTarget } from '..'; -import { loadSchemaFromJSONFile } from './__utils__'; - -export const defaultCLIRenderConfig: ReactRenderConfig = { - module: ModuleKind.ES2020, - target: ScriptTarget.ES2020, - script: ScriptKind.JSX, - renderTypeDeclarations: true, -}; - -export const generateWithAmplifyFormRenderer = ( - formJsonFile: string, - dataSchemaJsonFile: string | undefined, - renderConfig: ReactRenderConfig = defaultCLIRenderConfig, -): { componentText: string; declaration?: string } => { - let dataSchema: GenericDataSchema | undefined; - if (dataSchemaJsonFile) { - const dataStoreSchema = loadSchemaFromJSONFile(dataSchemaJsonFile); - dataSchema = getGenericFromDataStore(dataStoreSchema); - } - const rendererFactory = new StudioTemplateRendererFactory( - (component: StudioForm) => new AmplifyFormRenderer(component, dataSchema, renderConfig), - ); - - const renderer = rendererFactory.buildRenderer(loadSchemaFromJSONFile(formJsonFile)); - return renderer.renderComponent(); -}; +import { generateWithAmplifyFormRenderer } from './__utils__'; describe('amplify form renderer tests', () => { describe('datastore form tests', () => { @@ -70,7 +41,7 @@ describe('amplify form renderer tests', () => { describe('custom form tests', () => { it('should render a custom backed form', () => { const { componentText, declaration } = generateWithAmplifyFormRenderer('forms/post-custom-create', undefined); - expect(componentText.replace(/\s/g, '')).toContain('setModelFields(onSubmitBefore'); + expect(componentText.replace(/\s/g, '')).toContain('onSubmit:customDataFormOnSubmit'); expect(componentText).toMatchSnapshot(); expect(declaration).toMatchSnapshot(); }); diff --git a/packages/codegen-ui-react/lib/amplify-ui-renderers/form.ts b/packages/codegen-ui-react/lib/amplify-ui-renderers/form.ts index 324aa2cec..f245b2238 100644 --- a/packages/codegen-ui-react/lib/amplify-ui-renderers/form.ts +++ b/packages/codegen-ui-react/lib/amplify-ui-renderers/form.ts @@ -21,10 +21,11 @@ import { StudioForm, StudioNode, } from '@aws-amplify/codegen-ui'; -import { factory, JsxAttribute, JsxChild, JsxElement, JsxOpeningElement, SyntaxKind } from 'typescript'; +import { factory, JsxAttribute, JsxChild, JsxElement, JsxOpeningElement, Statement, SyntaxKind } from 'typescript'; import { ReactComponentRenderer } from '../react-component-renderer'; import { buildOpeningElementProperties } from '../react-component-render-helper'; import { ImportCollection } from '../imports'; +import { getActionIdentifier } from '../workflow'; export default class FormRenderer extends ReactComponentRenderer { constructor( @@ -47,7 +48,9 @@ export default class FormRenderer extends ReactComponentRenderer { factory.createBindingElement( undefined, factory.createIdentifier('onSubmit'), - getActionIdentifier(form.name, 'onSubmit'), + getActionIdentifier(form.name, 'onSubmit'), // custom onsubmit function with the name of the form undefined, ), );