From 1b07a17a3b31788e072678fbd4b6f10ef0d88ce0 Mon Sep 17 00:00:00 2001 From: anserwaseem Date: Mon, 23 Sep 2024 17:32:27 +0500 Subject: [PATCH] add more apis in commandCallback's scope - evaluate issue remaining in mockApi --- .../src/ensemble/screens/forms.yaml | 8 +++++--- packages/framework/src/api/data.ts | 5 ++++- packages/framework/src/evaluate/context.ts | 5 +++-- .../framework/src/hooks/useCommandCallback.ts | 18 ++++++++++++++++-- packages/framework/src/shared/ensemble.d.ts | 11 +++++++++++ .../src/runtime/hooks/useEnsembleAction.tsx | 5 +++++ packages/runtime/src/runtime/locationApi.tsx | 2 +- 7 files changed, 45 insertions(+), 9 deletions(-) diff --git a/apps/kitchen-sink/src/ensemble/screens/forms.yaml b/apps/kitchen-sink/src/ensemble/screens/forms.yaml index e619a34e1..2c5aa1c7d 100644 --- a/apps/kitchen-sink/src/ensemble/screens/forms.yaml +++ b/apps/kitchen-sink/src/ensemble/screens/forms.yaml @@ -7,6 +7,7 @@ View: ensemble.storage.set('inputVal', 'sagar'); ensemble.storage.set('mockApiStatusCode', 200); ensemble.storage.set('mockApiReasonPhrase', 'Success!'); + ensemble.storage.set('mockApiName', 'testMockResponse'); ensemble.storage.set('dummyData', [ { value: "val 1", label: "lab 1" }, { value: "val 2", label: "lab 2" }, @@ -365,6 +366,7 @@ View: initialValue: false onChange: executeCode: | + debugger; app.setUseMockResponse(!app.useMockResponse); - Checkbox: id: throwMockApiErrorCheckbox @@ -386,7 +388,7 @@ View: label: Call API! onTap: invokeAPI: - name: testMockResponse + name: ${ensemble.storage.get('mockApiName')} onResponse: executeCode: console.log("Mock API called ", response); - Button: @@ -395,7 +397,7 @@ View: label: Call API from executeCode! onTap: executeCode: | - ensemble.invokeAPI("testMockResponse"); + ensemble.invokeAPI(ensemble.storage.get('mockApiName')); - Spacer: styles: size: 20 @@ -455,7 +457,7 @@ API: uri: https://dummyjson.com/users/1 mockResponse: statusCode: "${ensemble.storage.get('mockApiStatusCode')}" - reasonPhrase: "${ensemble.storage.get('mockApiReasonPhrase')}" + reasonPhrase: "${ensemble.env.randomId}" body: - id: 0 name: Harry Potter diff --git a/packages/framework/src/api/data.ts b/packages/framework/src/api/data.ts index 39679855a..5f0c53c31 100644 --- a/packages/framework/src/api/data.ts +++ b/packages/framework/src/api/data.ts @@ -46,7 +46,10 @@ export const invokeAPI = async ( api, { ...apiInputs, ...context }, { - mockResponse: mockResponse(evaluatedMockResponse, useMockResponse), + mockResponse: mockResponse( + evaluatedMockResponse ?? api.mockResponse, + useMockResponse, + ), useMockResponse, }, ); diff --git a/packages/framework/src/evaluate/context.ts b/packages/framework/src/evaluate/context.ts index 2d049e3dc..d07320a55 100644 --- a/packages/framework/src/evaluate/context.ts +++ b/packages/framework/src/evaluate/context.ts @@ -5,7 +5,7 @@ import type { ScreenContextDefinition, } from "../state"; import type { EnsembleAppModel, EnsembleThemeModel } from "../shared"; -import { isUsingMockResponse } from "../appConfig"; +import { isUsingMockResponse, setUseMockResponse } from "../appConfig"; export interface EvaluationContextProps { applicationContext: Omit< @@ -48,7 +48,8 @@ export const createEvaluationContext = ({ themes: keys(applicationContext.application?.themes), theme: applicationContext.selectedTheme?.name, useMockResponse: isUsingMockResponse(applicationContext.application?.id), - setUseMockResponse: noop, + setUseMockResponse: (value: boolean) => + setUseMockResponse(applicationContext.application?.id, value), //noop, }; const env = applicationContext.env; diff --git a/packages/framework/src/hooks/useCommandCallback.ts b/packages/framework/src/hooks/useCommandCallback.ts index c48f40db7..2a715a8d2 100644 --- a/packages/framework/src/hooks/useCommandCallback.ts +++ b/packages/framework/src/hooks/useCommandCallback.ts @@ -5,16 +5,18 @@ import { mapKeys } from "lodash-es"; import { createEvaluationContext } from "../evaluate"; import type { EnsembleUser } from "../state"; import { appAtom, screenAtom, themeAtom, userAtom } from "../state"; -import type { EnsembleContext } from "../shared/ensemble"; +import type { EnsembleContext, EnsembleLocation } from "../shared/ensemble"; import { DateFormatter } from "../date"; -import type { ModalContext } from "../api"; +import type { ModalContext, NavigateFunction } from "../api"; import { handleConnectSocket, handleDisconnectSocket, handleMessageSocket, invokeAPI, + navigateApi, navigateExternalScreen, navigateModalScreen, + navigateUrl, showDialog, } from "../api"; import type { @@ -22,6 +24,7 @@ import type { EnsembleWidget, NavigateExternalScreen, NavigateModalScreenAction, + NavigateScreenAction, ShowDialogAction, } from "../shared"; import { deviceAtom } from "./useDeviceObserver"; @@ -37,11 +40,13 @@ interface CallbackContext { screen: EnsembleScreenModel; }>; } + export const useCommandCallback = < T extends unknown[] = unknown[], R = unknown, >( command: (evalContext: EnsembleContext, ...args: T) => R, + apis: { navigate: NavigateFunction; location: EnsembleLocation }, dependencies: unknown[] = [], callbackContext?: CallbackContext, ): ReturnType> => { @@ -76,6 +81,15 @@ export const useCommandCallback = < formatter: DateFormatter(), env: applicationContext.env, secrets: applicationContext.secrets, + location: apis.location, + navigateScreen: (targetScreen: NavigateScreenAction): void => + navigateApi(targetScreen, screenContext, apis.navigate), + navigateUrl: (url: string, inputs?: { [key: string]: unknown }) => + navigateUrl(url, apis.navigate, inputs), + navigateBack: (): void => + callbackContext?.modalContext + ? callbackContext.modalContext.navigateBack() + : apis.navigate(-1), invokeAPI: async ( apiName: string, apiInputs?: { [key: string]: unknown }, diff --git a/packages/framework/src/shared/ensemble.d.ts b/packages/framework/src/shared/ensemble.d.ts index bb95260eb..65edfa401 100644 --- a/packages/framework/src/shared/ensemble.d.ts +++ b/packages/framework/src/shared/ensemble.d.ts @@ -15,7 +15,9 @@ export interface EnsembleInterface { secrets: EnsembleSecretsConfig; user?: EnsembleUser; device: EnsembleDeviceInfo; + location: EnsembleLocation; navigateScreen: (screenName: string, inputs?: unknown[]) => void; + navigateUrl: (url: string, inputs?: { [key: string]: unknown }) => void; navigateModalScreen: (screenName: string, inputs?: unknown[]) => void; navigateExternalScreen: (url: NavigateExternalScreen) => void; openUrl: (url: NavigateExternalScreen) => void; @@ -57,3 +59,12 @@ interface EnsembleAppConfig { interface EnsembleUser { [k: string]: unknown; } + +export interface EnsembleLocationInterface { + pathname?: string; + search?: string; +} + +export interface EnsembleLocation { + get: (key: keyof EnsembleLocationInterface) => string | undefined; +} diff --git a/packages/runtime/src/runtime/hooks/useEnsembleAction.tsx b/packages/runtime/src/runtime/hooks/useEnsembleAction.tsx index 0f9223e59..8258a51ca 100644 --- a/packages/runtime/src/runtime/hooks/useEnsembleAction.tsx +++ b/packages/runtime/src/runtime/hooks/useEnsembleAction.tsx @@ -48,9 +48,11 @@ import { toNumber, } from "lodash-es"; import { useState, useEffect, useMemo, useCallback, useContext } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; import { ModalContext } from "../modal"; import { EnsembleRuntime } from "../runtime"; import { getShowDialogOptions } from "../showDialog"; +import { locationApi } from "../locationApi"; import { handleConnectSocket, handleMessageSocket, @@ -95,6 +97,8 @@ export const useExecuteCode: EnsembleActionHook< const isCodeString = isString(action); const screen = useScreenContext(); const modalContext = useContext(ModalContext); + const navigate = useNavigate(); + const location = useLocation(); const appContext = useApplicationContext(); const onCompleteAction = useEnsembleAction( isCodeString ? undefined : action?.onComplete, @@ -135,6 +139,7 @@ export const useExecuteCode: EnsembleActionHook< }); return retVal; }, + { navigate, location: locationApi(location) }, [js, onCompleteAction], { modalContext, render: EnsembleRuntime.render, EnsembleScreen }, ); diff --git a/packages/runtime/src/runtime/locationApi.tsx b/packages/runtime/src/runtime/locationApi.tsx index 0093d069c..92eff60ef 100644 --- a/packages/runtime/src/runtime/locationApi.tsx +++ b/packages/runtime/src/runtime/locationApi.tsx @@ -12,7 +12,7 @@ export interface EnsembleLocation { export const locationApi = (location: Location): EnsembleLocation => { return { get: (key: keyof EnsembleLocationInterface): string | undefined => { - return location?.[key]; + return location[key]; }, }; };