Allow type labels to be null if types load after map locations

falling-fruit · Oct 25, 2024 · 66d53f8 · 66d53f8
1 parent 32743e8
commit 66d53f8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git 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 && <MapPin />}
       {editing && <BackgroundMapPin />}
       <LocationButton onClick={onClick} {...props}>
         {!showLabel && (
           <TooltipLabel>
-            <TypeLabels types={types} />
+            <TypeLabels typeIds={typeIds} />
           </TooltipLabel>
         )}
       </LocationButton>
       {showLabel && (
         <MapLabel>
-          <TypeLabels types={types} />
+          <TypeLabels typeIds={typeIds} />
         </MapLabel>
       )}
     </>

diff --git 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
@@ -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 (
     <TypeList>
-      {typeLabels.map((item, index) =>
-        item.isScientific ? (
-          <ScientificName key={index} isSelected={item.isSelected}>
-            {item.label}
+      {(typeIds || []).map((id, index) => {
+        const type = typesAccess.getType(id)
+        return !type ? null : !type.commonName && type.scientificName ? (
+          <ScientificName
+            key={index}
+            isSelected={selectedTypes.includes(type.id)}
+          >
+            {type.scientificName}
           </ScientificName>
         ) : (
-          <TypeItem key={index} isSelected={item.isSelected}>
-            {item.label}
+          <TypeItem key={index} isSelected={selectedTypes.includes(type.id)}>
+            {type.commonName || type.scientificName}
           </TypeItem>
-        ),
-      )}
+        )
+      })}
     </TypeList>
   )
 }