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

fix: memoize map bottom sheet summaries

Browse Source
This commit is contained in:
Nico 2026-06-04 04:05:36 -07:00
parent c945a71f45
commit b0cfaeba60
1 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/maps/LocationMapBottomSheet.jsx
View File

@ -1,3 +1,4 @@
import { useMemo } from "react";
import { import {
DEFAULT_MAP_FILTERS, DEFAULT_MAP_FILTERS,
getMapObjectDisplayLabel, getMapObjectDisplayLabel,
@ -17,6 +18,7 @@ const DISPLAY_CONTROLS = [
["showCompleted", "Bought"], ["showCompleted", "Bought"],
["showUnmapped", "Unmapped"], ["showUnmapped", "Unmapped"],
]; ];
const EMPTY_ITEMS = [];
export default function LocationMapBottomSheet({ export default function LocationMapBottomSheet({
mode, mode,
@ -28,9 +30,9 @@ export default function LocationMapBottomSheet({
setLayersOpen, setLayersOpen,
selectedObject, selectedObject,
mapObjects = [], mapObjects = [],
selectedZoneItems, selectedZoneItems = EMPTY_ITEMS,
visibleAssignedItemCount = 0, visibleAssignedItemCount = 0,
visibleUnmappedItems, visibleUnmappedItems = EMPTY_ITEMS,
unmappedItemCount, unmappedItemCount,
hiddenAreaCount, hiddenAreaCount,
saving, saving,
@ -48,9 +50,25 @@ export default function LocationMapBottomSheet({
onShowHiddenAreas, onShowHiddenAreas,
}) { }) {
const selectedTitle = getMapObjectDisplayLabel(selectedObject); const selectedTitle = getMapObjectDisplayLabel(selectedObject);
const selectedAssignedItems = selectedObject?.zone_id const selectedZoneId = objectZoneId(selectedObject);
? (mapState?.items || []).filter((item) => String(item.zone_id || "") === objectZoneId(selectedObject)) const mapItems = mapState?.items || EMPTY_ITEMS;
: []; const { assignedItemCount, selectedAssignedItems } = useMemo(() => {
const nextSelectedAssignedItems = [];
let nextAssignedItemCount = 0;
mapItems.forEach((item) => {
if (!item.zone_id) return;
nextAssignedItemCount += 1;
if (selectedZoneId && String(item.zone_id) === selectedZoneId) {
nextSelectedAssignedItems.push(item);
}
});
return {
assignedItemCount: nextAssignedItemCount,
selectedAssignedItems: nextSelectedAssignedItems,
};
}, [mapItems, selectedZoneId]);
const hiddenSelectedItemCount = Math.max(0, selectedAssignedItems.length - selectedZoneItems.length); const hiddenSelectedItemCount = Math.max(0, selectedAssignedItems.length - selectedZoneItems.length);
const hasHiddenSelectedItems = hiddenSelectedItemCount > 0; const hasHiddenSelectedItems = hiddenSelectedItemCount > 0;
const selectedItemCountLabel = hasHiddenSelectedItems const selectedItemCountLabel = hasHiddenSelectedItems
@ -68,16 +86,24 @@ export default function LocationMapBottomSheet({
const showHeaderItemCount = mode !== "edit" && Boolean(selectedObject); const showHeaderItemCount = mode !== "edit" && Boolean(selectedObject);
const showEditorControls = mode === "edit" && canManage; const showEditorControls = mode === "edit" && canManage;
const showSelectedObjectForm = Boolean(mode === "edit" && editorTool === "edit" && selectedObject); const showSelectedObjectForm = Boolean(mode === "edit" && editorTool === "edit" && selectedObject);
const changedLayerCount = DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length; const changedLayerCount = useMemo(
const assignedItemCount = (mapState?.items || []).filter((item) => item.zone_id).length; () => DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length,
[filters]
);
const totalAreaCount = mapObjects.length; const totalAreaCount = mapObjects.length;
const visibleAreaCount = filters.showZones const visibleAreaCount = filters.showZones
? Math.max(0, totalAreaCount - hiddenAreaCount) ? Math.max(0, totalAreaCount - hiddenAreaCount)
: 0; : 0;
const showMapOverview = mode !== "edit" && !selectedObject; const showMapOverview = mode !== "edit" && !selectedObject;
const unlinkedAreaCount = mapObjects.filter((object) => !objectZoneId(object)).length; const unlinkedAreaCount = useMemo(
() => mapObjects.filter((object) => !objectZoneId(object)).length,
[mapObjects]
);
const showDraftOverview = mode === "edit" && editorTool === "edit" && !selectedObject; const showDraftOverview = mode === "edit" && editorTool === "edit" && !selectedObject;
const unmappedItemPreview = visibleUnmappedItems.slice(0, 8); const unmappedItemPreview = useMemo(
() => visibleUnmappedItems.slice(0, 8),
[visibleUnmappedItems]
);
const overflowUnmappedItemCount = visibleUnmappedItems.length - unmappedItemPreview.length; const overflowUnmappedItemCount = visibleUnmappedItems.length - unmappedItemPreview.length;
const hiddenUnmappedItemCount = Math.max(0, unmappedItemCount - visibleUnmappedItems.length); const hiddenUnmappedItemCount = Math.max(0, unmappedItemCount - visibleUnmappedItems.length);
const hasHiddenUnmappedItems = const hasHiddenUnmappedItems =