From 5056880dbea34d928c43787123a693521eda9d24 Mon Sep 17 00:00:00 2001 From: Dane Pilcher Date: Wed, 29 Sep 2021 17:36:01 +0000 Subject: [PATCH] fix: collection binding with no predicate --- .../studio-ui-codegen-react.test.ts.snap | 54 ++++++++++++++++++ .../__tests__/studio-ui-codegen-react.test.ts | 5 ++ ...collectionWithBindingWithoutPredicate.json | 56 +++++++++++++++++++ .../lib/react-studio-template-renderer.ts | 56 +++++++++++-------- 4 files changed, 147 insertions(+), 24 deletions(-) create mode 100644 packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/collectionWithBindingWithoutPredicate.json diff --git a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap index 5569227eb..2972f9593 100644 --- a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap +++ b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap @@ -152,6 +152,60 @@ export default function CollectionOfCustomButtons( " `; +exports[`amplify render tests collection should render collection with data binding with no predicate 1`] = ` +"/* eslint-disable */ +import React from \\"react\\"; +import { + Collection, + EscapeHatchProps, + ListingCard, + findChildOverrides, + getOverrideProps, +} from \\"@aws-amplify/ui-react\\"; +import { UntitledModel } from \\"../models\\"; + +export type ListingCardCollectionProps = { + items?: any[], +} & { + overrides?: EscapeHatchProps | undefined | null, +}; +export default function ListingCardCollection( + props: ListingCardCollectionProps +): JSX.Element { + const { items } = props; + const displayedItems = + items !== undefined + ? items + : useDataStoreBinding({ + type: \\"collection\\", + model: UntitledModel, + }).bananas; + return ( + + {(item, index) => ( + + )} + + ); +} +" +`; + exports[`amplify render tests collection should render collection without data binding 1`] = ` "/* eslint-disable */ import React from \\"react\\"; diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts index 0f486a016..d8effb82b 100644 --- a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts +++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts @@ -102,6 +102,11 @@ describe('amplify render tests', () => { const generatedCode = generateWithAmplifyRenderer('collectionWithoutBinding'); expect(generatedCode).toMatchSnapshot(); }); + + it('should render collection with data binding with no predicate', () => { + const generatedCode = generateWithAmplifyRenderer('collectionWithBindingWithoutPredicate'); + expect(generatedCode).toMatchSnapshot(); + }); }); describe('component with binding', () => { diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/collectionWithBindingWithoutPredicate.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/collectionWithBindingWithoutPredicate.json new file mode 100644 index 000000000..d4b4688c9 --- /dev/null +++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/collectionWithBindingWithoutPredicate.json @@ -0,0 +1,56 @@ +{ + "name": "ListingCardCollection", + "children": [ + { + "children": [], + "name": "ListingCard", + "componentType": "ListingCard", + "properties": { + "marginRight": { + "value": "0" + }, + "marginBottom": { + "value": "0" + }, + "marginTop": { + "value": "0" + }, + "marginLeft": { + "value": "0" + } + }, + "overrides": {}, + "variants": [] + } + ], + "id": "c-7m9oAaC8SO0M40Pnvu", + "bindingProperties": {}, + "componentType": "Collection", + "properties": { + "isPaginated": { + "value": "true" + }, + "collectionType": { + "value": "grid" + }, + "type": { + "value": "list" + }, + "columns": { + "value": "2" + }, + "order": { + "value": "left-to-right" + } + }, + "overrides": {}, + "variants": [], + "collectionProperties": { + "bananas": { + "type": "Data", + "bindingProperties": { + "model": "UntitledModel" + } + } + } +} diff --git a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts index 624b4ab52..5f1348012 100644 --- a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts +++ b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts @@ -403,19 +403,23 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer const { bindingProperties } = binding; if ('predicate' in bindingProperties && bindingProperties.predicate !== undefined) { statements.push(this.buildPredicateDeclaration(propName, bindingProperties.predicate)); - const { model } = bindingProperties; - this.importCollection.addImport('../models', model); - statements.push( - this.buildPropPrecedentStatement( - 'displayedItems', - 'items', - factory.createPropertyAccessExpression( - this.buildUseDataStoreBindingCall('collection', propName, model), - factory.createIdentifier('buttonUser'), + } + const { model } = bindingProperties; + this.importCollection.addImport('../models', model); + statements.push( + this.buildPropPrecedentStatement( + 'displayedItems', + 'items', + factory.createPropertyAccessExpression( + this.buildUseDataStoreBindingCall( + 'collection', + model, + bindingProperties.predicate ? this.getFilterName(propName) : undefined, ), + factory.createIdentifier(propName), ), - ); - } + ), + ); } }); } @@ -447,7 +451,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer ]), undefined, undefined, - this.buildUseDataStoreBindingCall('record', propName, model), + this.buildUseDataStoreBindingCall('record', model, this.getFilterName(propName)), ), ], ts.NodeFlags.Const, @@ -492,19 +496,23 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer ); } - private buildUseDataStoreBindingCall(callType: string, propName: string, bindingModel: string): CallExpression { + private buildUseDataStoreBindingCall(callType: string, bindingModel: string, predicateName?: string): CallExpression { + const objectProperties = [ + factory.createPropertyAssignment(factory.createIdentifier('type'), factory.createStringLiteral(callType)), + factory.createPropertyAssignment(factory.createIdentifier('model'), factory.createIdentifier(bindingModel)), + ].concat( + predicateName + ? [ + factory.createPropertyAssignment( + factory.createIdentifier('criteria'), + factory.createIdentifier(predicateName), + ), + ] + : [], + ); + return factory.createCallExpression(factory.createIdentifier('useDataStoreBinding'), undefined, [ - factory.createObjectLiteralExpression( - [ - factory.createPropertyAssignment(factory.createIdentifier('type'), factory.createStringLiteral(callType)), - factory.createPropertyAssignment(factory.createIdentifier('model'), factory.createIdentifier(bindingModel)), - factory.createPropertyAssignment( - factory.createIdentifier('criteria'), - factory.createIdentifier(this.getFilterName(propName)), - ), - ], - true, - ), + factory.createObjectLiteralExpression(objectProperties, true), ]); }