Merge branch 'jo' into alex

Drakota · May 5, 2018 · adf2727 · adf2727
2 parents 88d56eb + f1d0ab7
commit adf2727
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 40 deletions.
diff --git 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,7 +86,7 @@ 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}
           });
@@ -97,4 +102,30 @@ export function logoutUser(token) {
     }
 }
 
+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
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Drawer from 'react-drag-drawer';
+import MapContainer from '../containers/MapContainer';
 import Avatar from 'react-avatar';
-import MapComponent from './MapComponent';
 import { Button, Layout, Menu, Icon } from 'antd';
 const { Header, Sider } = Layout;
 
@@ -40,12 +40,7 @@ class MainPage extends Component {
                             onClick={this.props.toggleSidebar}
                         />
                     </Header>
-                    <MapComponent
-                        googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVb99HgTAxKCABiclsF0X7uzoLCN3JnLQ&v=3.exp&libraries=geometry,drawing,places"
-                        loadingElement={<div style={{ height: `100%` }} />}
-                        containerElement={<div style={{ height: `100%` }} />}
-                        mapElement={<div style={{ height: `88.5vh` }} />}
-                    />
+                    <MapContainer />
                     <div onClick={this.props.toggleDrawer} className={"bottom-drawer"}> 
                         <Button onClick={this.test} className={"go-button"} type="primary">GO</Button>  
                     </div>

diff --git 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 (
             <GoogleMap
-                defaultZoom={1}
-                defaultOptions={defaultMapOptions}
-                defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
-            >
-            {this.state.directions && <DirectionsRenderer directions={this.state.directions} />}
-          </GoogleMap>
+                    defaultOptions={defaultMapOptions}
+                    defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
+                >
+                {this.props.directions && <DirectionsRenderer options={{preserveViewport: false}} directions={this.props.directions} />}
+            </GoogleMap>
         )
     }
 }
+
 
 export default withScriptjs(withGoogleMap(MapComponent));
 

diff --git a/src/containers/MapContainer.js 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 && (
+                <MapComponent 
+                    googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVb99HgTAxKCABiclsF0X7uzoLCN3JnLQ&v=3.exp&libraries=geometry,drawing,places"
+                    loadingElement={<div style={{ height: `100%` }} />}
+                    containerElement={<div style={{ height: `100%` }} />}
+                    mapElement={<div style={{ height: `88.5vh` }} />}
+                    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));
diff --git a/src/reducers/directionsReducer.js 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;
+    }
+}
diff --git 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
 });