nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: preserve map return context

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/store/StoreTabs.jsx
View File

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

14
frontend/src/pages/LocationMapManager.jsx
View File

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

9
frontend/tests/store-selector.spec.ts
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 page.getByRole("button", { name: "Manage Map" }).click();
await expect(page).toHaveURL(/\/stores\/100\/locations\/13\/map$/); 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 }) => { test("single grocery store selector click does not open picker modal", async ({ page }) => {