feat(client/ts): port note_list

src/public/app/components/app_context.ts

@@ -291,6 +291,9 @@ type EventMappings = {
     tabReorder: {
         ntxIdsInOrder: string[]
     };
+    refreshNoteList: {
+        noteId: string;
+    }
 };
 
 export type EventListener<T extends EventNames> = {

src/public/app/widgets/basic_widget.ts

@@ -193,7 +193,7 @@ export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedCompon
      * Indicates if the widget is enabled. Widgets are enabled by default. Generally setting this to `false` will cause the widget not to be displayed, however it will still be available on the DOM but hidden.
      * @returns whether the widget is enabled.
      */
-    isEnabled() {
+    isEnabled(): boolean | null | undefined {
         return true;
     }
 

src/public/app/widgets/note_context_aware_widget.ts

@@ -54,7 +54,7 @@ class NoteContextAwareWidget extends BasicWidget {
      *
      * @returns true when an active note exists
      */
-    isEnabled() {
+    isEnabled(): boolean | null | undefined {
         return !!this.note;
     }
 

src/public/app/widgets/note_list.ts

@@ -1,5 +1,7 @@
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
 import NoteListRenderer from "../services/note_list_renderer.js";
+import type FNote from "../entities/fnote.js";
+import type { EventData } from "../components/app_context.js";
 
 const TPL = `
 <div class="note-list-widget">
@@ -8,19 +10,25 @@ const TPL = `
         min-height: 0;
         overflow: auto;
     }
-    
+
     .note-list-widget .note-list {
         padding: 10px;
     }
     </style>
-    
+
     <div class="note-list-widget-content">
     </div>
 </div>`;
 
 export default class NoteListWidget extends NoteContextAwareWidget {
+
+    private $content!: JQuery<HTMLElement>;
+    private isIntersecting?: boolean;
+    private noteIdRefreshed?: string;
+    private shownNoteId?: string | null;
+
     isEnabled() {
-        return super.isEnabled() && this.noteContext.hasNoteList();
+        return super.isEnabled() && this.noteContext?.hasNoteList();
     }
 
     doRender() {
@@ -50,13 +58,13 @@ export default class NoteListWidget extends NoteContextAwareWidget {
         // console.log(`${this.noteIdRefreshed} === ${this.noteId}`, this.noteIdRefreshed === this.noteId);
         // console.log("this.shownNoteId !== this.noteId", this.shownNoteId !== this.noteId);
 
-        if (this.isIntersecting && this.noteIdRefreshed === this.noteId && this.shownNoteId !== this.noteId) {
+        if (this.note && this.isIntersecting && this.noteIdRefreshed === this.noteId && this.shownNoteId !== this.noteId) {
             this.shownNoteId = this.noteId;
             this.renderNoteList(this.note);
         }
     }
 
-    async renderNoteList(note) {
+    async renderNoteList(note: FNote) {
         const noteListRenderer = new NoteListRenderer(this.$content, note, note.getChildNoteIds());
         await noteListRenderer.renderList();
     }
@@ -67,8 +75,8 @@ export default class NoteListWidget extends NoteContextAwareWidget {
         await super.refresh();
     }
 
-    async refreshNoteListEvent({ noteId }) {
+    async refreshNoteListEvent({ noteId }: EventData<"refreshNoteList">) {
-        if (this.isNote(noteId)) {
+        if (this.isNote(noteId) && this.note) {
             await this.renderNoteList(this.note);
         }
     }
@@ -78,7 +86,7 @@ export default class NoteListWidget extends NoteContextAwareWidget {
      * If it's evaluated before note detail, then it's clearly intersected (visible) although after note detail load
      * it is not intersected (visible) anymore.
      */
-    noteDetailRefreshedEvent({ ntxId }) {
+    noteDetailRefreshedEvent({ ntxId }: EventData<"noteDetailRefreshed">) {
         if (!this.isNoteContext(ntxId)) {
             return;
         }
@@ -88,14 +96,14 @@ export default class NoteListWidget extends NoteContextAwareWidget {
         setTimeout(() => this.checkRenderStatus(), 100);
     }
 
-    notesReloadedEvent({ noteIds }) {
+    notesReloadedEvent({ noteIds }: EventData<"notesReloaded">) {
-        if (noteIds.includes(this.noteId)) {
+        if (this.noteId && noteIds.includes(this.noteId)) {
             this.refresh();
         }
     }
 
-    entitiesReloadedEvent({ loadResults }) {
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId && ["viewType", "expanded", "pageSize"].includes(attr.name))) {
+        if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId && attr.name && ["viewType", "expanded", "pageSize"].includes(attr.name))) {
             this.shownNoteId = null; // force render
 
             this.checkRenderStatus();