Revert "chore(react): prototype for note context"

This reverts commit 660db3b3ab.

apps/client/src/components/component.ts

@@ -15,7 +15,7 @@ type EventHandler = ((data: any) => void);
  *   event / command is executed in all components - by simply awaiting the `triggerEvent()`.
  */
 export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
-    $widget!: JQuery<HTMLElement | DocumentFragment>;
+    $widget!: JQuery<HTMLElement>;
     componentId: string;
     children: ChildT[];
     initialized: Promise<void> | null;

apps/client/src/widgets/basic_widget.ts

@@ -3,9 +3,9 @@ import Component, { TypedComponent } from "../components/component.js";
 import froca from "../services/froca.js";
 import { t } from "../services/i18n.js";
 import toastService from "../services/toast.js";
-import { renderReactWidgetAtElement } from "./react/react_utils.jsx";
+import { renderReactWidget } from "./react/react_utils.jsx";
-import { type default as NoteContextType } from "../../components/note_context";
+import { EventNames, EventData } from "../components/app_context.js";
-import { EventData } from "../components/app_context.js";
+import { Handler } from "leaflet";
 
 export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedComponent<T> {
     protected attrs: Record<string, string>;
@@ -281,8 +281,6 @@ export function wrapReactWidgets<T extends TypedComponent<any>>(components: (T |
 export class ReactWrappedWidget extends BasicWidget {
 
     private el: VNode;
-    private noteContext: NoteContextType | null;
-    private fragment: DocumentFragment = new DocumentFragment();
 
     constructor(el: VNode) {
         super();
@@ -290,30 +288,7 @@ export class ReactWrappedWidget extends BasicWidget {
     }
 
     doRender() {
-        renderReactWidgetAtElement({
+        this.$widget = renderReactWidget(this, this.el);
-            parentComponent: this,
-            noteContext: this.noteContext
-        }, this.el, this.fragment);
-        this.$widget = $(this.fragment);
-    }
-
-    activeContextChangedEvent({ noteContext }: EventData<"activeContextChanged">) {
-       this.noteContext = noteContext;
-       this.doRender();
-    }
-
-    setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
-        this.noteContext = noteContext;
-        this.doRender();
-    }
-
-    noteSwitchedAndActivatedEvent({ noteContext }: EventData<"noteSwitchedAndActivated">) {
-        this.noteContext = noteContext;
-        this.doRender();
-    }
-
-    noteSwitchedEvent({ noteContext }: EventData<"noteSwitched">) {
-        this.doRender();
     }
 
 }

apps/client/src/widgets/note_title.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { t } from "../services/i18n";
 import FormTextBox from "./react/FormTextBox";
 import { useNoteContext, useNoteProperty, useSpacedUpdate, useTriliumEvent } from "./react/hooks";
@@ -8,13 +8,9 @@ import "./note_title.css";
 import { isLaunchBarConfig } from "../services/utils";
 import appContext from "../components/app_context";
 import branches from "../services/branches";
-import { NoteContext, ParentComponent } from "./react/react_utils";
 
 export default function NoteTitleWidget() {
-    const parentComponent = useContext(ParentComponent);
+    const { note, noteId, componentId, viewScope, noteContext, parentComponent } = useNoteContext();    
-    const noteContext = useContext(NoteContext);  
-    const { noteId, note, componentId, viewScope } = noteContext ?? {};
-    
     const title = useNoteProperty(note, "title", componentId);    
     const isProtected = useNoteProperty(note, "isProtected");
     const newTitle = useRef("");
@@ -35,7 +31,7 @@ export default function NoteTitleWidget() {
     // Manage the title for read-only notes
     useEffect(() => {
         if (isReadOnly) {
-            noteContext?.getNavigationTitle?.().then(setNavigationTitle);
+            noteContext?.getNavigationTitle().then(setNavigationTitle);
         }
     }, [isReadOnly]);
 
@@ -82,7 +78,7 @@ export default function NoteTitleWidget() {
                     // Focus on the note content when pressing enter.
                     if (e.key === "Enter") {
                         e.preventDefault();
-                        parentComponent?.triggerCommand("focusOnDetail", { ntxId: noteContext?.ntxId });
+                        parentComponent.triggerCommand("focusOnDetail", { ntxId: noteContext?.ntxId });
                         return;
                     }
 

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

@@ -6,10 +6,7 @@ export default abstract class ReactBasicWidget extends BasicWidget {
     abstract get component(): JSX.Element;
 
     doRender() {        
-        this.$widget = renderReactWidget({
+        this.$widget = renderReactWidget(this, this.component);
-            parentComponent: this,
-            noteContext: null
-        }, this.component);
     }
 
 }

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

@@ -17,13 +17,9 @@ import { CSSProperties } from "preact/compat";
 
 export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
     const parentComponent = useContext(ParentComponent)!;
-
+    parentComponent.registerHandler(eventName, handler);
-    useEffect(() => {
-        parentComponent.registerHandler(eventName, handler);
-        return (() => parentComponent.removeHandler(eventName, handler));
-    }, [eventName, handler]);
-
     useDebugValue(eventName);
+    return (() => parentComponent.removeHandler(eventName, handler));
 }
 
 export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler: (data: EventData<T>, eventName: T) => void) {
@@ -203,6 +199,7 @@ export function useNoteContext() {
     }, [ notePath ]);
 
     useTriliumEvent("activeContextChanged", ({ noteContext }) => {
+        setNoteContext(noteContext);
         setNotePath(noteContext.notePath);        
     });
     useTriliumEvent("setNoteContext", ({ noteContext }) => {

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

@@ -1,14 +1,9 @@
 import { ComponentChild, createContext, render, type JSX, type RefObject } from "preact";
 import Component from "../../components/component";
-import { type default as NoteContextType } from "../../components/note_context";
+import { EventData, EventNames } from "../../components/app_context";
+import { useContext } from "preact/hooks";
 
 export const ParentComponent = createContext<Component | null>(null);
-export const NoteContext = createContext<NoteContextType | null>(null);
-
-interface ComponentContext {
-    parentComponent: Component | null;
-    noteContext: NoteContextType | null;
-}
 
 /**
  * Takes in a React ref and returns a corresponding JQuery selector.
@@ -31,16 +26,14 @@ export function refToJQuerySelector<T extends HTMLElement>(ref: RefObject<T> | n
  * @param el the JSX element to render.
  * @returns the rendered wrapped DOM element.
  */
-export function renderReactWidget(context: ComponentContext, el: JSX.Element) {
+export function renderReactWidget(parentComponent: Component, el: JSX.Element) {
-    return renderReactWidgetAtElement(context, el, new DocumentFragment()).children();
+    return renderReactWidgetAtElement(parentComponent, el, new DocumentFragment()).children();
 }
 
-export function renderReactWidgetAtElement({ parentComponent, noteContext }: ComponentContext, el: JSX.Element, container: Element | DocumentFragment) {
+export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.Element, container: Element | DocumentFragment) {
     render((
         <ParentComponent.Provider value={parentComponent}>
-            <NoteContext.Provider value={noteContext}>
+            {el}
-                {el}
-            </NoteContext.Provider>
         </ParentComponent.Provider>
     ), container);
     return $(container) as JQuery<HTMLElement>;