Fraser/add directions redux

.gitignore

@@ -22,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/apiKey

src/actions/addDirections.js

@@ -0,0 +1,6 @@
+export const addDirections = directions => {
+    return {
+        type: 'ADD_DIRECTIONS',
+        payload: directions
+    };
+}

src/actions/clearDirections.js

@@ -0,0 +1,5 @@
+export const clearDirections = ()=> {
+    return {
+        type: 'CLEAR_DIRECTIONS'
+    };
+}

src/components/top-components/RightTopContainer.js

@@ -2,6 +2,8 @@ import React, {useRef} from 'react'
 import {GoogleMap, useJsApiLoader, DirectionsRenderer} from '@react-google-maps/api';
 import Inputs from "./InputDiv";
 import {Button} from "@mui/material";
+import {useDispatch, useSelector} from "react-redux";
+import {addDirections} from "../../actions/addDirections";
 
 const containerStyle = {
     display: "inline-flex",
@@ -16,15 +18,17 @@ const center = {
 
 
 
+
 function MainMapComponent() {
     const { isLoaded } = useJsApiLoader({
         id: 'google-map-script',
-        googleMapsApiKey: "",
+        googleMapsApiKey: "AIzaSyDvwRJY_4ws-EBa5qaIpuH9H_McBjRIK7Q",
         libraries: ['places']
     })
 
     const [map, setMap] = React.useState(/** @type google.maps.Map */(null));
     const [directions, setDirections] = React.useState(null);
+    const dispatch = useDispatch();
 
     /** @type React.MutableRefObject<HTMLInputElement> */
     const originRef = useRef();
@@ -50,10 +54,27 @@ function MainMapComponent() {
                 origin: originRef.current.value,
                 destination: destRef.current.value,
                 // eslint-disable-next-line no-undef
-                travelMode: google.maps.TravelMode.DRIVING,
+                travelMode: google.maps.TravelMode.WALKING,
                 provideRouteAlternatives: true
             }
         );
+        console.log(results.routes);
+        let directionArray = [];
+        for (let i = 0; i < results.routes.length; i++) {
+            let leg = results.routes[i];
+            console.log(leg);
+            directionArray.push({
+                // distance in meters
+                distance: leg.legs[0].distance.value,
+                // duration in seconds
+                duration: leg.legs[0].duration.value,
+                // addresses are strings
+                startAddress: leg.legs[0].startAddress,
+                endAddress: leg.legs[0].endAddress,
+            })
+            //console.log(directionArray);
+        }
+        //dispatch(addDirections(directionArray));
         setDirections(results);
     }
 

src/reducers/directionsReducer.js

@@ -0,0 +1,15 @@
+
+const directionsReducer = (directionsArray = [], action) => {
+    switch(action.type) {
+        case 'ADD_DIRECTIONS':
+            directionsArray = action.payload;
+            return directionsArray;
+        case 'CLEAR_DIRECTIONS':
+            directionsArray = null;
+            return directionsArray;
+        default:
+            return directionsArray;
+    }
+}
+
+export default directionsReducer;

src/reducers/index.js

@@ -1,9 +1,9 @@
 import {combineReducers} from 'redux';
+import directionsReducer from './directionsReducer'
 import {template,drawerState, loginState} from './reducer'
 
-
 const rootReducer = combineReducers({
-drawerState,loginState, 
+drawerState,loginState, directionsReducer,
 template
 });