Dynamically update pins on map from JSON file (mocking API)

Author: davejm

package.json

@@ -5,13 +5,16 @@
   "dependencies": {
     "isomorphic-fetch": "^2.2.1",
     "leaflet": "^1.2.0",
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-leaflet": "^1.4.1",
     "react-redux": "^5.0.6",
     "react-scripts": "1.0.11",
     "react-slick": "^0.14.11",
-    "redux": "^3.7.2"
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/action-types.js

@@ -1,5 +1,3 @@
-export const SEARCH_STORES_BY_POSTCODE = 'SEARCH_STORES_BY_POSTCODE';
-export const SEARCH_STORES_NEAR_ME = 'SEARCH_STORES_NEAR_ME';
-export const FETCH_STORES_REQUEST = 'FETCH_STORES_REQUEST';
-export const FETCH_STORES_FAILURE = 'FETCH_STORES_FAILURE';
-export const FETCH_STORES_SUCCESS = 'FETCH_STORES_SUCCESS';
+export const REQUEST_STORES = 'REQUEST_STORES';
+export const RECEIVE_STORES = 'RECEIVE_STORES';
+// export const ERROR_GETTING_STORES = 'ERROR_GETTING_STORES';

src/actions/actions.js

@@ -0,0 +1,38 @@
+import * as types from './action-types';
+import fetch from 'isomorphic-fetch'
+
+export const requestStores = (postcode) => {
+  return {
+    type: types.REQUEST_STORES,
+    postcode
+  };
+}
+
+export const receiveStores = (postcode, json) => {
+  return {
+    type: types.RECEIVE_STORES,
+    postcode,
+    stores: json.Stores.StoreDetailsV2Entry,
+    receivedAt: Date.now()
+  };
+}
+
+
+// Async actions
+
+export function fetchStores(postcode) {
+  return (dispatch) => {
+    dispatch(requestStores(postcode));
+
+    const baseURL = (window.location.hostname === 'localhost') ?
+      'http://localhost:3000':
+      'https://davidmoodie.com/react-leaflet-store-locator';
+
+    const dataPath = 'data/stores-sky2.json';
+    const dataURL = `${baseURL}/${dataPath}`;
+
+    return fetch(dataURL)
+      .then(response => response.json())
+      .then(json => dispatch(receiveStores(postcode, json)))
+  }
+}

src/actions/map-actions.js

@@ -5,17 +5,19 @@ import Results from './Results';
 import MapSearch from './MapSearch';
 import MyMap from './MyMap';
 
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import * as mapActions from '../actions/map-actions';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as actions from '../actions/actions';
 
 class LocatorContainer extends Component {
   render() {
-    const {markers} = this.props;
+    const markers = this.props.storesFound.map((store) => {
+      return [parseFloat(store.Latitude), parseFloat(store.Longitude)]
+    })
 
     return (
       <div>
-        <MapSearch searchStoresByPostcode={this.props.actions.searchStoresByPostcode} />
+        <MapSearch onSearchPostcode={this.props.actions.fetchStores} />
         <button className="btn btn-secondary btn-block mb-4 hidden-sm-up">View Map</button>
         <Results />
         <MyMap markers={markers} />
@@ -25,19 +27,19 @@ class LocatorContainer extends Component {
 }
 
 LocatorContainer.propTypes = {
-  markers: PropTypes.array.isRequired,
+  storesFound: PropTypes.array.isRequired,
   actions: PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state, props) => {
   return {
-    markers: state.map
+    storesFound: state.storesFound
   };
 }
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    actions: bindActionCreators(mapActions, dispatch)
+    actions: bindActionCreators(actions, dispatch)
   }
 }
 

src/components/LocatorContainer.js

@@ -3,24 +3,24 @@ import PropTypes from 'prop-types'
 // import './MapSearch.css';
 
 class MapSearch extends Component {
-  onSearchLocationsClick = () => {
-    this.props.searchStoresByPostcode("LS10 123");
+  onFindStoresClick = () => {
+    this.props.onSearchPostcode("LS10 123");
   }
 
   render() {
     return (
       <div className="form-inline search-form">
         <label className="sr-only" htmlFor="search-box">Postcode</label>
         <input type="text" id="search-box" className="search-box form-control mr-2 mb-4" placeholder="Postcode" />
-        <button className="btn btn-primary mr-2 mb-4" onClick={this.onSearchLocationsClick}>Find stores</button>
+        <button className="btn btn-primary mr-2 mb-4" onClick={this.onFindStoresClick}>Find stores</button>
         <button className="btn btn-primary mb-4">Near me</button>
       </div>
     );
   }
 }
 
 MapSearch.propTypes = {
-  searchStoresByPostcode: PropTypes.func.isRequired
+  onSearchPostcode: PropTypes.func.isRequired
 };
 
 export default MapSearch;

src/components/MapSearch.js

@@ -5,9 +5,10 @@ import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
 
 class MyMap extends Component {
   render() {
-    const center = [51.505, -0.09];
-    const zoom = 13;
+    const center = [53.7581808159536, -1.57374065678215];
+    const zoom = 10;
     const {markers} = this.props;
+
     const map = (
       <Map center={center} zoom={zoom}>
         {/* <TileLayer
@@ -18,11 +19,6 @@ class MyMap extends Component {
           url='https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
           attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
         />
-        {/* <Marker position={position}>
-          <Popup>
-            <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
-          </Popup>
-        </Marker> */}
         {markers.map((position, idx) =>
           <Marker key={`marker-${idx}`} position={position}>
             <Popup>

src/components/MyMap.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 // import registerServiceWorker from './registerServiceWorker';
-import {Provider} from 'react-redux';
+import { Provider } from 'react-redux';
 import configureStore from './store/configure-store';
 
 const store = configureStore();

src/index.js

@@ -1,8 +1,8 @@
-import map from './map-reducer.js';
+import storesFound from './stores-reducer.js';
 import {combineReducers} from 'redux';
 
 const rootReducer = combineReducers({
-  map
+  storesFound
 });
 
 export default rootReducer;

src/reducers/index.js

@@ -0,0 +1,15 @@
+import * as types from '../actions/action-types';
+
+const storesFound = (state = [], action) => {
+  switch (action.type) {
+    case types.REQUEST_STORES:
+      // Handle isFetching, didInvalidate booleans etc. if applicable
+      return state;
+    case types.RECEIVE_STORES:
+      return action.stores;
+    default:
+      return state;
+  }
+};
+
+export default storesFound;

src/reducers/map-reducer.js

@@ -1,11 +1,17 @@
+import {createStore, applyMiddleware} from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import { createLogger } from 'redux-logger';
 import rootReducer from '../reducers';
-import {createStore, compose} from 'redux';
 
-// enable redux devtools
-const enhancers = compose(
-  window.devToolsExtension ? window.devToolsExtension() : f => f
-)
+const loggerMiddleware = createLogger();
 
-export default (initialState) => {
-  return createStore(rootReducer, initialState, enhancers);
-};
+export default function configureStore(preloadedState) {
+  return createStore(
+    rootReducer,
+    preloadedState,
+    applyMiddleware(
+      thunkMiddleware,
+      loggerMiddleware
+    )
+  )
+}