fix: createDatastorePredicate call was added (#166)

aws-amplify · Oct 28, 2021 · fbee20c · fbee20c
1 parent 325e26c
commit fbee20c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 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
@@ -178,12 +178,13 @@ export default function CollectionOfCustomButtons(
     ...rest
   } = props;
   const overrides = { ...overridesProp };
-  const buttonUserFilter = {
+  const buttonUserFilterObj = {
     and: [
       { field: \\"age\\", operand: \\"10\\", operator: \\"gt\\" },
       { field: \\"lastName\\", operand: \\"L\\", operator: \\"beginsWith\\" },
     ],
   };
+  const buttonUserFilter = createDataStorePredicate(buttonUserFilterObj);
   const buttonUser =
     items !== undefined
       ? items
@@ -192,11 +193,12 @@ export default function CollectionOfCustomButtons(
           model: User,
           criteria: buttonUserFilter,
         }).items;
-  const buttonColorFilter = {
+  const buttonColorFilterObj = {
     field: \\"userID\\",
     operand: \\"user@email.com\\",
     operator: \\"eq\\",
   };
+  const buttonColorFilter = createDataStorePredicate(buttonColorFilterObj);
   const { item: buttonColor } = useDataStoreBinding({
     type: \\"record\\",
     model: UserPreferences,
@@ -266,12 +268,13 @@ export default function CollectionOfCustomButtons(
     ...rest
   } = props;
   const overrides = { ...overridesProp };
-  const buttonUserFilter = {
+  const buttonUserFilterObj = {
     and: [
       { field: \\"age\\", operand: \\"10\\", operator: \\"gt\\" },
       { field: \\"lastName\\", operand: \\"L\\", operator: \\"beginsWith\\" },
     ],
   };
+  const buttonUserFilter = createDataStorePredicate(buttonUserFilterObj);
   const buttonUserPagination = {
     sort: (s) =>
       s.firstName(SortDirection.ASCENDING).lastName(SortDirection.DESCENDING),
@@ -285,11 +288,12 @@ export default function CollectionOfCustomButtons(
           criteria: buttonUserFilter,
           pagination: buttonUserPagination,
         }).items;
-  const buttonColorFilter = {
+  const buttonColorFilterObj = {
     field: \\"userID\\",
     operand: \\"user@email.com\\",
     operator: \\"eq\\",
   };
+  const buttonColorFilter = createDataStorePredicate(buttonColorFilterObj);
   const { item: buttonColor } = useDataStoreBinding({
     type: \\"record\\",
     model: UserPreferences,

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
@@ -641,6 +641,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
         const [propName, { model, sort, predicate }] = collectionProp;
         if (predicate) {
           statements.push(this.buildPredicateDeclaration(propName, predicate));
+          statements.push(this.buildCreateDataStorePredicateCall(propName));
         }
         if (sort) {
           this.importCollection.addImport('@aws-amplify/ui-react', 'SortDirection');
@@ -668,6 +669,25 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     return statements;
   }
 
+  private buildCreateDataStorePredicateCall(name: string): Statement {
+    return factory.createVariableStatement(
+      undefined,
+      factory.createVariableDeclarationList(
+        [
+          factory.createVariableDeclaration(
+            factory.createIdentifier(this.getFilterName(name)),
+            undefined,
+            undefined,
+            factory.createCallExpression(factory.createIdentifier('createDataStorePredicate'), undefined, [
+              factory.createIdentifier(this.getFilterObjName(name)),
+            ]),
+          ),
+        ],
+        ts.NodeFlags.Const,
+      ),
+    );
+  }
+
   private buildUseDataStoreBindingStatements(component: StudioComponent): Statement[] {
     const statements: Statement[] = [];
 
@@ -679,6 +699,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
           const { bindingProperties } = binding;
           if ('predicate' in bindingProperties && bindingProperties.predicate !== undefined) {
             statements.push(this.buildPredicateDeclaration(propName, bindingProperties.predicate));
+            statements.push(this.buildCreateDataStorePredicateCall(propName));
             const { model } = bindingProperties;
             this.importCollection.addImport('../models', model);
             statements.push(
@@ -912,7 +933,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
       factory.createVariableDeclarationList(
         [
           factory.createVariableDeclaration(
-            factory.createIdentifier(this.getFilterName(name)),
+            factory.createIdentifier(this.getFilterObjName(name)),
             undefined,
             undefined,
             this.predicateToObjectLiteralExpression(predicate),
@@ -927,6 +948,10 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     return `${propName}Pagination`;
   }
 
+  private getFilterObjName(propName: string): string {
+    return `${propName}FilterObj`;
+  }
+
   private getFilterName(propName: string): string {
     return `${propName}Filter`;
   }