chore(react/collections/geomap): restore state

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

@@ -51,25 +51,30 @@ export default function NoteList<T extends object>({ note: providedNote, highlig
         return () => observer.disconnect();
     }, []);
 
-    const viewStorage = useMemo(() => {
+    // Preload the configuration.
-        if (!note || !viewType) return;
+    let props: ViewModeProps<any> | undefined | null = null;
-        return new ViewModeStorage<T>(note, viewType);
+    const viewModeConfig = useViewModeConfig(note, viewType);
-    }, [ note, viewType ]);
+    if (note && viewModeConfig) {
+        props = {
+            note, noteIds,
+            highlightedTokens,
+            viewConfig: viewModeConfig[0],
+            saveConfig: viewModeConfig[1]
+        }
+    }
 
     return (
         <div ref={widgetRef} className={`note-list-widget ${isFullHeight ? "full-height" : ""}`}>
-            {viewStorage && isEnabled && (
+            {props && isEnabled && (
                 <div className="note-list-widget-content">
-                    {getComponentByViewType(note, noteIds, viewType, highlightedTokens, viewStorage)}
+                    {getComponentByViewType(viewType, props)}
                 </div>
             )}
         </div>
     );
 }
 
-function getComponentByViewType(note: FNote, noteIds: string[], viewType: ViewTypeOptions, highlightedTokens: string[] | null | undefined, viewStorage: ViewModeStorage<any>) {
+function getComponentByViewType(viewType: ViewTypeOptions, props: ViewModeProps<any>) {
-    const props: ViewModeProps<any> = { note, noteIds, highlightedTokens, viewStorage };
-
     switch (viewType) {
         case "list":
             return <ListView {...props} />;
@@ -122,3 +127,18 @@ function useNoteIds(note: FNote | null | undefined, viewType: ViewTypeOptions |
 
     return noteIds;
 }
+
+function useViewModeConfig<T extends object>(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<T>(note, viewType);
+        viewStorage.restore().then(config => {
+            const storeFn = (config: T) => viewStorage.store(config);
+            setViewConfig([ config, storeFn ]);
+        });
+    }, [ note, viewType ]);
+
+    return viewConfig;
+}

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

@@ -16,32 +16,23 @@ interface MapData {
     };
 }
 
-export default function GeoView({ note, viewStorage }: ViewModeProps<MapData>) {
+export default function GeoView({ note, viewConfig, saveConfig }: ViewModeProps<MapData>) {
     const [ layerName ] = useNoteLabel(note, "map:style");
-    const viewOptions = useRef<MapData["view"]>();
     const spacedUpdate = useSpacedUpdate(() => {
-        viewStorage.store({
+        if (viewConfig) {
-            view: viewOptions.current
+            saveConfig(viewConfig);
-        });
+        }
     }, 5000);
 
-    // Clean up on note change.
-    useEffect(() => {
-        viewStorage.restore().then(data => {
-            viewOptions.current = data?.view;
-        });
-    }, [ note ]);
-
     return (
         <div className="geo-view">
             <Map
-                coordinates={DEFAULT_COORDINATES}
+                coordinates={viewConfig?.view?.center ?? DEFAULT_COORDINATES}
-                zoom={DEFAULT_ZOOM}
+                zoom={viewConfig?.view?.zoom ?? DEFAULT_ZOOM}
                 layerName={layerName ?? DEFAULT_MAP_LAYER_NAME}
                 viewportChanged={(coordinates, zoom) => {
-                    if (!viewOptions.current) return;
+                    if (!viewConfig) viewConfig = {};
-                    viewOptions.current.center = coordinates;
+                    viewConfig.view = { center: coordinates, zoom };
-                    viewOptions.current.zoom = zoom;
                     spacedUpdate.scheduleUpdate();
                 }}
             />

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<ViewModeArgs, "noteIds">;
@@ -13,5 +12,6 @@ export interface ViewModeProps<T extends object> {
      */
     noteIds: string[];
     highlightedTokens: string[] | null | undefined;
-    viewStorage: ViewModeStorage<T>;
+    viewConfig: T | undefined;
+    saveConfig(newConfig: T): void;
 }

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

@@ -72,8 +72,6 @@ export default class GeoView extends ViewMode<MapData> {
             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<MapData> {
         }
     }
 
-    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;