From 904fc3c93857ed8a07bc890a638a000700590132 Mon Sep 17 00:00:00 2001
From: sagar davara <sagardspeed2@gmail.com>
Date: Wed, 5 Feb 2025 20:11:20 +0530
Subject: [PATCH] fix: added support for bindings in invokeAPI

---
 .changeset/plenty-mangos-walk.md              |  6 +++
 packages/framework/src/api/data.ts            |  9 ++++-
 .../hooks/__tests__/useInvokeApi.test.tsx     | 40 +++++++++++++++++++
 .../src/runtime/hooks/useEnsembleAction.tsx   | 11 ++---
 4 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/plenty-mangos-walk.md

diff --git a/.changeset/plenty-mangos-walk.md b/.changeset/plenty-mangos-walk.md
new file mode 100644
index 000000000..d298d578e
--- /dev/null
+++ b/.changeset/plenty-mangos-walk.md
@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-framework": patch
+"@ensembleui/react-runtime": patch
+---
+
+Added support for bindings in invokeAPI
diff --git a/packages/framework/src/api/data.ts b/packages/framework/src/api/data.ts
index 5efd9d124..924b6a283 100644
--- a/packages/framework/src/api/data.ts
+++ b/packages/framework/src/api/data.ts
@@ -11,6 +11,7 @@ import type {
 import { screenDataAtom, type ScreenContextDefinition } from "../state";
 import { isUsingMockResponse } from "../appConfig";
 import { mockResponse } from "../evaluate/mock";
+import { evaluateDeep } from "../evaluate";
 
 export const invokeAPI = async (
   apiName: string,
@@ -21,8 +22,14 @@ export const invokeAPI = async (
   setter?: Setter,
   options?: InvokeAPIOptions,
 ): Promise<Response | undefined> => {
+  const evaluated = evaluateDeep(
+    { apiName },
+    screenContext.model,
+    screenContext,
+  );
+
   const api = screenContext.model?.apis?.find(
-    (model) => model.name === apiName,
+    (model) => model.name === evaluated.apiName,
   );
 
   const hash = generateAPIHash({
diff --git a/packages/runtime/src/runtime/hooks/__tests__/useInvokeApi.test.tsx b/packages/runtime/src/runtime/hooks/__tests__/useInvokeApi.test.tsx
index c8fbb8750..9aaf75bab 100644
--- a/packages/runtime/src/runtime/hooks/__tests__/useInvokeApi.test.tsx
+++ b/packages/runtime/src/runtime/hooks/__tests__/useInvokeApi.test.tsx
@@ -444,3 +444,43 @@ test("after API fetching using toggle check states", async () => {
     expect(logSpy).toHaveBeenCalledWith(false);
   });
 });
+
+test("fetch API with bindings", () => {
+  fetchMock.mockResolvedValue({ body: { data: "foobar" } });
+
+  render(
+    <EnsembleScreen
+      screen={{
+        name: "test_bindings",
+        id: "test_bindings",
+        body: {
+          name: "Column",
+          properties: {
+            children: [
+              {
+                name: "Button",
+                properties: {
+                  label: "Call API",
+                  onTap: {
+                    invokeAPI: {
+                      name: `\${ensemble.storage.get('apiName')}`,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        },
+        apis: [{ name: "fetchFoobar", method: "GET" }],
+        onLoad: {
+          executeCode: "ensemble.storage.set('apiName', 'fetchFoobar')",
+        },
+      }}
+    />,
+    { wrapper: BrowserRouterWrapper },
+  );
+
+  fireEvent.click(screen.getByText("Call API"));
+
+  expect(fetchMock).toHaveBeenCalledTimes(1);
+});
diff --git a/packages/runtime/src/runtime/hooks/useEnsembleAction.tsx b/packages/runtime/src/runtime/hooks/useEnsembleAction.tsx
index f60f58833..d44511129 100644
--- a/packages/runtime/src/runtime/hooks/useEnsembleAction.tsx
+++ b/packages/runtime/src/runtime/hooks/useEnsembleAction.tsx
@@ -162,14 +162,15 @@ export const useInvokeAPI: EnsembleActionHook<InvokeAPIAction> = (action) => {
   const screenModel = useScreenModel();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
+  const { values } = useRegisterBindings({ name: action?.name });
 
   const onInvokeAPIResponseAction = useEnsembleAction(action?.onResponse);
   const onInvokeAPIErrorAction = useEnsembleAction(action?.onError);
 
   const currentApi = useMemo(() => {
-    if (!action?.name) return null;
-    return apis?.find((api) => api.name === action.name);
-  }, [action?.name, apis]);
+    if (!values?.name) return null;
+    return apis?.find((api) => api.name === values.name);
+  }, [values?.name, apis]);
 
   const onAPIResponseAction = useEnsembleAction(currentApi?.onResponse);
   const onAPIErrorAction = useEnsembleAction(currentApi?.onError);
@@ -182,7 +183,7 @@ export const useInvokeAPI: EnsembleActionHook<InvokeAPIAction> = (action) => {
         [key: string]: unknown;
       };
 
-      if (action.name !== currentApi.name) return;
+      if (values?.name !== currentApi.name) return;
 
       const evaluatedInputs = (
         action.inputs ? evaluateDeep(action.inputs, screenModel, context) : {}
@@ -281,7 +282,7 @@ export const useInvokeAPI: EnsembleActionHook<InvokeAPIAction> = (action) => {
       }
     },
     { navigate },
-    [action, currentApi, screenModel, appContext, queryClient],
+    [action, values, currentApi, screenModel, appContext, queryClient],
   );
 
   return { callback: invokeCommand };