refactor(react/collections/table): use class-based API

apps/client/src/widgets/collections/board/api.ts

@@ -2,11 +2,17 @@ import FNote from "../../../entities/fnote";
 import attributes from "../../../services/attributes";
 import note_create from "../../../services/note_create";
 
-export async function createNewItem(parentNote: FNote, column: string) {
+export default class BoardApi {
+
+    constructor(
+        private parentNote: FNote,
+        private statusAttribute: string
+    ) {};
+
+    async createNewItem(column: string) {
         try {
             // Get the parent note path
-        const parentNotePath = parentNote.noteId;
-        const statusAttribute = parentNote.getLabelValue("board:groupBy") ?? "status";
+            const parentNotePath = this.parentNote.noteId;
 
             // Create a new note as a child of the parent note
             const { note: newNote } = await note_create.createNote(parentNotePath, {
@@ -16,7 +22,7 @@ export async function createNewItem(parentNote: FNote, column: string) {
 
             if (newNote) {
                 // Set the status label to place it in the correct column
-            await changeColumn(newNote.noteId, column, statusAttribute);
+                await this.changeColumn(newNote.noteId, column);
 
                 // Start inline editing of the newly created card
                 //this.startInlineEditingCard(newNote.noteId);
@@ -24,8 +30,11 @@ export async function createNewItem(parentNote: FNote, column: string) {
         } catch (error) {
             console.error("Failed to create new item:", error);
         }
+    }
+
+    async changeColumn(noteId: string, newColumn: string) {
+        await attributes.setLabel(noteId, this.statusAttribute, newColumn);
+    }
+
 }
 
-export async function changeColumn(noteId: string, newColumn: string, statusAttribute: string) {
-    await attributes.setLabel(noteId, statusAttribute, newColumn);
-}

apps/client/src/widgets/collections/board/index.tsx

@@ -1,13 +1,13 @@
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { ViewModeProps } from "../interface";
 import "./index.css";
 import { ColumnMap, getBoardData } from "./data";
-import { useNoteLabel, useTriliumEvent } from "../../react/hooks";
+import { useNoteLabelWithDefault, useTriliumEvent } from "../../react/hooks";
 import FNote from "../../../entities/fnote";
 import FBranch from "../../../entities/fbranch";
 import Icon from "../../react/Icon";
 import { t } from "../../../services/i18n";
-import { createNewItem, changeColumn } from "./api";
+import Api from "./api";
 import FormTextBox from "../../react/FormTextBox";
 import branchService from "../../../services/branches";
 
@@ -20,7 +20,7 @@ export interface BoardColumnData {
 }
 
 export default function BoardView({ note: parentNote, noteIds, viewConfig, saveConfig }: ViewModeProps<BoardViewData>) {
-    const [ statusAttribute ] = useNoteLabel(parentNote, "board:groupBy");
+    const [ statusAttribute ] = useNoteLabelWithDefault(parentNote, "board:groupBy", "status");
     const [ byColumn, setByColumn ] = useState<ColumnMap>();
     const [ columns, setColumns ] = useState<string[]>();
     const [ draggedCard, setDraggedCard ] = useState<{ noteId: string, branchId: string, fromColumn: string, index: number } | null>(null);
@@ -28,9 +28,12 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
     const [ dropPosition, setDropPosition ] = useState<{ column: string, index: number } | null>(null);
     const [ draggedColumn, setDraggedColumn ] = useState<{ column: string, index: number } | null>(null);
     const [ columnDropPosition, setColumnDropPosition ] = useState<number | null>(null);
+    const api = useMemo(() => {
+        return new Api(parentNote, statusAttribute);
+    }, [ parentNote, statusAttribute ]);
 
     function refresh() {
-        getBoardData(parentNote, statusAttribute ?? "status", viewConfig ?? {}).then(({ byColumn, newPersistedData }) => {
+        getBoardData(parentNote, statusAttribute, viewConfig ?? {}).then(({ byColumn, newPersistedData }) => {
             setByColumn(byColumn);
 
             if (newPersistedData) {
@@ -132,10 +135,10 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
                             <div className="column-drop-placeholder show" />
                         )}
                         <Column
+                            api={api}
                             column={column}
                             columnIndex={index}
                             columnItems={byColumn.get(column)}
-                            parentNote={parentNote}
                             statusAttribute={statusAttribute ?? "status"}
                             draggedCard={draggedCard}
                             setDraggedCard={setDraggedCard}
@@ -161,7 +164,6 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
 }
 
 function Column({
-    parentNote,
     column,
     columnIndex,
     columnItems,
@@ -175,9 +177,9 @@ function Column({
     onCardDrop,
     draggedColumn,
     setDraggedColumn,
-    isDraggingColumn
+    isDraggingColumn,
+    api
 }: {
-    parentNote: FNote,
     column: string,
     columnIndex: number,
     columnItems?: { note: FNote, branch: FBranch }[],
@@ -191,7 +193,8 @@ function Column({
     onCardDrop: () => void,
     draggedColumn: { column: string, index: number } | null,
     setDraggedColumn: (column: { column: string, index: number } | null) => void,
-    isDraggingColumn: boolean
+    isDraggingColumn: boolean,
+    api: Api
 }) {
     const handleColumnDragStart = useCallback((e: DragEvent) => {
         e.dataTransfer!.effectAllowed = 'move';
@@ -250,7 +253,7 @@ function Column({
 
             if (draggedCard.fromColumn !== column) {
                 // Moving to a different column
-                await changeColumn(draggedCard.noteId, column, statusAttribute);
+                await api.changeColumn(draggedCard.noteId, column);
 
                 // If there are items in the target column, reorder
                 if (targetItems.length > 0 && targetIndex < targetItems.length) {
@@ -323,7 +326,7 @@ function Column({
                 <div className="board-drop-placeholder show" />
             )}
 
-            <div className="board-new-item" onClick={() => createNewItem(parentNote, column)}>
+            <div className="board-new-item" onClick={() => api.createNewItem(column)}>
                 <Icon icon="bx bx-plus" />{" "}
                 {t("board_view.new-item")}
             </div>

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

@@ -324,6 +324,11 @@ export function useNoteLabel(note: FNote | undefined | null, labelName: string):
     ] as const;
 }
 
+export function useNoteLabelWithDefault(note: FNote | undefined | null, labelName: string, defaultValue: string): [string, (newValue: string | null | undefined) => void] {
+    const [ labelValue, setLabelValue ] = useNoteLabel(note, labelName);
+    return [ labelValue ?? defaultValue, setLabelValue];
+}
+
 export function useNoteLabelBoolean(note: FNote | undefined | null, labelName: string): [ boolean, (newValue: boolean) => void] {
     const [ labelValue, setLabelValue ] = useState<boolean>(!!note?.hasLabel(labelName));