fix(web): save basemap to project

Author: majkshkurti

apps/web/app/[lng]/map/[projectId]/page.tsx

@@ -18,26 +18,24 @@ import {
 } from "@/lib/api/projects";
 import { PATTERN_IMAGES } from "@/lib/constants/pattern-images";
 import { DrawProvider } from "@/lib/providers/DrawProvider";
-import { selectActiveBasemap } from "@/lib/store/map/selectors";
 import { addOrUpdateMarkerImages, addPatternImages } from "@/lib/transformers/map-image";
 import type { FeatureLayerPointProperties } from "@/lib/validations/layer";
 
 import { useAuthZ } from "@/hooks/auth/AuthZ";
 import { useJobStatus } from "@/hooks/jobs/JobStatus";
 import { useFilteredProjectLayers } from "@/hooks/map/LayerPanelHooks";
-import { useAppSelector } from "@/hooks/store/ContextHooks";
+import { useBasemap } from "@/hooks/map/MapHooks";
 
 import { LoadingPage } from "@/components/common/LoadingPage";
 import Header from "@/components/header/Header";
 import MapViewer from "@/components/map/MapViewer";
 import ProjectNavigation from "@/components/map/panels/ProjectNavigation";
 
-const UPDATE_VIEW_STATE_DEBOUNCE_TIME = 3000;
+const UPDATE_VIEW_STATE_DEBOUNCE_TIME = 200;
 
 export default function MapPage({ params: { projectId } }) {
   const theme = useTheme();
   const { t } = useTranslation("common");
-  const activeBasemap = useAppSelector(selectActiveBasemap);
   const mapRef = useRef<MapRef | null>(null);
   const {
     project,
@@ -59,6 +57,8 @@ export default function MapPage({ params: { projectId } }) {
     mutate: mutateProjectLayers,
   } = useFilteredProjectLayers(projectId, ["table"], []);
 
+  const { activeBasemap } = useBasemap(project);
+
   const { isProjectEditor, isLoading: isAuthZLoading } = useAuthZ();
 
   const { scenarioFeatures } = useProjectScenarioFeatures(projectId, project?.active_scenario_id);
@@ -129,6 +129,8 @@ export default function MapPage({ params: { projectId } }) {
     }
   };
 
+  console.log(initialView);
+
   return (
     <>
       {isLoading && <LoadingPage />}
@@ -152,7 +154,7 @@ export default function MapPage({ params: { projectId } }) {
                 },
               }}>
               <Box>
-                <ProjectNavigation projectId={projectId} />
+                <ProjectNavigation project={project} onProjectUpdate={handleProjectUpdate} />
               </Box>
               <MapViewer
                 layers={projectLayers}

apps/web/app/[lng]/map/public/[projectId]/page.tsx

@@ -11,11 +11,11 @@ import { usePublicProject } from "@/lib/api/projects";
 import type { RootState } from "@/lib/store";
 import { selectFilteredProjectLayers } from "@/lib/store/layer/selectors";
 import { setProjectLayers } from "@/lib/store/layer/slice";
-import { selectActiveBasemap } from "@/lib/store/map/selectors";
 import { setProject } from "@/lib/store/map/slice";
 import type { Project, ProjectLayer } from "@/lib/validations/project";
 
-import { useAppDispatch, useAppSelector } from "@/hooks/store/ContextHooks";
+import { useBasemap } from "@/hooks/map/MapHooks";
+import { useAppDispatch } from "@/hooks/store/ContextHooks";
 
 import { LoadingPage } from "@/components/common/LoadingPage";
 import Header from "@/components/header/Header";
@@ -26,13 +26,13 @@ export default function MapPage({ params: { projectId } }) {
   const { sharedProject, isLoading, isError: projectError } = usePublicProject(projectId);
   const theme = useTheme();
   const dispatch = useAppDispatch();
-  const activeBasemap = useAppSelector(selectActiveBasemap);
+  const { activeBasemap } = useBasemap(sharedProject?.config?.["project"] as Project);
   const projectLayers = useMemo(() => {
     return sharedProject?.config?.["layers"] ?? ([] as ProjectLayer[]);
   }, [sharedProject]);
   const project = sharedProject?.config?.["project"] as Project;
   const mapRef = useRef<MapRef | null>(null);
-  const initialView = sharedProject?.config?.["initial_view_state"] ?? {};
+  const initialView = sharedProject?.config?.["project"]?.["initial_view_state"] ?? {};
 
   const _projectLayers = useSelector(
     (state: RootState) => selectFilteredProjectLayers(state, ["table"]),
@@ -63,7 +63,7 @@ export default function MapPage({ params: { projectId } }) {
               },
             }}>
             <Box>
-              <PublicProjectNavigation projectLayers={_projectLayers} />
+              <PublicProjectNavigation projectLayers={_projectLayers} project={project} />
             </Box>
             <MapViewer
               layers={_projectLayers}

apps/web/components/map/panels/ProjectNavigation.tsx

@@ -6,14 +6,16 @@ import { ICON_NAME } from "@p4b/ui/components/Icon";
 import { useTranslation } from "@/i18n/client";
 
 import { MAPBOX_TOKEN } from "@/lib/constants";
-import { setActiveBasemap, setActiveLeftPanel, setActiveRightPanel } from "@/lib/store/map/slice";
+import { setActiveLeftPanel, setActiveRightPanel } from "@/lib/store/map/slice";
 import { layerType } from "@/lib/validations/common";
 import { FeatureName } from "@/lib/validations/organization";
+import type { Project } from "@/lib/validations/project";
 
 import { MapSidebarItemID } from "@/types/map/common";
 
 import { useAuthZ } from "@/hooks/auth/AuthZ";
 import { useActiveLayer, useFilteredProjectLayers, useLayerActions } from "@/hooks/map/LayerPanelHooks";
+import { useBasemap } from "@/hooks/map/MapHooks";
 import { useAppDispatch, useAppSelector } from "@/hooks/store/ContextHooks";
 
 import MapSidebar from "@/components/map/Sidebar";
@@ -35,20 +37,21 @@ const sidebarWidth = 52;
 const toolbarHeight = 52;
 
 interface ProjectNavigationProps {
-  projectId: string;
+  project: Project;
   isPublic?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onProjectUpdate?: (key: string, value: any, refresh?: boolean) => void;
 }
 
-const ProjectNavigation = ({ projectId }: ProjectNavigationProps) => {
+const ProjectNavigation = ({ project, onProjectUpdate }: ProjectNavigationProps) => {
   const theme = useTheme();
-  const { t, i18n } = useTranslation("common");
+  const { t } = useTranslation("common");
   const dispatch = useAppDispatch();
-  const basemaps = useAppSelector((state) => state.map.basemaps);
-  const activeBasemap = useAppSelector((state) => state.map.activeBasemap);
+  const projectId = project.id;
+  const { translatedBaseMaps, activeBasemap } = useBasemap(project);
   const activeLeft = useAppSelector((state) => state.map.activeLeftPanel);
   const activeRight = useAppSelector((state) => state.map.activeRightPanel);
   const { activeLayer } = useActiveLayer(projectId);
-
   const prevActiveLeftRef = useRef<MapSidebarItemID | undefined>(undefined);
   const prevActiveRightRef = useRef<MapSidebarItemID | undefined>(undefined);
   const { isProjectEditor, isAppFeatureEnabled } = useAuthZ();
@@ -75,17 +78,6 @@ const ProjectNavigation = ({ projectId }: ProjectNavigationProps) => {
     position: "left",
   };
 
-  const translatedBaseMaps = useMemo(() => {
-    return basemaps.map((basemap) => ({
-      ...basemap,
-      title: i18n.exists(`common:basemap_types.${basemap.value}.title`)
-        ? t(`basemap_types.${basemap.value}.title`)
-        : t(basemap.title),
-      subtitle: i18n.exists(`common:basemap_types.${basemap.value}.subtitle`)
-        ? t(`basemap_types.${basemap.value}.subtitle`)
-        : t(basemap.subtitle),
-    }));
-  }, [basemaps, i18n, t]);
   const rightSidebar: MapSidebarProps = {
     topItems: [
       {
@@ -266,9 +258,9 @@ const ProjectNavigation = ({ projectId }: ProjectNavigationProps) => {
           <Stack direction="column" sx={{ pointerEvents: "all" }}>
             <BasemapSelector
               styles={translatedBaseMaps}
-              active={activeBasemap}
-              basemapChange={(basemap) => {
-                dispatch(setActiveBasemap(basemap));
+              active={activeBasemap.value}
+              basemapChange={async (basemap) => {
+                await onProjectUpdate?.("basemap", basemap);
               }}
             />
           </Stack>

apps/web/components/map/panels/PublicProjectNavigation.tsx

@@ -1,14 +1,14 @@
 import { Stack, useTheme } from "@mui/material";
-import React, { useMemo } from "react";
+import React from "react";
 
 import { useTranslation } from "@/i18n/client";
 
 import { MAPBOX_TOKEN } from "@/lib/constants";
 import { updateProjectLayer } from "@/lib/store/layer/slice";
-import { setActiveBasemap } from "@/lib/store/map/slice";
-import type { ProjectLayer } from "@/lib/validations/project";
+import type { Project, ProjectLayer } from "@/lib/validations/project";
 
-import { useAppDispatch, useAppSelector } from "@/hooks/store/ContextHooks";
+import { useBasemap } from "@/hooks/map/MapHooks";
+import { useAppDispatch } from "@/hooks/store/ContextHooks";
 
 import { BasemapSelector } from "@/components/map/controls/BasemapSelector";
 import { Fullscren } from "@/components/map/controls/Fullscreen";
@@ -19,27 +19,18 @@ import Legend from "@/components/map/panels/Legend";
 const toolbarHeight = 52;
 
 interface ProjectNavigationProps {
+  project: Project;
   projectLayers?: ProjectLayer[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onProjectUpdate?: (key: string, value: any, refresh?: boolean) => void;
 }
 
-const PublicProjectNavigation = ({ projectLayers = [] }: ProjectNavigationProps) => {
+const PublicProjectNavigation = ({ projectLayers = [], project }: ProjectNavigationProps) => {
   const theme = useTheme();
-  const { t, i18n } = useTranslation("common");
+  const { t } = useTranslation("common");
   const dispatch = useAppDispatch();
-  const basemaps = useAppSelector((state) => state.map.basemaps);
-  const activeBasemap = useAppSelector((state) => state.map.activeBasemap);
 
-  const translatedBaseMaps = useMemo(() => {
-    return basemaps.map((basemap) => ({
-      ...basemap,
-      title: i18n.exists(`common:basemap_types.${basemap.value}.title`)
-        ? t(`basemap_types.${basemap.value}.title`)
-        : t(basemap.title),
-      subtitle: i18n.exists(`common:basemap_types.${basemap.value}.subtitle`)
-        ? t(`basemap_types.${basemap.value}.subtitle`)
-        : t(basemap.subtitle),
-    }));
-  }, [basemaps, i18n, t]);
+  const { translatedBaseMaps, activeBasemap, setActiveBasemap } = useBasemap(project);
 
   return (
     <>
@@ -117,9 +108,9 @@ const PublicProjectNavigation = ({ projectLayers = [] }: ProjectNavigationProps)
           <Stack direction="column" sx={{ pointerEvents: "all" }}>
             <BasemapSelector
               styles={translatedBaseMaps}
-              active={activeBasemap}
+              active={activeBasemap?.value}
               basemapChange={(basemap) => {
-                dispatch(setActiveBasemap(basemap));
+                setActiveBasemap(basemap);
               }}
             />
           </Stack>

apps/web/hooks/map/CommonHooks.ts

@@ -37,4 +37,5 @@ const useLayerFields = (
   };
 };
 
+
 export default useLayerFields;

apps/web/hooks/map/MapHooks.ts

@@ -0,0 +1,77 @@
+import { useCallback, useMemo } from "react";
+
+import type { Basemap } from "@/types/map/common";
+
+import { useAppDispatch, useAppSelector } from "@/hooks/store/ContextHooks";
+import { useTranslation } from "@/i18n/client";
+import { setActiveBasemap as setActiveBasemapAction } from "@/lib/store/map/slice";
+
+export const useBasemap = (project) => {
+  const { t, i18n } = useTranslation("common");
+
+  const basemaps = useAppSelector((state) => state.map.basemaps);
+  const localBasemap = useAppSelector((state) => state.map.activeBasemap);
+  const dispatch = useAppDispatch();
+
+  const activeBasemap: Basemap = useMemo(() => {
+    if (!project) {
+      return basemaps[0];
+    }
+    if (localBasemap) {
+      return localBasemap;
+    }
+    if (project.basemap?.startsWith("http")) {
+      const obj = {
+        url: project.basemap,
+        value: "custom",
+        title: "Custom",
+        subtitle: "User defined basemap",
+        thumbnail: basemaps[0].thumbnail,
+      };
+
+      return obj;
+    } else {
+      const found = basemaps.find((b) => b.value === project.basemap);
+      if (found) {
+        return found;
+      }
+    }
+    return basemaps[0];
+  }, [basemaps, localBasemap, project]);
+
+
+  const translatedBaseMaps = useMemo(() => {
+    return basemaps.map((basemap) => ({
+      ...basemap,
+      title: i18n.exists(`common:basemap_types.${basemap.value}.title`)
+        ? t(`basemap_types.${basemap.value}.title`)
+        : t(basemap.title),
+      subtitle: i18n.exists(`common:basemap_types.${basemap.value}.subtitle`)
+        ? t(`basemap_types.${basemap.value}.subtitle`)
+        : t(basemap.subtitle),
+    }));
+  }, [basemaps, i18n, t]);
+
+  const setActiveBasemap = useCallback((value: string) => {
+    const found = basemaps.find((b) => b.value === value);
+    if (found) {
+      dispatch(setActiveBasemapAction(found));
+    } else if (value.startsWith("http")) {
+      const customBasemap = {
+        url: value,
+        value: "custom",
+        title: "Custom",
+        subtitle: "User defined basemap",
+        thumbnail: basemaps[0].thumbnail,
+      }
+      dispatch(setActiveBasemapAction(customBasemap));
+    }
+  }, [basemaps, dispatch]);
+
+  return {
+    basemaps,
+    translatedBaseMaps,
+    activeBasemap,
+    setActiveBasemap,
+  };
+};

apps/web/lib/store/map/slice.ts

@@ -12,7 +12,7 @@ import type { Project } from "@/lib/validations/project";
 export interface MapState {
   project: Project | undefined;
   basemaps: Basemap[];
-  activeBasemap: string;
+  activeBasemap: Basemap | undefined;
   maskLayer: string | undefined; // Toolbox mask layer
   toolboxStartingPoints: [number, number][] | undefined;
   activeLeftPanel: MapSidebarItemID | undefined;
@@ -80,7 +80,7 @@ const initialState = {
     }
   ],
   maskLayer: undefined,
-  activeBasemap: "streets",
+  activeBasemap: undefined,
   activeLeftPanel: MapSidebarItemID.LAYERS,
   toolboxStartingPoints: undefined,
   activeRightPanel: undefined,
@@ -105,7 +105,7 @@ const mapSlice = createSlice({
         state.project = { ...state.project, ...action.payload };
       }
     },
-    setActiveBasemap: (state, action: PayloadAction<string>) => {
+    setActiveBasemap: (state, action: PayloadAction<Basemap>) => {
       state.activeBasemap = action.payload;
     },
     setActiveLeftPanel: (state, action: PayloadAction<MapSidebarItemID | undefined>) => {

apps/web/lib/validations/project.ts

@@ -34,6 +34,7 @@ export const projectSchema = contentMetadataSchema.extend({
   layer_order: z.array(z.number()),
   max_extent: z.tuple([z.number(), z.number(), z.number(), z.number()]).optional(),
   active_scenario_id: z.string().nullable(),
+  basemap: z.string().optional(),
   updated_at: z.string(),
   created_at: z.string(),
   shared_with: shareProjectSchema.optional(),