fix: improved UI

packages/sdk/src/hooks/index.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
+import { useUpdateEffect } from '../widgets';
 
 type AutoUpdateOptions<TReturn> = {
   interval: number;
@@ -36,6 +37,10 @@ const useAutoUpdate = <T>(
     };
   }, [interval, actionWithCallback, callbackWithCallback]);
 
+  useUpdateEffect(async () => {
+    await update();
+  }, [update]);
+
   return update;
 };
 

packages/sdk/src/widgets/hooks.ts

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { WidgetsContext } from './context';
 import { WidgetContext } from './widget-context';
 
@@ -111,9 +111,58 @@ const useWidgetId = () => {
   return context.id;
 };
 
+const useName = () => {
+  const context = useContext(WidgetContext);
+  if (!context) {
+    throw new Error('useName must be used within a WidgetProvider');
+  }
+  return [context.name, context.setName] as const;
+};
+
+const useHasUpdate = () => {
+  const context = useContext(WidgetContext);
+  if (!context) {
+    throw new Error('useHasUpdate must be used within a WidgetProvider');
+  }
+  return context.hasUpdater;
+};
+
+const useUpdateEffect = (fn: () => Promise<void>, deps: any[]) => {
+  const context = useContext(WidgetContext);
+  if (!context) {
+    throw new Error('useUpdateEffect must be used within a WidgetProvider');
+  }
+  useEffect(() => {
+    const unsubscribe = context.addUpdater(() => fn());
+    return () => {
+      unsubscribe();
+    };
+  }, [context.addUpdater, ...deps]);
+};
+
+const useReloadWidget = () => {
+  const context = useContext(WidgetContext);
+  if (!context) {
+    throw new Error('useUpdateWidget must be used within a WidgetProvider');
+  }
+  return context.updateWidget;
+};
+
+const useIsUpdating = () => {
+  const context = useContext(WidgetContext);
+  if (!context) {
+    throw new Error('useIsUpdating must be used within a WidgetProvider');
+  }
+  return context.updating;
+};
+
 export {
   useWidget,
   useWidgets,
+  useName,
+  useUpdateEffect,
+  useHasUpdate,
+  useReloadWidget,
   useGetWidgetsFromUrl,
   useWidgetNotifications,
   useDismissWidgetNotification,
@@ -121,4 +170,5 @@ export {
   useWidgetData,
   useSetWidgetData,
   useWidgetId,
+  useIsUpdating,
 };

packages/sdk/src/widgets/index.ts

@@ -10,6 +10,11 @@ export {
   useWidgetId,
   useWidgetData,
   useSetWidgetData,
+  useName,
+  useUpdateEffect,
+  useReloadWidget,
+  useHasUpdate,
+  useIsUpdating,
 } from './hooks';
 export { WidgetProvider } from './widget-context';
 export { WidgetView } from './view';

packages/sdk/src/widgets/widget-context.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useMemo, useRef } from 'react';
+import { createContext, useCallback, useMemo, useRef, useState } from 'react';
 import {
   Notification as BaseNotification,
   useNotificationAdd,
@@ -14,8 +14,16 @@ type WidgetContextValue = {
   dismissNotification: (id: string) => void;
   notifications: Notification[];
   setData?: (data: any) => void;
+  addUpdater: (updater: Updater) => () => void;
+  updating: boolean;
+  hasUpdater: boolean;
+  name: string;
+  setName: (name: string) => void;
+  updateWidget: () => Promise<void>;
 };
 
+type Updater = () => Promise<void> | void;
+
 type WidgetProviderProps = {
   id: string;
   data?: any;
@@ -32,6 +40,9 @@ const WidgetProvider = ({
   children,
 }: WidgetProviderProps) => {
   const ref = useRef(Symbol('WidgetRender'));
+  const [updating, setUpdating] = useState(false);
+  const [name, setName] = useState('');
+  const [updaters, setUpdaters] = useState<Updater[]>([]);
   const globalNotifications = useNotifications();
   const addGlobalNotification = useNotificationAdd();
   const dissmissGlobalNotification = useNotificationDismiss();
@@ -46,6 +57,16 @@ const WidgetProvider = ({
     [addGlobalNotification],
   );
 
+  const addUpdater = useCallback(
+    (updater: Updater) => {
+      setUpdaters((prev) => [...prev, updater]);
+      return () => {
+        setUpdaters((prev) => prev.filter((u) => u !== updater));
+      };
+    },
+    [setUpdaters],
+  );
+
   const dismissNotification = useCallback(
     (dismissId: string) => {
       dissmissGlobalNotification(dismissId);
@@ -53,6 +74,18 @@ const WidgetProvider = ({
     [dissmissGlobalNotification],
   );
 
+  const updateWidget = useCallback(async () => {
+    setUpdating(true);
+    for (const updater of updaters) {
+      try {
+        await updater();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    setUpdating(false);
+  }, [updaters]);
+
   const value = useMemo(
     () => ({
       addNotification,
@@ -61,8 +94,27 @@ const WidgetProvider = ({
       id,
       data,
       setData,
+      name,
+      setName,
+      addUpdater,
+      updateWidget,
+      updating,
+      hasUpdater: updaters.length > 0,
     }),
-    [addNotification, notifications, id, data, setData, dismissNotification],
+    [
+      addNotification,
+      notifications,
+      id,
+      data,
+      setData,
+      updating,
+      dismissNotification,
+      name,
+      setName,
+      addUpdater,
+      updateWidget,
+      updaters.length,
+    ],
   );
 
   return (