feat(react): set up hook for reacting to events

apps/client/src/widgets/react/ReactBasicWidget.ts

@@ -1,14 +0,0 @@
-import { JSX, render } from "preact";
-import BasicWidget from "../basic_widget.js";
-
-export default abstract class ReactBasicWidget extends BasicWidget {
-
-    abstract get component(): JSX.Element;
-
-    doRender() {
-        const renderContainer = new DocumentFragment();
-        render(this.component, renderContainer);
-        this.$widget = $(renderContainer.firstChild as HTMLElement);
-    }
-
-}

apps/client/src/widgets/react/ReactBasicWidget.tsx

@@ -0,0 +1,21 @@
+import { createContext, JSX, render } from "preact";
+import BasicWidget from "../basic_widget.js";
+import Component from "../../components/component.js";
+
+export const ParentComponent = createContext<Component | null>(null);
+
+export default abstract class ReactBasicWidget extends BasicWidget {
+
+    abstract get component(): JSX.Element;
+
+    doRender() {
+        const renderContainer = new DocumentFragment();
+        render((
+            <ParentComponent.Provider value={this}>
+                {this.component}
+            </ParentComponent.Provider>
+        ), renderContainer);
+        this.$widget = $(renderContainer.firstChild as HTMLElement);
+    }
+
+}

apps/client/src/widgets/react/hooks.tsx

@@ -0,0 +1,32 @@
+import { useContext, useEffect, useState } from "preact/hooks";
+import { EventData, EventNames } from "../../components/app_context";
+import { ParentComponent } from "./ReactBasicWidget";
+
+export default function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
+    const parentWidget = useContext(ParentComponent);
+    useEffect(() => {
+        if (!parentWidget) {
+            console.warn("useTriliumEvent: No widget context found");
+            return;
+        }
+
+        // Create a unique handler name for this specific event listener
+        const handlerName = `${eventName}Event`;
+        const originalHandler = parentWidget[handlerName];
+
+        // Override the event handler to call our handler
+        parentWidget[handlerName] = async function(data: EventData<T>) {
+            // Call original handler if it exists
+            if (originalHandler) {
+                await originalHandler.call(parentWidget, data);
+            }
+            // Call our React component's handler
+            handler(data);
+        };
+
+        // Cleanup: restore original handler on unmount
+        return () => {
+            parentWidget[handlerName] = originalHandler;
+        };
+    }, [parentWidget]);
+}