From 2ff644ccdb3e886f227a939217a1171f25455d5d Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Mon, 3 Jun 2024 02:56:06 -0500 Subject: [PATCH] Regularize routing for column --- .../map-interface/app-state/handlers/index.ts | 14 ++--- .../map-interface/app-state/reducers/index.ts | 51 +++++++++++++++---- src/pages/map/map-interface/map-page/index.ts | 38 +++++++------- 3 files changed, 67 insertions(+), 36 deletions(-) diff --git a/src/pages/map/map-interface/app-state/handlers/index.ts b/src/pages/map/map-interface/app-state/handlers/index.ts index 061214e4..72822e2e 100644 --- a/src/pages/map/map-interface/app-state/handlers/index.ts +++ b/src/pages/map/map-interface/app-state/handlers/index.ts @@ -51,13 +51,13 @@ async function actionRunner( ); // If we are on the column route, the column layer must be enabled - const colMatch = matchPath( - mapPagePrefix + "/loc/:lng/:lat/column", - pathname - ); - if (colMatch != null) { - coreState1.mapLayers.add(MapLayer.COLUMNS); - } + // const colMatch = matchPath( + // mapPagePrefix + "/loc/:lng/:lat/column", + // pathname + // ); + // if (colMatch != null) { + // coreState1.mapLayers.add(MapLayer.COLUMNS); + // } // Fill out the remainder with defaults diff --git a/src/pages/map/map-interface/app-state/reducers/index.ts b/src/pages/map/map-interface/app-state/reducers/index.ts index f3e6a9f9..061f42d3 100644 --- a/src/pages/map/map-interface/app-state/reducers/index.ts +++ b/src/pages/map/map-interface/app-state/reducers/index.ts @@ -10,6 +10,8 @@ import { contextPanelIsInitiallyOpen } from "../nav-hooks"; import { CoreAction, coreReducer } from "./core"; import { hashStringReducer } from "./hash-string"; import { AppAction, AppState, MenuAction, MenuState } from "./types"; +import update from "immutability-helper"; +import { MapLayer } from "./map"; export const browserHistory = createBrowserHistory(); const routerReducer = createRouterReducer(browserHistory); @@ -45,7 +47,7 @@ function mainReducer( const { pathname } = action.payload.location; const isOpen = contextPanelIsInitiallyOpen(pathname); - let s1 = setInfoMarkerPosition(state); + const s1 = setInfoMarkerPosition(state, pathname); const newRoute = action.payload.location; let newAction = action; @@ -56,7 +58,7 @@ function mainReducer( ...action.payload, location: { ...action.payload.location, - hash: state.router.location.hash, + hash: s1.router.location.hash, }, }, }; @@ -65,7 +67,7 @@ function mainReducer( return { ...s1, core: { ...s1.core, menuOpen: isOpen, contextPanelOpen: isOpen }, - router: routerReducer(state.router, newAction), + router: routerReducer(s1.router, newAction), }; } case "set-menu-page": @@ -92,18 +94,45 @@ const appReducer = (state: AppState, action: AppAction) => { return hashStringReducer(mainReducer(state, action), action); }; -export function setInfoMarkerPosition(state: AppState): AppState { +export function setInfoMarkerPosition( + state: AppState, + pathname: string | null = null +): AppState { // Check if we are viewing a specific location const loc = matchPath( - mapPagePrefix + "/loc/:lng/:lat", - state.router.location.pathname + mapPagePrefix + "/loc/:lng/:lat/*", + pathname ?? state.router.location.pathname ); + + let s1 = state; + + // //If we are on the column route, the column layer must be enabled + // let s1 = state; + // const colMatch = matchPath( + // mapPagePrefix + "/loc/:lng/:lat/column", + // pathname ?? state.router.location.pathname + // ); + // if (colMatch != null) { + // s1 = update(s1, { core: { mapLayers: { $add: [MapLayer.COLUMNS] } } }); + // } + + // // If we are disabling the column route, we should remove the column layer + // const colMatch2 = matchPath( + // mapPagePrefix + "/loc/:lng/:lat/column", + // state.router.location.pathname + // ); + + // if (colMatch2 != null && colMatch == null) { + // s1 = update(s1, { core: { mapLayers: { $remove: [MapLayer.COLUMNS] } } }); + // } + + // Set location if (loc != null) { const { lng, lat } = loc.params; return { - ...state, + ...s1, core: { - ...state.core, + ...s1.core, infoMarkerPosition: { lng: Number(lng), lat: Number(lat) }, infoDrawerOpen: true, }, @@ -113,7 +142,7 @@ export function setInfoMarkerPosition(state: AppState): AppState { // Check if we're viewing a cross-section const crossSection = matchPath( mapPagePrefix + "/cross-section/:loc1/:loc2", - state.router.location.pathname + pathname ?? state.router.location.pathname ); if (crossSection != null) { const { loc1, loc2 } = crossSection.params; @@ -121,9 +150,9 @@ export function setInfoMarkerPosition(state: AppState): AppState { const [lng2, lat2] = loc2.split(",").map(Number); if (lng1 != null && lat1 != null && lng2 != null && lat2 != null) { return { - ...state, + ...s1, core: { - ...state.core, + ...s1.core, crossSectionLine: { type: "LineString", coordinates: [ diff --git a/src/pages/map/map-interface/map-page/index.ts b/src/pages/map/map-interface/map-page/index.ts index f7a18c3c..9c9e8bd0 100644 --- a/src/pages/map/map-interface/map-page/index.ts +++ b/src/pages/map/map-interface/map-page/index.ts @@ -19,6 +19,7 @@ import Searchbar from "../components/navbar"; import styles from "./main.module.styl"; import MapContainer from "./map-view"; import { MenuPage } from "./menu"; +import { info } from "console"; const ElevationChart = loadable(() => import("../components/elevation-chart")); const InfoDrawer = loadable(() => import("../components/info-drawer")); @@ -118,38 +119,39 @@ function InfoDrawerHolder() { h(Routes, [ h(Route, { path: mapPagePrefix + "/loc/:lng/:lat/*", - element: h(InfoDrawerLocationGrabber), + element: h.if(detailPanelTrans.shouldMount)(InfoDrawer, { + className: "detail-panel", + }), }), ]), - h.if(detailPanelTrans.shouldMount)(InfoDrawer, { - className: "detail-panel", - }), + h(InfoDrawerLocationGrabber), ]); } function InfoDrawerLocationGrabber() { // We could probably do this in the reducer... - const { lat, lng } = useParams(); const z = Math.round( useAppState((s) => s.core.mapPosition.target?.zoom) ?? 7 ); + const infoMarkerPosition = useAppState((s) => s.core.infoMarkerPosition); const runAction = useAppActions(); + const { lat, lng } = infoMarkerPosition ?? {}; + // Todo: this is a pretty janky way to do state management useEffect(() => { - if (lat && lng) { - runAction({ - type: "run-map-query", - lat: Number(lat), - lng: Number(lng), - z, - // Focused column or map unit from active layers. - // This is a bit anachronistic, since we want to be - // able to show columns that aren't necessarily shown on the map - columns: [], - map_id: null, - }); - } + if (lat == null || lng == null) return; + runAction({ + type: "run-map-query", + lat: Number(lat), + lng: Number(lng), + z, + // Focused column or map unit from active layers. + // This is a bit anachronistic, since we want to be + // able to show columns that aren't necessarily shown on the map + columns: [], + map_id: null, + }); }, [lat, lng]); return null; }