diff --git a/apps/client/src/widgets/collections/NoteList.tsx b/apps/client/src/widgets/collections/NoteList.tsx index 5781daf60..f19d983c8 100644 --- a/apps/client/src/widgets/collections/NoteList.tsx +++ b/apps/client/src/widgets/collections/NoteList.tsx @@ -51,25 +51,30 @@ export default function NoteList({ note: providedNote, highlig return () => observer.disconnect(); }, []); - const viewStorage = useMemo(() => { - if (!note || !viewType) return; - return new ViewModeStorage(note, viewType); - }, [ note, viewType ]); + // Preload the configuration. + let props: ViewModeProps | undefined | null = null; + const viewModeConfig = useViewModeConfig(note, viewType); + if (note && viewModeConfig) { + props = { + note, noteIds, + highlightedTokens, + viewConfig: viewModeConfig[0], + saveConfig: viewModeConfig[1] + } + } return (
- {viewStorage && isEnabled && ( + {props && isEnabled && (
- {getComponentByViewType(note, noteIds, viewType, highlightedTokens, viewStorage)} + {getComponentByViewType(viewType, props)}
)}
); } -function getComponentByViewType(note: FNote, noteIds: string[], viewType: ViewTypeOptions, highlightedTokens: string[] | null | undefined, viewStorage: ViewModeStorage) { - const props: ViewModeProps = { note, noteIds, highlightedTokens, viewStorage }; - +function getComponentByViewType(viewType: ViewTypeOptions, props: ViewModeProps) { switch (viewType) { case "list": return ; @@ -122,3 +127,18 @@ function useNoteIds(note: FNote | null | undefined, viewType: ViewTypeOptions | return noteIds; } + +function useViewModeConfig(note: FNote | null | undefined, viewType: ViewTypeOptions | undefined) { + const [ viewConfig, setViewConfig ] = useState<[T | undefined, (data: T) => void]>(); + + useEffect(() => { + if (!note || !viewType) return; + const viewStorage = new ViewModeStorage(note, viewType); + viewStorage.restore().then(config => { + const storeFn = (config: T) => viewStorage.store(config); + setViewConfig([ config, storeFn ]); + }); + }, [ note, viewType ]); + + return viewConfig; +} diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index 8bdc8b7a8..293a1f4a6 100644 --- a/apps/client/src/widgets/collections/geomap/index.tsx +++ b/apps/client/src/widgets/collections/geomap/index.tsx @@ -16,32 +16,23 @@ interface MapData { }; } -export default function GeoView({ note, viewStorage }: ViewModeProps) { +export default function GeoView({ note, viewConfig, saveConfig }: ViewModeProps) { const [ layerName ] = useNoteLabel(note, "map:style"); - const viewOptions = useRef(); const spacedUpdate = useSpacedUpdate(() => { - viewStorage.store({ - view: viewOptions.current - }); + if (viewConfig) { + saveConfig(viewConfig); + } }, 5000); - // Clean up on note change. - useEffect(() => { - viewStorage.restore().then(data => { - viewOptions.current = data?.view; - }); - }, [ note ]); - return (
{ - if (!viewOptions.current) return; - viewOptions.current.center = coordinates; - viewOptions.current.zoom = zoom; + if (!viewConfig) viewConfig = {}; + viewConfig.view = { center: coordinates, zoom }; spacedUpdate.scheduleUpdate(); }} /> diff --git a/apps/client/src/widgets/collections/interface.ts b/apps/client/src/widgets/collections/interface.ts index e528db165..4f89a871d 100644 --- a/apps/client/src/widgets/collections/interface.ts +++ b/apps/client/src/widgets/collections/interface.ts @@ -1,6 +1,5 @@ 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; @@ -13,5 +12,6 @@ export interface ViewModeProps { */ noteIds: string[]; highlightedTokens: string[] | null | undefined; - viewStorage: ViewModeStorage; + viewConfig: T | undefined; + saveConfig(newConfig: T): void; } 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 60e9facd0..880ef7230 100644 --- a/apps/client/src/widgets/view_widgets/geo_view/index.ts +++ b/apps/client/src/widgets/view_widgets/geo_view/index.ts @@ -72,8 +72,6 @@ export default class GeoView extends ViewMode { throw new Error(t("geo-map.unable-to-load-map")); } - this.#restoreViewportAndZoom(); - const isEditable = !this.isReadOnly; map.on("click", (e) => this.#onMapClicked(e)) map.on("contextmenu", (e) => openMapContextMenu(this.parentNote.noteId, e, isEditable)); @@ -95,34 +93,6 @@ export default class GeoView extends ViewMode { } } - async #restoreViewportAndZoom() { - const map = this.map; - if (!map) { - return; - } - - const parsedContent = await this.viewStorage.restore(); - - // Restore viewport position & zoom - const center = parsedContent?.view?.center ?? DEFAULT_COORDINATES; - const zoom = parsedContent?.view?.zoom ?? DEFAULT_ZOOM; - } - - private onSave() { - const map = this.map; - let data: MapData = {}; - if (map) { - data = { - view: { - center: , - zoom: - } - }; - } - - - } - async #reloadMarkers() { if (!this.map) { return;