Fix mapathon list loading

src/MainView.tsx

@@ -607,6 +607,7 @@ class MainView extends React.Component<Props, State> {
         feature={this.props.lightweightFeature || this.props.feature}
         featureId={featureId}
         mappingEvents={this.props.mappingEvents}
+        mappingEvent={this.props.mappingEvent}
         equipmentInfo={this.props.equipmentInfo}
         equipmentInfoId={equipmentInfoId}
         categories={this.props.categories}

src/components/Map/Map.tsx

@@ -9,7 +9,7 @@ import includes from 'lodash/includes';
 import isEqual from 'lodash/isEqual';
 import * as React from 'react';
 import { t } from 'ttag';
-import { hrefForFeature } from '../../lib/Feature';
+import { hrefForFeature, MappingEventFeature } from '../../lib/Feature';
 import { currentLocales } from '../../lib/i18n';
 import HighlightableMarker from './HighlightableMarker';
 import LeafletLocateControl from './L.Control.Locate';
@@ -29,7 +29,7 @@ import {
 } from '../../lib/Feature';
 import { globalFetchManager } from '../../lib/FetchManager';
 import goToLocationSettings from '../../lib/goToLocationSettings';
-import { MappingEvents } from '../../lib/MappingEvent';
+import { MappingEvent, MappingEvents } from '../../lib/MappingEvent';
 import { normalizeCoordinate, normalizeCoordinates } from '../../lib/normalizeCoordinates';
 import { hasOpenedLocationHelp, saveState } from '../../lib/savedState';
 import shouldUseImperialUnits from '../../lib/shouldUseImperialUnits';
@@ -85,6 +85,7 @@ type Props = {
   featureId?: string | number | null;
   feature?: PotentialPromise<Feature | null>;
   mappingEvents?: MappingEvents;
+  mappingEvent?: MappingEvent;
   equipmentInfoId?: string | null;
   equipmentInfo?: PotentialPromise<EquipmentInfo | null> | null;
 
@@ -132,8 +133,8 @@ type Props = {
 type State = {
   showZoomInfo?: boolean;
   showLocationNotAllowedHint: boolean;
-  placeOrEquipment?: Feature | EquipmentInfo | null;
-  placeOrEquipmentPromise?: Promise<Feature | EquipmentInfo | null> | null;
+  placeOrEquipment?: Feature | EquipmentInfo | MappingEventFeature | null;
+  placeOrEquipmentPromise?: Promise<Feature | EquipmentInfo | MappingEventFeature | null> | null;
   zoomedToFeatureId: string | null;
   category: RootCategoryEntry | null;
 };
@@ -251,9 +252,9 @@ export default class Map extends React.Component<Props, State> {
   }
 
   static getDerivedStateFromProps(props: Props, state: State): Partial<State> {
-    const { feature, equipmentInfo } = props;
+    const { feature, equipmentInfo, mappingEvent } = props;
 
-    const placeOrEquipment = equipmentInfo || feature;
+    const placeOrEquipment = equipmentInfo || feature || mappingEvent?.meetingPoint;
 
     const category = props.categoryId ? Categories.getRootCategory(props.categoryId) : null;
 
@@ -480,8 +481,8 @@ export default class Map extends React.Component<Props, State> {
   }
 
   handlePromiseResolved(
-    placeOrEquipmentPromise: Promise<Feature | EquipmentInfo | null>,
-    placeOrEquipment: Feature | EquipmentInfo | null
+    placeOrEquipmentPromise: Promise<Feature | EquipmentInfo | MappingEventFeature | null>,
+    placeOrEquipment: Feature | EquipmentInfo | MappingEventFeature | null
   ) {
     if (this.state.placeOrEquipmentPromise !== placeOrEquipmentPromise) {
       return;

src/components/MappingEvents/MappingEventToolbar.tsx

@@ -104,8 +104,8 @@ const MappingEventToolbar = ({
 
   const hasMeetingPoint = Boolean(mappingEvent.meetingPoint);
 
-  const areaName = mappingEvent.area ? mappingEvent.area.properties.name : null;
-  const meetingPointName = mappingEvent.meetingPoint && mappingEvent.meetingPoint.properties.name;
+  const areaName = mappingEvent.area?.properties?.name;
+  const meetingPointName = mappingEvent.meetingPoint?.properties?.name;
 
   // translator: Screenreader description for a mapping event
   const toolbarAriaLabel = t`Mapping event ${mappingEvent.name}`;

src/components/MappingEvents/MappingEventsToolbar.tsx

@@ -1,16 +1,15 @@
-import React from 'react';
-import { t } from 'ttag';
-import styled from 'styled-components';
 import FocusTrap from 'focus-trap-react';
+import styled from 'styled-components';
+import { t } from 'ttag';
 
-import StyledToolbar from '../NodeToolbar/StyledToolbar';
-import Link, { RouteConsumer } from '../Link/Link';
-import { MappingEvents } from '../../lib/MappingEvent';
 import { App } from '../../lib/App';
-import StyledMarkdown from '../StyledMarkdown';
-import { mappingEvent as MappingEventMarkerIcon } from '../icons/markers';
+import { MappingEvents } from '../../lib/MappingEvent';
 import colors from '../../lib/colors';
 import CloseButton from '../CloseButton';
+import Link, { RouteConsumer } from '../Link/Link';
+import StyledToolbar from '../NodeToolbar/StyledToolbar';
+import StyledMarkdown from '../StyledMarkdown';
+import { mappingEvent as MappingEventMarkerIcon } from '../icons/markers';
 
 type MappingEventsToolbarProps = {
   app: App,
@@ -87,7 +86,7 @@ const MappingEventsToolbar = ({
                         </div>
                         <div>
                           <h3>{event.name}</h3>
-                          {event.area && <p>{event.area.properties.name}</p>}
+                          {event.area?.properties?.name && <p>{event.area?.properties?.name}</p>}
                         </div>
                       </Link>
                     );

src/lib/Feature.ts

@@ -240,6 +240,7 @@ export function getFeatureId(feature: Feature | EquipmentInfo | any): string | n
     typeof feature._id === 'string' && feature._id,
     properties && typeof properties.id === 'number' && properties.id,
     properties && typeof properties._id === 'string' && properties._id,
+    properties && typeof properties.osm_id === 'number' && properties.osm_id,
   ];
   const result = idProperties.filter(Boolean)[0];
   return result ? String(result) : null;