re-route to safe spots

data/directionsApi.js

@@ -24,6 +24,7 @@ if (successStatuses.includes(response.status)) {
 const okCheck = statusCheck([HTTP_OK]);
 const paramsWithApiKey = params => {
     const result = new URLSearchParams({...params, key: API_KEY});
+    console.log("\n\nRESULT! ", result.toString())
     return result;
 };
 const query = (resource, params) =>

src/components/AlongRoute.js

@@ -57,7 +57,7 @@ const AlongRoute = (props) => {
             /> */}
             <View activeOpacity={0.7} style={styles.iconCircle} />
             <View style={styles.infoButtons}>
-              <Text style={styles.valueText}>Val</Text>
+              <Text style={styles.valueText}>{walkscore}</Text>
             </View>
           </View>
           <View style={styles.infoTextRow1}>
@@ -76,7 +76,7 @@ const AlongRoute = (props) => {
             </View>
             <View activeOpacity={0.7} style={styles.iconCircle} />
             <View style={styles.infoButtons}>
-              <Text style={styles.valueText}>{walkscore}</Text>
+              <Text style={styles.valueText}>Val</Text>
             </View>
           </View>
           <View style={styles.infoTextRow2}>

src/components/Map.js

@@ -3,10 +3,10 @@ import { View, StyleSheet, Text, Alert } from "react-native";
 import MapView, { Marker, Callout } from "react-native-maps";
 import MapViewDirections from "react-native-maps-directions";
 import { connect } from "react-redux";
-import { getScore } from "../../data/walkScoreApi";
 import Geocoder from "react-native-geocoding";
 import { colors } from "../styles/colors.js";
 import safespotMarker from "../images/marker-04-big.png";
+import { getDirections } from "../../data/directionsApi";
 
 const GOOGLE_MAPS_APIKEY = process.env.REACT_APP_GOOGLE_MAPS_API;
 
@@ -41,6 +41,7 @@ const MapContainer = (props) => {
   const [mapUIView, setMapUIView] = useState(null);
   const [list, setList] = useState([]);
   const [safeSpotCoords, setSafeSpotCoords] = useState([]);
+  const [error, setError] = useState(null);
 
   useEffect(() => {
     getCurrentLocation();
@@ -80,9 +81,30 @@ const MapContainer = (props) => {
     });
   };
 
+  const performQuery = async (destination) => {
+    setError(null);
+    try {
+      const directions = await getDirections({
+        origin: `${props.directions.currentLocation.latitude},${props.directions.currentLocation.longitude}`,
+        destination: `${destination.latitude},${destination.longitude}`
+      });
+    props.updateCurrentRoute(directions)
+    // TODO: props not updating with new directions I think???
+    console.log("after end address: ", props.route.route.routes[0].legs[0].end_address)
+    console.log("after end location: ", props.route.route.routes[0].legs[0].end_location)
+  } catch (error) {
+      setError("Sorry, but something went wrong.")
+    }
+  };
+
   const directToSafeSpot = (marker) => {
+    props.displayRoute(false)
     // TODO: navigate to directions page with new route
-    props.updateDirections(marker);
+    console.log("before end address: ", props.route.route.routes[0].legs[0].end_address)
+    console.log("before end location: ", props.route.route.routes[0].legs[0].end_location)
+    props.updateDirections(marker)
+    // console.log("marker: ", marker)
+    performQuery(marker)
   };
 
   const initGeocoder = () => {
@@ -173,6 +195,7 @@ const MapContainer = (props) => {
 const mapStateToProps = (state) => {
   return {
     safeSpots: state.safeSpots,
+    route: state.directions,
     directions: state.directions,
     currentLocation: state.currentLocation,
   };
@@ -186,6 +209,12 @@ const mapDispatchToProps = (dispatch) => {
     updateDirections: (destination) => {
       dispatch({ type: "UPDATE_DIRECTIONS", payload: destination });
     },
+    updateCurrentRoute: (route) => {
+      dispatch({ type: "UPDATE_CURRENT_ROUTE", payload: route });
+    },
+    displayRoute: (bool) => {
+      dispatch({ type: "DISPLAY_ROUTE", payload: bool });
+    },
   };
 };
 export default connect(mapStateToProps, mapDispatchToProps)(MapContainer);