From 6a84d82070730d1629f4ba47f4a2196e99b9ce58 Mon Sep 17 00:00:00 2001
From: Jaron Heard <jaronheard@gmail.com>
Date: Fri, 26 Apr 2019 23:31:15 -0700
Subject: [PATCH] reimplement geocoder

---
 .../src/components/YouAndYourNeighbors/index.js  | 15 ++++++---------
 .../src/state/you-and-your-neighbors/index.js    |  4 ++--
 .../component-library/src/BaseMap/BaseMap.js     | 16 ++++++++++++++--
 .../component-library/stories/BaseMap.story.js   |  1 +
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/2018-disaster-resilience/src/components/YouAndYourNeighbors/index.js b/packages/2018-disaster-resilience/src/components/YouAndYourNeighbors/index.js
index d0f14113b..1c97a4f12 100644
--- a/packages/2018-disaster-resilience/src/components/YouAndYourNeighbors/index.js
+++ b/packages/2018-disaster-resilience/src/components/YouAndYourNeighbors/index.js
@@ -42,14 +42,11 @@ const mapContainer = css`
   }
 `;
 
-const LAT = 45.5231;
-const LONG = -122.6765;
 const ZOOM = 13.5;
 
 const geocoderOptions = {
   bbox: [-123.1847001376, 45.2458284187, -122.2151566806, 45.8544896021],
   zoom: 13.5,
-  trackProximity: true,
   placeholder: "Enter your address"
 };
 
@@ -122,14 +119,14 @@ export class YouAndYourNeighbors extends React.Component {
           />
           <div className={mapContainer}>
             <BaseMap
-              initialLongitude={LONG}
-              initialLatitude={LAT}
+              initialLongitude={selectedCoords.longitude}
+              initialLatitude={selectedCoords.latitude}
               initialZoom={ZOOM}
               navigation={false}
-              // TODO: Reimplement Geocoder
-              // geocoder
-              // geocoderOptions={geocoderOptions}
-              // geocoderOnChange={geocoderChange}
+              locationMarker={coordsProperties}
+              geocoder
+              geocoderOptions={geocoderOptions}
+              geocoderOnChange={geocoderChange}
               mapGLOptions={mapGLOptions}
             >
               {data && (
diff --git a/packages/2018-disaster-resilience/src/state/you-and-your-neighbors/index.js b/packages/2018-disaster-resilience/src/state/you-and-your-neighbors/index.js
index 730d853ef..1464a530c 100644
--- a/packages/2018-disaster-resilience/src/state/you-and-your-neighbors/index.js
+++ b/packages/2018-disaster-resilience/src/state/you-and-your-neighbors/index.js
@@ -15,7 +15,7 @@ const INITIAL_STATE = {
   coordsPending: false,
   coordsError: null,
   coordsData: null,
-  selectedCoords: null
+  selectedCoords: { latitude: 45.5231, longitude: -122.6765 }
 };
 
 const reducer = (state = INITIAL_STATE, action) => {
@@ -65,7 +65,7 @@ const reducer = (state = INITIAL_STATE, action) => {
     case SET_COORDS:
       return {
         ...state,
-        selectedCoords: action.selectedCoords
+        selectedCoords: action.payload
       };
     default:
       return state;
diff --git a/packages/component-library/src/BaseMap/BaseMap.js b/packages/component-library/src/BaseMap/BaseMap.js
index c98189e65..8fba5dd63 100644
--- a/packages/component-library/src/BaseMap/BaseMap.js
+++ b/packages/component-library/src/BaseMap/BaseMap.js
@@ -1,8 +1,7 @@
 /* TODO: Fix linting errors */
-/* eslint-disable */
 
 import React, { Component } from "react";
-import MapGL, { NavigationControl } from "react-map-gl";
+import MapGL, { NavigationControl, Marker } from "react-map-gl";
 import Dimensions from "react-dimensions";
 import { css } from "emotion";
 import PropTypes from "prop-types";
@@ -98,6 +97,7 @@ class BaseMap extends Component {
       mapboxStyle,
       mapboxToken,
       geocoder,
+      locationMarker,
       navigation,
       geocoderOptions,
       geocoderOnChange,
@@ -144,6 +144,18 @@ class BaseMap extends Component {
               />
             )}
           </div>
+          {locationMarker && (
+            <Marker
+              latitude={viewport.latitude}
+              longitude={viewport.longitude}
+              offsetLeft={-20}
+              offsetTop={-10}
+            >
+              <span role="img" aria-label="star">
+                ❌
+              </span>
+            </Marker>
+          )}
           {geocoder && mounted && (
             <Geocoder
               mapRef={{ current: this.mapRef.current }}
diff --git a/packages/component-library/stories/BaseMap.story.js b/packages/component-library/stories/BaseMap.story.js
index 146e47026..82c683994 100644
--- a/packages/component-library/stories/BaseMap.story.js
+++ b/packages/component-library/stories/BaseMap.story.js
@@ -42,6 +42,7 @@ const geocoderMap = () => {
       mapboxStyle={mapboxStyle}
       geocoder
       geocoderOptions={{ placeholder: "🚀search to blast off✨", zoom: 9.5 }} // additional geocoder options https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md
+      locationMarker
       mapGLOptions={{ dragPan: false }} // additional react-map-gl options https://github.com/uber/react-map-gl/blob/master/src/components/interactive-map.js
     />
   );