feat: replacing dependency on helper for collections sort with inline…

… sort function
aws-amplify · Oct 12, 2021 · 0d0df62 · 0d0df62
1 parent 1fae3c8
commit 0d0df62
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 46 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
@@ -260,7 +260,7 @@ import {
   Collection,
   EscapeHatchProps,
   Flex,
-  convertSortPredicatesToDataStore,
+  SortDirection,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
 
@@ -283,12 +283,9 @@ export default function CollectionOfCustomButtons(
       { field: \\"lastName\\", operand: \\"L\\", operator: \\"beginsWith\\" },
     ],
   };
-  const buttonUserSort = convertSortPredicatesToDataStore([
-    { field: \\"firstName\\", direction: \\"ASC\\" },
-    { field: \\"lastName\\", direction: \\"DESC\\" },
-  ]);
   const buttonUserPagination = {
-    sort: buttonUserSort,
+    sort: (s) =>
+      s.firstName(SortDirection.ASCENDING).lastName(SortDirection.DESCENDING),
   };
   const buttonUser =
     items !== undefined

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
@@ -35,6 +35,7 @@ import ts, {
   CallExpression,
   Identifier,
   ComputedPropertyName,
+  ArrowFunction,
 } from 'typescript';
 import { ImportCollection } from './import-collection';
 import { ReactOutputManager } from './react-output-manager';
@@ -625,11 +626,8 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
           statements.push(this.buildPredicateDeclaration(propName, predicate));
         }
         if (sort) {
-          this.importCollection.addImport('@aws-amplify/ui-react', 'convertSortPredicatesToDataStore');
-          statements.push(
-            this.buildSortStatement(propName, sort),
-            this.buildPaginationStatement(propName, this.getSortName(propName)),
-          );
+          this.importCollection.addImport('@aws-amplify/ui-react', 'SortDirection');
+          statements.push(this.buildPaginationStatement(propName, sort));
         }
         this.importCollection.addImport('../models', model);
         statements.push(
@@ -727,55 +725,73 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     );
   }
 
-  private buildSortStatement(propName: string, sort: StudioComponentSort[]): VariableStatement {
+  /**
+   * const buttonUserSort = {
+   *   sort: s => s.firstName('DESCENDING').lastName('ASCENDING')
+   * }
+   */
+  private buildPaginationStatement(propName: string, sort?: StudioComponentSort[]): VariableStatement {
     return factory.createVariableStatement(
       undefined,
       factory.createVariableDeclarationList(
         [
           factory.createVariableDeclaration(
-            factory.createIdentifier(this.getSortName(propName)),
+            factory.createIdentifier(this.getPaginationName(propName)),
             undefined,
             undefined,
-            this.buildConvertSortPredicatesToDataStoreCall(sort),
+            factory.createObjectLiteralExpression(
+              ([] as ts.PropertyAssignment[]).concat(
+                sort
+                  ? [factory.createPropertyAssignment(factory.createIdentifier('sort'), this.buildSortFunction(sort))]
+                  : [],
+              ),
+            ),
           ),
         ],
         ts.NodeFlags.Const,
       ),
     );
   }
 
-  private buildConvertSortPredicatesToDataStoreCall(sort: StudioComponentSort[]): CallExpression {
-    const sortExpressions = sort.map(({ field, direction }) =>
-      factory.createObjectLiteralExpression([
-        factory.createPropertyAssignment(factory.createIdentifier('field'), factory.createStringLiteral(field)),
-        factory.createPropertyAssignment(factory.createIdentifier('direction'), factory.createStringLiteral(direction)),
-      ]),
+  /**
+   * s => s.firstName('ASCENDING').lastName('DESCENDING')
+   */
+  private buildSortFunction(sort: StudioComponentSort[]): ArrowFunction {
+    const ascendingSortDirection = factory.createPropertyAccessExpression(
+      factory.createIdentifier('SortDirection'),
+      factory.createIdentifier('ASCENDING'),
+    );
+    const descendingSortDirection = factory.createPropertyAccessExpression(
+      factory.createIdentifier('SortDirection'),
+      factory.createIdentifier('DESCENDING'),
     );
 
-    return factory.createCallExpression(factory.createIdentifier('convertSortPredicatesToDataStore'), undefined, [
-      factory.createArrayLiteralExpression(sortExpressions, true),
-    ]);
-  }
+    let expr: Identifier | CallExpression = factory.createIdentifier('s');
+    sort.forEach((sortPredicate) => {
+      expr = factory.createCallExpression(
+        factory.createPropertyAccessExpression(expr, factory.createIdentifier(sortPredicate.field)),
+        undefined,
+        [sortPredicate.direction === 'ASC' ? ascendingSortDirection : descendingSortDirection],
+      );
+    });
 
-  private buildPaginationStatement(propName: string, sortName?: string): VariableStatement {
-    const paginationProperties = ([] as ts.PropertyAssignment[]).concat(
-      sortName
-        ? [factory.createPropertyAssignment(factory.createIdentifier('sort'), factory.createIdentifier(sortName))]
-        : [],
-    );
-    return factory.createVariableStatement(
+    return factory.createArrowFunction(
       undefined,
-      factory.createVariableDeclarationList(
-        [
-          factory.createVariableDeclaration(
-            factory.createIdentifier(this.getPaginationName(propName)),
-            undefined,
-            undefined,
-            factory.createObjectLiteralExpression(paginationProperties, true),
-          ),
-        ],
-        ts.NodeFlags.Const,
-      ),
+      undefined,
+      [
+        factory.createParameterDeclaration(
+          undefined,
+          undefined,
+          undefined,
+          factory.createIdentifier('s'),
+          undefined,
+          undefined,
+          undefined,
+        ),
+      ],
+      undefined,
+      factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken),
+      expr,
     );
   }
 
@@ -850,10 +866,6 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     );
   }
 
-  private getSortName(propName: string): string {
-    return `${propName}Sort`;
-  }
-
   private getPaginationName(propName: string): string {
     return `${propName}Pagination`;
   }