Skip to content

fix: added support for bindings in invokeAPI #1024

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+60 −6
Open

fix: added support for bindings in invokeAPI #1024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/plenty-mangos-walk.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@ensembleui/react-framework": patch
"@ensembleui/react-runtime": patch
---

Added support for bindings in invokeAPI
9 changes: 8 additions & 1 deletion packages/framework/src/api/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -21,8 +22,14 @@ export const invokeAPI = async (
setter?: Setter,
options?: InvokeAPIOptions,
): Promise<Response | undefined> => {
const evaluated = evaluateDeep(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does this work with the useInvokeAPI hook? That hook clearly checks if the API name exists before invoking.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you check useEnsembleAction, in useInvokeAPI we are using useRegisterBindings for evaluate API name and then we check that is API name exists in screenContext before invoking the api, and here when user trigger the api through ensemble.invokeAPI, we are using evaluateDeep to evaluate the api name and then we are checking that name with screenContext and if we found the api, only then we invoke it

{ apiName },
screenContext.model,
screenContext,
);

const api = screenContext.model?.apis?.find(
(model) => model.name === apiName,
(model) => model.name === evaluated.apiName,
);

const hash = generateAPIHash({
Expand Down
40 changes: 40 additions & 0 deletions packages/runtime/src/runtime/hooks/__tests__/useInvokeApi.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
11 changes: 6 additions & 5 deletions packages/runtime/src/runtime/hooks/useEnsembleAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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) : {}
Expand Down Expand Up @@ -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 };
Expand Down