fix: collection binding with no predicate (#98)

aws-amplify · Sep 29, 2021 · 3e38fcc · 3e38fcc
1 parent 0149ca2
commit 3e38fcc
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 24 deletions.
diff --git a/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/.../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 (
+    <Collection
+      isPaginated=\\"true\\"
+      collectionType=\\"grid\\"
+      type=\\"list\\"
+      columns=\\"2\\"
+      order=\\"left-to-right\\"
+      items={displayedItems}
+      {...props}
+      {...getOverrideProps(props.overrides, \\"Collection\\")}
+    >
+      {(item, index) => (
+        <ListingCard
+          marginRight=\\"0\\"
+          marginBottom=\\"0\\"
+          marginTop=\\"0\\"
+          marginLeft=\\"0\\"
+          {...findChildOverrides(props.overrides, \\"ListingCard\\")}
+        ></ListingCard>
+      )}
+    </Collection>
+  );
+}
+"
+`;
+
 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
@@ -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/...-ui-codegen-react/lib/__tests__/studio-ui-json/collectionWithBindingWithoutPredicate.json b/...-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
@@ -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),
     ]);
   }