566 amenity marker active states

src/screens/ParadeMapScreen/AmenityMarkers.js

@@ -4,10 +4,14 @@ import { Marker } from "react-native-maps";
 import type { Amenity } from "../../data/amenity";
 import type { Coordinates } from "../../constants/parade-coordinates";
 import amenityIconFirstAid from "../../../assets/images/amenityIconFirstAid.png";
+import amenityIconFirstAidActive from "../../../assets/images/amenityIconFirstAidActive.png";
 import amenityIconToilet from "../../../assets/images/amenityIconToilet.png";
+import amenityIconToiletActive from "../../../assets/images/amenityIconToiletActive.png";
 
 type Props = {
   amenities: Amenity[],
+  activeMarker: ?string,
+  handleMarkerPress: (markerID: string) => void,
   markerSelect: (event: { nativeEvent: { coordinate: Coordinates } }) => void
 };
 
@@ -16,22 +20,36 @@ const iconMap = {
   "First Aid": amenityIconFirstAid
 };
 
-const AmenityMarkers = ({ amenities, markerSelect }: Props) => {
+const activeIconMap = {
+  Toilet: amenityIconToiletActive,
+  "First Aid": amenityIconFirstAidActive
+};
+
+const AmenityMarkers = ({
+  amenities,
+  activeMarker,
+  handleMarkerPress,
+  markerSelect
+}: Props) => {
   if (amenities.length === 0) {
     return null;
   }
-
   return (
     <Fragment>
       {amenities.map(amenity => (
         <Marker
-          pointerEvents="none"
           coordinate={{
             longitude: amenity.fields.location.lon,
             latitude: amenity.fields.location.lat
           }}
+          stopPropagation
+          onPress={() => handleMarkerPress(amenity.id)}
           key={amenity.id}
-          image={iconMap[amenity.fields.type]}
+          image={
+            activeMarker === amenity.id
+              ? activeIconMap[amenity.fields.type]
+              : iconMap[amenity.fields.type]
+          }
           onSelect={markerSelect}
         />
       ))}

src/screens/ParadeMapScreen/AmenityMarkers.test.js

@@ -9,14 +9,24 @@ const amenity = sampleOne(generateAmenity, { seed: 5728 });
 describe("AmenityMarkers component", () => {
   it("renders correctly", () => {
     const output = shallow(
-      <AmenityMarkers amenities={[amenity]} markerSelect={() => {}} />
+      <AmenityMarkers
+        amenities={[amenity]}
+        markerSelect={() => {}}
+        handleMarkerPress={() => {}}
+        activeMarker={undefined}
+      />
     );
     expect(output).toMatchSnapshot();
   });
 
   it("renders nothing when no amenities provided", () => {
     const output = shallow(
-      <AmenityMarkers amenities={[]} markerSelect={() => {}} />
+      <AmenityMarkers
+        amenities={[]}
+        markerSelect={() => {}}
+        handleMarkerPress={() => {}}
+        activeMarker={undefined}
+      />
     );
     expect(output.children().length).toBe(0);
   });

src/screens/ParadeMapScreen/Map.js

@@ -147,8 +147,11 @@ class Map extends PureComponent<Props, State> {
     );
   };
 
-  handleMarkerPress = (stage: Event) => {
-    this.setState({ tileDetails: stage, activeMarker: stage.id });
+  handleMarkerPress = (markerID: string, stage: ?Event) => {
+    this.setState({
+      tileDetails: stage,
+      activeMarker: markerID
+    });
   };
 
   handleMapPress = () => {
@@ -215,6 +218,8 @@ class Map extends PureComponent<Props, State> {
           />
           <AmenityMarkers
             amenities={amenities}
+            handleMarkerPress={this.handleMarkerPress}
+            activeMarker={this.state.activeMarker}
             markerSelect={this.handleIOSMarkerSelect}
           />
           <StageMarkers

src/screens/ParadeMapScreen/Map.test.js

@@ -172,7 +172,7 @@ describe("handleMarkerPress", () => {
 
     output.instance().mapViewRef.current = { animateToCoordinate };
     const handleMarkerPressSpy = output.instance().handleMarkerPress;
-    handleMarkerPressSpy(stage);
+    handleMarkerPressSpy(stage.id, stage);
     expect(output.state().tileDetails).toEqual(stage);
     expect(output.state().activeMarker).toEqual(stage.id);
     jest.clearAllMocks();

src/screens/ParadeMapScreen/StageMarkers.js

@@ -10,7 +10,7 @@ import stageIconInactive from "../../../assets/images/stageIconInactive.png";
 type Props = {
   stages: Event[],
   activeMarker: ?string,
-  handleMarkerPress: (stage: Event) => void,
+  handleMarkerPress: (markerID: string, stage: Event) => void,
   markerSelect: (event: { nativeEvent: { coordinate: Coordinates } }) => void
 };
 
@@ -36,7 +36,7 @@ const StageMarkers = ({
             latitude: stage.fields.location.lat
           }}
           key={stage.id}
-          onPress={() => handleMarkerPress(stage)}
+          onPress={() => handleMarkerPress(stage.id, stage)}
           stopPropagation
           image={
             activeMarker === stage.id ? stageIconActive : stageIconInactive

src/screens/ParadeMapScreen/StageMarkers.test.js

@@ -3,7 +3,6 @@ import React from "react";
 import { shallow } from "enzyme";
 import StageMarkers from "./StageMarkers";
 import { generateEvent, sampleOne } from "../../data/__test-data";
-import type { Event } from "../../data/event";
 
 const stage = sampleOne(generateEvent, { seed: 5728 });
 
@@ -12,8 +11,7 @@ describe("AmenityMarkers component", () => {
     const output = shallow(
       <StageMarkers
         stages={[stage]}
-        // eslint-disable-next-line no-unused-vars
-        handleMarkerPress={(_: Event) => {}}
+        handleMarkerPress={() => {}}
         activeMarker={null}
         markerSelect={() => {}}
       />
@@ -25,8 +23,7 @@ describe("AmenityMarkers component", () => {
     const output = shallow(
       <StageMarkers
         stages={[]}
-        // eslint-disable-next-line no-unused-vars
-        handleMarkerPress={(_: Event) => {}}
+        handleMarkerPress={() => {}}
         activeMarker={null}
         markerSelect={() => {}}
       />
@@ -43,8 +40,7 @@ describe("AmenityMarkers component", () => {
     const output = shallow(
       <StageMarkers
         stages={[stage, recurrenceStage]}
-        // eslint-disable-next-line no-unused-vars
-        handleMarkerPress={(_: Event) => {}}
+        handleMarkerPress={() => {}}
         activeMarker={null}
         markerSelect={() => {}}
       />

src/screens/ParadeMapScreen/__snapshots__/AmenityMarkers.test.js.snap

@@ -11,9 +11,9 @@ exports[`AmenityMarkers component renders correctly 1`] = `
     }
     image={1}
     key="20nBC086o2kwuMWHp8FqMyUV"
+    onPress={[Function]}
     onSelect={[Function]}
-    pointerEvents="none"
-    stopPropagation={false}
+    stopPropagation={true}
   />
 </React.Fragment>
 `;

src/screens/ParadeMapScreen/__snapshots__/Map.test.js.snap

@@ -564,6 +564,7 @@ exports[`Map component renders correctly 1`] = `
       }
     />
     <AmenityMarkers
+      activeMarker={null}
       amenities={
         Array [
           Object {
@@ -581,6 +582,7 @@ exports[`Map component renders correctly 1`] = `
           },
         ]
       }
+      handleMarkerPress={[Function]}
       markerSelect={[Function]}
     />
     <StageMarkers
@@ -1276,6 +1278,7 @@ exports[`Map component renders without location button when permission is restri
       }
     />
     <AmenityMarkers
+      activeMarker={null}
       amenities={
         Array [
           Object {
@@ -1293,6 +1296,7 @@ exports[`Map component renders without location button when permission is restri
           },
         ]
       }
+      handleMarkerPress={[Function]}
       markerSelect={[Function]}
     />
     <StageMarkers