From 24d1f9221041e2c1cdfbae63673d2b0b5df30b96 Mon Sep 17 00:00:00 2001 From: Jonathan Bouchard Date: Sat, 5 May 2018 12:57:46 -0400 Subject: [PATCH] Added directions to google map --- src/actions/index.js | 34 +++++++++++++++++++++++- src/components/MainPage.js | 9 ++----- src/components/MapComponent.js | 42 +++++++----------------------- src/containers/MapContainer.js | 43 +++++++++++++++++++++++++++++++ src/reducers/directionsReducer.js | 12 +++++++++ src/reducers/index.js | 2 ++ 6 files changed, 102 insertions(+), 40 deletions(-) create mode 100644 src/containers/MapContainer.js create mode 100644 src/reducers/directionsReducer.js diff --git a/src/actions/index.js b/src/actions/index.js index b7807b8..5e8f8f6 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -37,6 +37,11 @@ export const toggleSidebar = (bool) => ({ payload: bool }); +export const genDirections = (directions) => ({ + type: 'GENERATE_DIRECTIONS', + payload: directions +}); + export function loginUser(email, password) { return async (dispatch) => { dispatch(loginUserPending(true)); @@ -81,16 +86,43 @@ export function signupUser(values) { export function logoutUser(token) { return async (dispatch) => { const instance = axios.create({ - baseURL: 'http://10.212.32.61:3000/', + baseURL: '/', timeout: 1000, headers: {'Authorization': 'Bearer ' + token} }); var data = await instance.delete('/users/logout'); if (data) { + dispatch(toggleSidebar(false)); dispatch(logoutUserSuccess()); } } } +export function generateDirections(google, coords) { + return async (dispatch) => { + const DirectionsService = new google.maps.DirectionsService(); + DirectionsService.route({ + origin: new google.maps.LatLng(coords.latitude, coords.longitude), + destination: new google.maps.LatLng(41.8525800, -87.6514100), + waypoints: [ + { + location: new google.maps.LatLng(41.8507300, -87.6512600) + }, + { + location: new google.maps.LatLng(41.8525800, -87.6514100) + } + ], + travelMode: google.maps.TravelMode.WALKING, + }, (result, status) => { + if (status === google.maps.DirectionsStatus.OK) { + dispatch(genDirections(result)); + } else { + console.error(`error fetching directions ${result}`); + } + }); + + } +} + diff --git a/src/components/MainPage.js b/src/components/MainPage.js index fb70c8b..9190470 100644 --- a/src/components/MainPage.js +++ b/src/components/MainPage.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import Drawer from 'react-drag-drawer'; -import MapComponent from './MapComponent'; +import MapContainer from '../containers/MapContainer'; import { Button, Layout, Menu, Icon } from 'antd'; const { Header, Sider } = Layout; @@ -31,12 +31,7 @@ class MainPage extends Component { style={{ marginLeft: 15 }} /> - } - containerElement={
} - mapElement={
} - /> +
diff --git a/src/components/MapComponent.js b/src/components/MapComponent.js index 5a4bc69..90a0586 100644 --- a/src/components/MapComponent.js +++ b/src/components/MapComponent.js @@ -14,48 +14,26 @@ const defaultMapOptions = { class MapComponent extends Component { constructor(props) { super(props); - this.state = { - directions: null, - } } componentDidMount() { - const DirectionsService = new google.maps.DirectionsService(); - DirectionsService.route({ - origin: new google.maps.LatLng(41.8507300, -87.6512600), - destination: new google.maps.LatLng(41.8525800, -87.6514100), - waypoints: [ - { - location: new google.maps.LatLng(41.8507300, -87.6512600) - }, - { - location: new google.maps.LatLng(41.8525800, -87.6514100) - } - ], - travelMode: google.maps.TravelMode.WALKING, - }, (result, status) => { - if (status === google.maps.DirectionsStatus.OK) { - this.setState({ - directions: result, - }); - } else { - console.error(`error fetching directions ${result}`); - } - }); + console.log(this.props.coords); + + this.props.generateDirections(google, this.props.coords); } render() { - return ( + return ( - {this.state.directions && } - + defaultOptions={defaultMapOptions} + defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)} + > + {this.props.directions && } + ) } } + export default withScriptjs(withGoogleMap(MapComponent)); diff --git a/src/containers/MapContainer.js b/src/containers/MapContainer.js new file mode 100644 index 0000000..8458526 --- /dev/null +++ b/src/containers/MapContainer.js @@ -0,0 +1,43 @@ +import React, { Component } from 'react'; +import { connect } from "react-redux"; +import { generateDirections } from '../actions'; +import MapComponent from '../components/MapComponent'; +import {geolocated} from 'react-geolocated'; + +class MapContainer extends Component { + + render() { + return ( + this.props.coords && ( + } + containerElement={
} + mapElement={
} + generateDirections={this.props.generateDirections} + directions={this.props.directions} + coords={this.props.coords} + /> + ) + ); + } +} + +const mapStateToProps = (state) => { + return { + directions: state.directionsReducer.directions, + }; +} + +const mapDispatchToProps = (dispatch) => { + return { + generateDirections: (google, coords) => dispatch(generateDirections(google, coords)) + }; +} + +export default geolocated({ + positionOptions: { + enableHighAccuracy: false, + }, + userDecisionTimeout: 5000, + })(connect(mapStateToProps, mapDispatchToProps)(MapContainer)); \ No newline at end of file diff --git a/src/reducers/directionsReducer.js b/src/reducers/directionsReducer.js new file mode 100644 index 0000000..8019de6 --- /dev/null +++ b/src/reducers/directionsReducer.js @@ -0,0 +1,12 @@ +const initialState = { + directions: null, +} + +export const directionsReducer = (state = initialState, action) => { + switch(action.type) { + case "GENERATE_DIRECTIONS": + return {...state, directions: action.payload} + default: + return state; + } +} \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index a300781..2983d17 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,8 +1,10 @@ import { combineReducers } from 'redux'; import { userReducer } from './userReducer'; import { layoutReducer } from './layoutReducer'; +import { directionsReducer } from './directionsReducer'; export default combineReducers({ userReducer, layoutReducer, + directionsReducer }); \ No newline at end of file