diff --git a/apps/client/src/widgets/collections/NoteList.tsx b/apps/client/src/widgets/collections/NoteList.tsx index 501944158..5781daf60 100644 --- a/apps/client/src/widgets/collections/NoteList.tsx +++ b/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 { 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; } -export default function NoteList({ note: providedNote, highlightedTokens, displayOnlyCollections }: NoteListProps) { +export default function NoteList({ note: providedNote, highlightedTokens, displayOnlyCollections }: NoteListProps) { const widgetRef = useRef(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(note, viewType); + }, [ note, viewType ]); + return (
- {isEnabled && ( + {viewStorage && isEnabled && (
- {getComponentByViewType(note, noteIds, viewType, highlightedTokens)} + {getComponentByViewType(note, noteIds, viewType, highlightedTokens, viewStorage)}
)}
); } -function getComponentByViewType(note: FNote, noteIds: string[], viewType: ViewTypeOptions, highlightedTokens: string[] | null | undefined) { - const props: ViewModeProps = { note, noteIds, highlightedTokens }; +function getComponentByViewType(note: FNote, noteIds: string[], viewType: ViewTypeOptions, highlightedTokens: string[] | null | undefined, viewStorage: ViewModeStorage) { + const props: ViewModeProps = { note, noteIds, highlightedTokens, viewStorage }; switch (viewType) { case "list": diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index 0a490b1f3..39081c5ed 100644 --- a/apps/client/src/widgets/collections/geomap/index.tsx +++ b/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) { const [ layerName ] = useNoteLabel(note, "map:style"); return ( diff --git a/apps/client/src/widgets/collections/interface.ts b/apps/client/src/widgets/collections/interface.ts index 80c194f31..e528db165 100644 --- a/apps/client/src/widgets/collections/interface.ts +++ b/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; export type ViewTypeOptions = typeof allViewTypes[number]; -export interface ViewModeProps { +export interface ViewModeProps { 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; } diff --git a/apps/client/src/widgets/view_widgets/geo_view/index.ts b/apps/client/src/widgets/view_widgets/geo_view/index.ts index 845df3813..fa23b6e0e 100644 --- a/apps/client/src/widgets/view_widgets/geo_view/index.ts +++ b/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 { diff --git a/apps/client/src/widgets/view_widgets/view_mode.ts b/apps/client/src/widgets/view_widgets/view_mode.ts index cb7d3a8a8..303eac985 100644 --- a/apps/client/src/widgets/view_widgets/view_mode.ts +++ b/apps/client/src/widgets/view_widgets/view_mode.ts @@ -57,13 +57,4 @@ export default abstract class ViewMode extends Component { return this.parentNote.hasLabel("readOnly"); } - get viewStorage() { - if (this._viewStorage) { - return this._viewStorage; - } - - this._viewStorage = new ViewModeStorage(this.parentNote, this.viewType); - return this._viewStorage; - } - }