fix: update ensemble storage

Author: sagardspeed2

apps/kitchen-sink/src/ensemble/screens/help.yaml

@@ -28,6 +28,37 @@ View:
                       inputs:
                         input1: "hello"
                         input2: "world"
+
+        - Button:
+            label: toggle modal
+            onTap:
+              showDialog:
+                options:
+                  minWidth: 500px
+                body:
+                  MultiSelect:
+                    label: test
+                    data: ${ensemble.storage.get('testoptions')}
+                    labelKey: label
+                    valueKey: value
+                    value: ${ensemble.storage.get('testselect') || []}
+                    onChange:
+                      executeCode: |
+                        ensemble.storage.set('testselect', option)
+                    onSearch:
+                      executeCode: |
+                        const tempOptions = ensemble.storage.get('testlistoptions')
+                        const filteredResult = tempOptions.filter(option => 
+                          option.label.toLowerCase().startsWith(search.toLowerCase())
+                        )
+                        ensemble.storage.set('testoptions', filteredResult)
+
+        - Button:
+            label: set storage variable
+            onTap:
+              executeCode: |
+                ensemble.storage.set('isTestAvailable', 'yes !!!')
+
         - Text:
             styles:
               names: heading-1

apps/kitchen-sink/src/ensemble/screens/testActions.yaml

@@ -191,6 +191,19 @@ View:
             label: close all screens
             onTap:
               closeAllScreens:
+        - Button:
+            label: navigate screen modal for test storage
+            onTap:
+              navigateModalScreen:
+                name: help
+                height: 200px
+                width: 900px
+        - Button:
+            label: check storage variable
+            onTap:
+              executeCode: |
+                ensemble.storage.set('storageTested', 'okay')
+                console.log(ensemble.storage.get('isTestAvailable'))
 
 Socket:
   echo:

packages/framework/src/hooks/useCommandCallback.ts

@@ -29,7 +29,11 @@ import type {
   ShowDialogAction,
 } from "../shared";
 import { deviceAtom } from "./useDeviceObserver";
-import { createStorageApi, screenStorageAtom } from "./useEnsembleStorage";
+import {
+  createStorageApi,
+  screenStorageAtom,
+  useEnsembleStorage,
+} from "./useEnsembleStorage";
 import { useCustomScope } from "./useCustomScope";
 import { useLanguageScope } from "./useLanguageScope";
 
@@ -53,21 +57,17 @@ export const useCommandCallback = <
 ): ReturnType<typeof useAtomCallback<R, T>> => {
   const customScope = useCustomScope();
   const { i18n } = useLanguageScope();
+  const storage = useEnsembleStorage();
 
   return useAtomCallback(
     useCallback(
       (get, set, ...args: T) => {
         const applicationContext = get(appAtom);
         const screenContext = get(screenAtom);
-        const storage = get(screenStorageAtom);
         const device = get(deviceAtom);
         const theme = get(themeAtom);
         const user = get(userAtom);
 
-        const storageApi = createStorageApi(storage, (next) =>
-          set(screenStorageAtom, next),
-        );
-
         const customWidgets =
           applicationContext.application?.customWidgets.reduce(
             (acc, widget) => ({ ...acc, [widget.name]: widget }),
@@ -83,7 +83,7 @@ export const useCommandCallback = <
               ...user,
               setUser: (userUpdate: EnsembleUser) => set(userAtom, userUpdate),
             },
-            storage: storageApi,
+            storage,
             formatter: DateFormatter(),
             env: applicationContext.env,
             secrets: applicationContext.secrets,
@@ -110,7 +110,7 @@ export const useCommandCallback = <
                   ensemble: {
                     env: applicationContext.env,
                     secrets: applicationContext.secrets,
-                    storage: storageApi,
+                    storage,
                   },
                 },
                 undefined,

packages/framework/src/hooks/useEnsembleStorage.ts

@@ -39,17 +39,15 @@ export const screenStorageAtom = atom(
 
 export const useEnsembleStorage = (): EnsembleStorage => {
   const [storage, setStorage] = useAtom(screenStorageAtom);
+
   // Use a buffer so we can perform imperative changes without forcing re-render
   const storageBuffer = useMemo<{ [key: string]: unknown }>(() => ({}), []);
 
   useMemo(() => {
     merge(storageBuffer, storage);
   }, [storageBuffer, storage]);
 
-  const storageApi = useMemo(
-    () => createStorageApi(storageBuffer, setStorage),
-    [setStorage, storageBuffer],
-  );
+  const storageApi = createStorageApi(storage, setStorage);
 
   return storageApi;
 };
@@ -64,8 +62,8 @@ export const createStorageApi = (
       update[key] = value;
       if (storage) {
         assign(storage, update);
+        setStorage?.(storage);
       }
-      setStorage?.(update);
     },
     get: (key: string): unknown => {
       return storage?.[key];