fix: preserve map return context

This commit is contained in:
Nico 2026-06-03 10:39:15 -07:00
parent 2a7fa1871f
commit 9d538f97bf
3 changed files with 28 additions and 4 deletions

View File

@ -1,5 +1,5 @@
import { useContext, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useLocation, useNavigate } from 'react-router-dom';
import { StoreContext } from '../../context/StoreContext';
import '../../styles/components/StoreTabs.css';
@ -55,6 +55,7 @@ function buildStoreOptions(stores) {
export default function StoreTabs() {
const { stores, activeStore, setActiveStore, loading } = useContext(StoreContext);
const navigate = useNavigate();
const routeLocation = useLocation();
const [activePicker, setActivePicker] = useState(null);
const storeOptions = useMemo(() => buildStoreOptions(stores || []), [stores]);
const activeStoreKey = getStoreKey(activeStore);
@ -99,7 +100,11 @@ export default function StoreTabs() {
const handleManageMap = () => {
if (!selectedLocation?.id || !selectedStoreOption?.key) return;
navigate(`/stores/${selectedStoreOption.key}/locations/${selectedLocation.id}/map`);
navigate(`/stores/${selectedStoreOption.key}/locations/${selectedLocation.id}/map`, {
state: {
returnTo: `${routeLocation.pathname}${routeLocation.search}${routeLocation.hash}`,
},
});
};
return (

View File

@ -1,5 +1,5 @@
import { useCallback, useContext, useEffect, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import {
createBlankLocationMap,
createLocationMapFromZones,
@ -38,6 +38,8 @@ import "../styles/pages/LocationMapManager.css";
export default function LocationMapManager() {
const { storeId, locationId } = useParams();
const navigate = useNavigate();
const routeLocation = useLocation();
const returnPath = routeLocation.state?.returnTo;
const toast = useActionToast();
const { username } = useContext(AuthContext);
const { activeHousehold, loading: householdLoading, hasLoaded } = useContext(HouseholdContext);
@ -400,6 +402,14 @@ export default function LocationMapManager() {
setZoom(Number(nextZoom.toFixed(2)));
};
const handleBack = useCallback(() => {
if (typeof returnPath === "string" && returnPath.startsWith("/")) {
navigate(returnPath, { replace: true });
return;
}
navigate("/");
}, [navigate, returnPath]);
if (!hasLoaded || householdLoading || loading) {
return (
<div className="location-map-page">
@ -421,7 +431,7 @@ export default function LocationMapManager() {
return (
<div className="location-map-page">
<LocationMapTopbar location={location} status={status} onBack={() => navigate(-1)} />
<LocationMapTopbar location={location} status={status} onBack={handleBack} />
<main className="location-map-workspace">
<LocationMapToolbar

View File

@ -182,6 +182,15 @@ test("grocery store selector shows one selected store and picks from a modal", a
await page.getByRole("button", { name: "Manage Map" }).click();
await expect(page).toHaveURL(/\/stores\/100\/locations\/13\/map$/);
await expect(page.getByRole("heading", { name: "Costco" })).toBeVisible();
await expect(page.getByText("Fontana")).toBeVisible();
await expect(page.getByRole("heading", { name: "No Map" })).toBeVisible();
await page.getByRole("button", { name: "Back" }).click();
await expect(page).toHaveURL(/\/$/);
await expect(storeSelector).toContainText("Costco");
await expect(locationSelector).toContainText("Fontana");
await expect(page.getByRole("button", { name: "Manage Map" })).toBeVisible();
});
test("single grocery store selector click does not open picker modal", async ({ page }) => {