diff --git a/src/components/map/Location.js b/src/components/map/Location.js index 59adfb73..aeb5b13e 100644 --- a/src/components/map/Location.js +++ b/src/components/map/Location.js @@ -42,20 +42,20 @@ const TooltipLabel = styled(MapLabel)` ` const Location = memo( - ({ showLabel, types, selected, editing, onClick, ...props }) => ( + ({ showLabel, typeIds, selected, editing, onClick, ...props }) => ( <> {selected && !editing && } {editing && } {!showLabel && ( - + )} {showLabel && ( - + )} diff --git a/src/components/map/MapPage.js b/src/components/map/MapPage.js index 53e4f6e2..e6dc74c3 100644 --- a/src/components/map/MapPage.js +++ b/src/components/map/MapPage.js @@ -149,7 +149,6 @@ const MapPage = ({ isDesktop }) => { const history = useAppHistory() const dispatch = useDispatch() const handleViewChangeRef = useRef(() => void 0) - const typesAccess = useSelector((state) => state.type.typesAccess) const [draggedPosition, setDraggedPosition] = useState(null) @@ -426,7 +425,7 @@ const MapPage = ({ isDesktop }) => { selected={location.id === locationId} editing={isEditingLocation && location.id === locationId} showLabel={showLabels} - types={location.type_ids.map((id) => typesAccess.getType(id))} + typeIds={location.type_ids} /> ))} {(isEditingLocation || isAddingLocation) && draggedPosition && ( diff --git a/src/components/map/TypeLabels.js b/src/components/map/TypeLabels.js index 30012b2a..49f367ed 100644 --- a/src/components/map/TypeLabels.js +++ b/src/components/map/TypeLabels.js @@ -15,31 +15,27 @@ const ScientificName = styled(TypeItem)` font-style: italic; ` -const TypeLabels = ({ types }) => { +const TypeLabels = ({ typeIds }) => { const { types: selectedTypes } = useSelector((state) => state.filter) - - const typeLabels = - types && types.length > 0 - ? types.map((type) => ({ - label: type.commonName || type.scientificName, - isScientific: !type.commonName && type.scientificName, - isSelected: selectedTypes.includes(type.id), - })) - : [] + const typesAccess = useSelector((state) => state.type.typesAccess) return ( - {typeLabels.map((item, index) => - item.isScientific ? ( - - {item.label} + {(typeIds || []).map((id, index) => { + const type = typesAccess.getType(id) + return !type ? null : !type.commonName && type.scientificName ? ( + + {type.scientificName} ) : ( - - {item.label} + + {type.commonName || type.scientificName} - ), - )} + ) + })} ) }