From 5b053772e3e018957c47c28962d09f843bdaad84 Mon Sep 17 00:00:00 2001
From: Josue Ruiz <7465495+SwaySway@users.noreply.github.com>
Date: Wed, 9 Mar 2022 13:34:26 -0800
Subject: [PATCH] fix: remove hook from conditional statement (#455)

---
 .../studio-ui-codegen-react.test.ts.snap      | 68 ++++++++-----------
 .../lib/react-studio-template-renderer.ts     | 52 +++++++++++---
 2 files changed, 70 insertions(+), 50 deletions(-)

diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
index 43337c0ac..1be98afa8 100644
--- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
+++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -617,14 +617,12 @@ export default function CollectionOfCustomButtons(
     ],
   };
   const buttonUserFilter = createDataStorePredicate<User>(buttonUserFilterObj);
-  const buttonUser =
-    items !== undefined
-      ? items
-      : useDataStoreBinding({
-          type: \\"collection\\",
-          model: User,
-          criteria: buttonUserFilter,
-        }).items;
+  const buttonUserDataStore = useDataStoreBinding({
+    type: \\"collection\\",
+    model: User,
+    criteria: buttonUserFilter,
+  }).items;
+  const buttonUser = items !== undefined ? items : buttonUserDataStore;
   const buttonColorFilterObj = {
     field: \\"userID\\",
     operand: \\"user@email.com\\",
@@ -723,15 +721,13 @@ export default function CollectionOfCustomButtons(
     sort: (s: SortPredicate<User>) =>
       s.firstName(SortDirection.ASCENDING).lastName(SortDirection.DESCENDING),
   };
-  const buttonUser =
-    items !== undefined
-      ? items
-      : useDataStoreBinding({
-          type: \\"collection\\",
-          model: User,
-          criteria: buttonUserFilter,
-          pagination: buttonUserPagination,
-        }).items;
+  const buttonUserDataStore = useDataStoreBinding({
+    type: \\"collection\\",
+    model: User,
+    criteria: buttonUserFilter,
+    pagination: buttonUserPagination,
+  }).items;
+  const buttonUser = items !== undefined ? items : buttonUserDataStore;
   const buttonColorFilterObj = {
     field: \\"userID\\",
     operand: \\"user@email.com\\",
@@ -827,14 +823,12 @@ export default function CollectionOfCustomButtons(
     ],
   };
   const itemsFilter = createDataStorePredicate<User>(itemsFilterObj);
-  const items =
-    itemsProp !== undefined
-      ? itemsProp
-      : useDataStoreBinding({
-          type: \\"collection\\",
-          model: User,
-          criteria: itemsFilter,
-        }).items;
+  const itemsDataStore = useDataStoreBinding({
+    type: \\"collection\\",
+    model: User,
+    criteria: itemsFilter,
+  }).items;
+  const items = itemsProp !== undefined ? itemsProp : itemsDataStore;
   const buttonColorFilterObj = {
     field: \\"userID\\",
     operand: \\"user@email.com\\",
@@ -904,13 +898,11 @@ export default function ListingCardCollection(
   props: ListingCardCollectionProps
 ): React.ReactElement {
   const { items, overrideItems, overrides, ...rest } = props;
-  const bananas =
-    items !== undefined
-      ? items
-      : useDataStoreBinding({
-          type: \\"collection\\",
-          model: UntitledModel,
-        }).items;
+  const bananasDataStore = useDataStoreBinding({
+    type: \\"collection\\",
+    model: UntitledModel,
+  }).items;
+  const bananas = items !== undefined ? items : bananasDataStore;
   return (
     /* @ts-ignore: TS2322 */
     <Collection
@@ -5021,13 +5013,11 @@ export default function CollectionDefaultValue(
   props: CollectionDefaultValueProps
 ): React.ReactElement {
   const { items, overrideItems, overrides, ...rest } = props;
-  const user =
-    items !== undefined
-      ? items
-      : useDataStoreBinding({
-          type: \\"collection\\",
-          model: User,
-        }).items;
+  const userDataStore = useDataStoreBinding({
+    type: \\"collection\\",
+    model: User,
+  }).items;
+  const user = items !== undefined ? items : userDataStore;
   return (
     /* @ts-ignore: TS2322 */
     <Collection
diff --git a/packages/codegen-ui-react/lib/react-studio-template-renderer.ts b/packages/codegen-ui-react/lib/react-studio-template-renderer.ts
index ea131be14..b4cecfda3 100644
--- a/packages/codegen-ui-react/lib/react-studio-template-renderer.ts
+++ b/packages/codegen-ui-react/lib/react-studio-template-renderer.ts
@@ -733,19 +733,45 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
           statements.push(this.buildPaginationStatement(propName, model, sort));
         }
         this.importCollection.addImport(ImportSource.LOCAL_MODELS, model);
+        /**
+         * const userDataStore = useDataStoreBinding({
+         *  type: "collection",
+         *  model: User,
+         *  ...
+         * }).items;
+         */
+        statements.push(
+          factory.createVariableStatement(
+            undefined,
+            factory.createVariableDeclarationList(
+              [
+                factory.createVariableDeclaration(
+                  factory.createIdentifier(this.getDataStoreName(propName)),
+                  undefined,
+                  undefined,
+                  factory.createPropertyAccessExpression(
+                    this.buildUseDataStoreBindingCall(
+                      'collection',
+                      model,
+                      predicate ? this.getFilterName(propName) : undefined,
+                      sort ? this.getPaginationName(propName) : undefined,
+                    ),
+                    factory.createIdentifier('items'),
+                  ),
+                ),
+              ],
+              ts.NodeFlags.Const,
+            ),
+          ),
+        );
+        /**
+         * const items = itemsProp !== undefined ? itemsProp : userDataStore;
+         */
         statements.push(
           this.buildPropPrecedentStatement(
             propName,
             this.hasCollectionPropertyNamedItems(component) ? 'itemsProp' : 'items',
-            factory.createPropertyAccessExpression(
-              this.buildUseDataStoreBindingCall(
-                'collection',
-                model,
-                predicate ? this.getFilterName(propName) : undefined,
-                sort ? this.getPaginationName(propName) : undefined,
-              ),
-              'items',
-            ),
+            factory.createIdentifier(this.getDataStoreName(propName)),
           ),
         );
       });
@@ -798,7 +824,8 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
             const { model } = bindingProperties;
             this.importCollection.addImport(ImportSource.LOCAL_MODELS, model);
 
-            /* const buttonColorDataStore = useDataStoreBinding({
+            /**
+             * const buttonColorDataStore = useDataStoreBinding({
              *   type: "collection"
              *   ...
              * }).items[0];
@@ -825,7 +852,10 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
                 ),
               ),
             );
-
+            /**
+             * const buttonColor =
+             *  buttonColorProp !== undefined ? buttonColorProp : buttonColorDataStore;
+             */
             statements.push(
               factory.createVariableStatement(
                 undefined,