refactor(react/collections): reintroduce view mode

apps/client/src/widgets/collections/NoteList.tsx

@@ -3,17 +3,19 @@ import { useNoteContext, useNoteLabel, useTriliumEvent } from "../react/hooks";
 import FNote from "../../entities/fnote";
 import "./NoteList.css";
 import { ListView, GridView } from "./legacy/ListOrGridView";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import GeoView from "./geomap";
+import ViewModeStorage from "../view_widgets/view_mode_storage";
 
-interface NoteListProps {
+interface NoteListProps<T extends object> {
     note?: FNote | null;
     /** if set to `true` then only collection-type views are displayed such as geo-map and the calendar. The original book types grid and list will be ignored. */
     displayOnlyCollections?: boolean;
     highlightedTokens?: string[] | null;
+    viewStorage: ViewModeStorage<T>;
 }
 
-export default function NoteList({ note: providedNote, highlightedTokens, displayOnlyCollections }: NoteListProps) {
+export default function NoteList<T extends object>({ note: providedNote, highlightedTokens, displayOnlyCollections }: NoteListProps<T>) {
     const widgetRef = useRef<HTMLDivElement>(null);
     const { note: contextNote, noteContext } = useNoteContext();
     const note = providedNote ?? contextNote;
@@ -49,19 +51,24 @@ export default function NoteList({ note: providedNote, highlightedTokens, displa
         return () => observer.disconnect();
     }, []);
 
+    const viewStorage = useMemo(() => {
+        if (!note || !viewType) return;
+        return new ViewModeStorage<T>(note, viewType);
+    }, [ note, viewType ]);
+
     return (
         <div ref={widgetRef} className={`note-list-widget ${isFullHeight ? "full-height" : ""}`}>
-            {isEnabled && (
+            {viewStorage && isEnabled && (
                 <div className="note-list-widget-content">
-                    {getComponentByViewType(note, noteIds, viewType, highlightedTokens)}
+                    {getComponentByViewType(note, noteIds, viewType, highlightedTokens, viewStorage)}
                 </div>
             )}
         </div>
     );
 }
 
-function getComponentByViewType(note: FNote, noteIds: string[], viewType: ViewTypeOptions, highlightedTokens: string[] | null | undefined) {
+function getComponentByViewType(note: FNote, noteIds: string[], viewType: ViewTypeOptions, highlightedTokens: string[] | null | undefined, viewStorage: ViewModeStorage<any>) {
-    const props: ViewModeProps = { note, noteIds, highlightedTokens };
+    const props: ViewModeProps<any> = { note, noteIds, highlightedTokens, viewStorage };
 
     switch (viewType) {
         case "list":

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

@@ -3,11 +3,19 @@ import "./index.css";
 import { ViewModeProps } from "../interface";
 import { useNoteLabel } from "../../react/hooks";
 import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
+import { LatLng } from "leaflet";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
 
-export default function GeoView({ note }: ViewModeProps) {
+interface MapData {
+    view?: {
+        center?: LatLng | [number, number];
+        zoom?: number;
+    };
+}
+
+export default function GeoView({ note, viewStorage }: ViewModeProps<MapData>) {
     const [ layerName ] = useNoteLabel(note, "map:style");
 
     return (

apps/client/src/widgets/collections/interface.ts

@@ -1,15 +1,17 @@
 import FNote from "../../entities/fnote";
 import type { ViewModeArgs } from "../view_widgets/view_mode";
+import ViewModeStorage from "../view_widgets/view_mode_storage";
 
 export const allViewTypes = ["list", "grid", "calendar", "table", "geoMap", "board"] as const;
 export type ArgsWithoutNoteId = Omit<ViewModeArgs, "noteIds">;
 export type ViewTypeOptions = typeof allViewTypes[number];
 
-export interface ViewModeProps {
+export interface ViewModeProps<T extends object> {
     note: FNote;
     /**
      * We're using noteIds so that it's not necessary to load all notes at once when paging.
      */
     noteIds: string[];
     highlightedTokens: string[] | null | undefined;
+    viewStorage: ViewModeStorage<T>;
 }

apps/client/src/widgets/view_widgets/geo_view/index.ts

@@ -12,13 +12,6 @@ import { openMapContextMenu } from "./context_menu.js";
 import attributes from "../../../services/attributes.js";
 import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS } from "./map_layer.js";
 
-interface MapData {
-    view?: {
-        center?: LatLng | [number, number];
-        zoom?: number;
-    };
-}
-
 export const LOCATION_ATTRIBUTE = "geolocation";
 
 enum State {

apps/client/src/widgets/view_widgets/view_mode.ts

@@ -57,13 +57,4 @@ export default abstract class ViewMode<T extends object> extends Component {
         return this.parentNote.hasLabel("readOnly");
     }
 
-    get viewStorage() {
-        if (this._viewStorage) {
-            return this._viewStorage;
-        }
-
-        this._viewStorage = new ViewModeStorage<T>(this.parentNote, this.viewType);
-        return this._viewStorage;
-    }
-
 }