1 files changed, 49 insertions, 43 deletions

diff --git a/packages/taler-wallet-webextension/src/components/WalletActivity.tsx b/packages/taler-wallet-webextension/src/components/WalletActivity.tsx
index 4a3aaf79f..a370e859d 100644
--- a/packages/taler-wallet-webextension/src/components/WalletActivity.tsx
+++ b/packages/taler-wallet-webextension/src/components/WalletActivity.tsx
@@ -35,6 +35,7 @@ import { useSettings } from "../hooks/useSettings.js";
 import { Button } from "../mui/Button.js";
 import { Modal } from "./Modal.js";
 import { Time } from "./Time.js";
+import { WalletEvent } from "../wxApi.js";
 
 interface Props extends JSX.HTMLAttributes {
 }
@@ -613,63 +614,67 @@ function getNotificationFor(id: string, event: WalletNotification, start: Absolu
   }
 }
 
+let lastTimeout: ReturnType<typeof setTimeout>;
 export function ObservavilityEventsTable({ }: {}): VNode {
   const { i18n } = useTranslationContext()
-  const listenAllEvents = Array.from<NotificationType>({ length: 1 });
-  listenAllEvents.includes = () => true
   const api = useBackendContext();
-  const [lastEvent, setLastEvent] = useState<Date>(new Date())
-  const [lastShow, setLastShow] = useState<Date>(new Date())
 
-  const [notifications, setNotifications] = useState<{ notif: WalletNotification, when: AbsoluteTime }[]>([])
+  const [notifications, setNotifications] = useState<Notif[]>([])
+
   useEffect(() => {
-    return api.listener.onUpdateNotification(listenAllEvents, (not) => {
-      console.log(not)
-      const time = new Date();
-      setLastEvent(time)
-      notifications.unshift({
-        notif: not,
-        when: AbsoluteTime.now()
-      })
-      setNotifications(Array.from(notifications))
-    });
+    //initial call
+    api.background.call("getNotifications", undefined).then(notif => {
+      const list: Notif[] = []
+      for (const pepe of notif) {
+        const event = getNotificationFor(String(list.length), pepe.notification, pepe.when, list)
+        // pepe.
+        if (event) {
+          list.push(event)
+        }
+      }
+    setNotifications(list);
+    })
+
+    function periodicRefresh() {
+      lastTimeout = setTimeout(async () => {
+
+        const notif = await api.background.call("getNotifications", undefined);
+
+        const list: Notif[] = []
+        for (const pepe of notif) {
+          const event = getNotificationFor(String(list.length), pepe.notification, pepe.when, list)
+          // pepe.
+          if (event) {
+            list.push(event)
+          }
+        }
+
+        setNotifications(list);
+        periodicRefresh();
+      }, 1000)
+
+      //clear on unload 
+      return () => { clearTimeout(lastTimeout) }
+    }
+    return periodicRefresh()
   });
 
   const [showDetails, setShowDetails] = useState<VNode>()
-  const [notif, setnotif] = useState<Notif[]>([])
   return <div>
     <div style={{ display: "flex", justifyContent: "space-between" }}>
-      {lastShow === lastEvent ?
-        <div>last event {lastEvent.toString()}</div>
-        : <div>there are more events, update to see them</div>}
-      <div>
-        {lastShow !== lastEvent ?
-          <div style={{ padding: 4, margin: 2, border: "solid 1px black" }} onClick={() => {
-            const list = [...notif]
-            for (const pepe of notifications) {
-              const event = getNotificationFor(String(list.length), pepe.notif, pepe.when, list)
-              if (event) {
-                list.push(event)
-              }
-            }
-            setnotif(list)
-            setLastShow(lastEvent)
-          }}>
-            update
-          </div>
-          : <div />}
-        <div style={{ padding: 4, margin: 2, border: "solid 1px black" }} onClick={() => {
-          setNotifications([])
-        }}>
-          clear
-        </div>
 
+      <div style={{ padding: 4, margin: 2, border: "solid 1px black" }} onClick={() => {
+        setNotifications([])
+      }}>
+        clear
       </div>
+
+
     </div>
     {showDetails && <Modal title="event details" onClose={{ onClick: (async () => { setShowDetails(undefined) }) as any }} >
       {showDetails}
     </Modal>}
-    {notif.map((not) => {
+    {notifications.map((not) => {
       return (
         <details key={not.id}>
           <summary>
@@ -721,14 +726,15 @@ function ErroDetailModal({ error, onClose }: { error: TalerErrorDetail, onClose:
 
 export function ActiveTasksTable({ }: {}): VNode {
   const { i18n } = useTranslationContext()
-  const listenAllEvents = Array.from<NotificationType>({ length: 1 });
-  listenAllEvents.includes = () => true
   const api = useBackendContext();
   const state = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.GetActiveTasks, {}),
   );
   const [showError, setShowError] = useState<TalerErrorDetail>()
   const tasks = state && !state.hasError ? state.response.tasks : [];
+  
+  // const listenAllEvents = Array.from<NotificationType>({ length: 1 });
+  // listenAllEvents.includes = () => true
   // useEffect(() => {
   //   return api.listener.onUpdateNotification(listenAllEvents, (notif) => {
   //     state?.retry()