Merge pull request #68 from agiledev-students-fall2023/anasofia

Fixed geolocation

front-end/src/components/LocationFilter.js

@@ -17,35 +17,33 @@ const LocationDropdown = ({ onLocationChange }) => {
     if (isApiLoaded) {
       const google = window.google;
       const placesService = new google.maps.places.PlacesService(document.createElement('div'));
-
-      if (inputValue.trim() !== '' && inputValue !== selectedLocation) {
+      if (inputValue.trim() !== '' && inputValue !== selectedLocation.name) {
         const request = {
           query: inputValue + ' New York City',
         };
         placesService.textSearch(request, (results, status) => {
           if (status === google.maps.places.PlacesServiceStatus.OK) {
             const nycPlaces = results.filter((result) => result.formatted_address.includes('New York, NY'));
-            const places = nycPlaces.map((result) => ({
+            const limitedPlaces = nycPlaces.slice(0, 5); 
+            const places = limitedPlaces.map((result) => ({
               name: result.name,
               address: result.formatted_address,
             }));
             setOptions(places);
-          } else {
-            console.error('Places API request failed with status:', status);
-          }
+          } 
         });
       }
     }
   }, [inputValue, selectedLocation]);
 
   const handleInputChange = (input) => {
-    setInputValue(input);
+    setInputValue(input); 
   };
 
   const handleLocationSelect = (location) => {
-    setSelectedLocation(location.name);
+    setSelectedLocation(location);
     setInputValue(location.name);
-    onLocationChange(location.name);
+    onLocationChange(location);
     setOptions([]);
   };
 

front-end/src/components/Map.js

@@ -5,7 +5,7 @@ import { loadGoogleMapsAPI, initializeMap, getCoordinates, generateTwoUniqueRand
 import { updateTransportMarkers } from '../utils/transportMarker';
 
 function Map({ line, lineColor }) {
-  // const API_KEY = 'AIzaSyCb2Q1MDa8EOFuO41mM24f75jReHBTdfIA';
+  //const API_KEY = '';
   const googleMapRef = useRef(null);
   const [isApiLoaded, setIsApiLoaded] = useState(false);
   const [isMapLoaded, setIsMapLoaded] = useState(false);

front-end/src/components/NavBar.js

@@ -17,8 +17,6 @@ function NavBar() {
         setNavBarState(iconName);
     }
 
-
-
     useEffect(() => {
         let overlay = document.getElementsByClassName('overlay')[0];
         let cur = document.getElementById(navBarState);

front-end/src/components/RouteMap.js

@@ -1,43 +1,59 @@
 import React, { useEffect, useRef } from "react";
-import "../css/routeMap.css";  
+import "../css/routeMap.css";
 
 function RouteMap({ location1, location2 }) {
   const mapRef = useRef(null);
 
   const mapOptions = {
-    disableDefaultUI: true, 
-    zoomControl: true, 
+    disableDefaultUI: true,
+    zoomControl: true,
   };
 
   useEffect(() => {
     const google = window.google;
     const geocoder = new google.maps.Geocoder();
     const map = new google.maps.Map(mapRef.current, {
-        options: mapOptions,
-        center: new window.google.maps.LatLng(37.7699298, -122.4469157),
-        zoom: 13,
+      ...mapOptions,
+      center: new google.maps.LatLng(37.7699298, -122.4469157),
+      zoom: 13,
     });
 
-    const geocodeLocation = (locationName) => {
-      geocoder.geocode({ address: locationName }, (results, status) => {
+    const geocodeLocation = (location) => {
+      const { name, address } = location;
+      geocoder.geocode({ address }, (results, status) => {
         if (status === google.maps.GeocoderStatus.OK && results[0]) {
-          const location = results[0].geometry.location
+          const location = results[0].geometry.location;
           new google.maps.Marker({
             position: location,
             map,
-            title: locationName,
+            title: name,
           });
-          if (locationName === location1 || locationName === location2) {
-            map.setCenter(location);
-          }
         } else {
-          console.error("Geocoding failed for " + locationName);
+          console.error("Geocoding failed for " + name);
         }
       });
     };
-    geocodeLocation(location1)
-    geocodeLocation(location2)
+    geocodeLocation(location1);
+    geocodeLocation(location2);
+
+    const bounds = new google.maps.LatLngBounds();
+    geocodeLocation(location1);
+    geocodeLocation(location2);
+
+    geocoder.geocode({ address: location1.address }, (results, status) => {
+      if (status === google.maps.GeocoderStatus.OK && results[0]) {
+        bounds.extend(results[0].geometry.location);
+        map.fitBounds(bounds);
+      }
+    });
+    geocoder.geocode({ address: location2.address }, (results, status) => {
+      if (status === google.maps.GeocoderStatus.OK && results[0]) {
+        bounds.extend(results[0].geometry.location);
+        map.fitBounds(bounds);
+      }
+    });
   }, [location1, location2]);
+
   return <div ref={mapRef} className="route_map"></div>;
 }
 

front-end/src/components/RoutesPage.js

@@ -5,12 +5,12 @@ import "../css/routesPage.css";
 import RoutesSubpage from "./RoutesSubpage";
 
 function RoutesPage() {
-  const [fromLocation, setFromLocation] = useState("");
-  const [toLocation, setToLocation] = useState("");
+  const [fromLocation, setFromLocation] = useState({name: "", address: ""});
+  const [toLocation, setToLocation] = useState({name: "", address: ""});
   const [showSubpage, setShowSubpage] = useState(false);
 
   const checkAndShowSubpage = useCallback(() => {
-    if (fromLocation && toLocation) {
+    if (fromLocation.name && toLocation.name) {
       setShowSubpage(true);
     } else {
       setShowSubpage(false);
@@ -30,7 +30,7 @@ function RoutesPage() {
         <label>From:</label>
         <LocationFilter
           onLocationChange={(location) => {
-            setFromLocation(location);
+            setFromLocation({ name: location.name, address: location.address });
           }}
         />
       </div>
@@ -39,7 +39,7 @@ function RoutesPage() {
         <label>To:</label>
         <LocationFilter
           onLocationChange={(location) => {
-            setToLocation(location);
+            setToLocation({ name: location.name, address: location.address });
           }}
         />
       </div>
@@ -51,4 +51,4 @@ function RoutesPage() {
   );
 }
 
-export default RoutesPage;
+export default RoutesPage;

front-end/src/components/RoutesSubpage.js

@@ -13,7 +13,7 @@ function RoutesSubpage({ location1, location2 }) {
 
   useEffect(() => {
     const loadedRoutes = localStorageLoad('routes');
-    if (loadedRoutes && loadedRoutes.some((route) => route.from === location1 && route.to === location2)) {
+    if (loadedRoutes && loadedRoutes.some((route) => route.from === location1.name && route.to === location2.name)) {
       setIsRouteSaved(true);
     } else {
       setIsRouteSaved(false);
@@ -25,7 +25,7 @@ function RoutesSubpage({ location1, location2 }) {
       setSaveDialogOpen(true);
     } else {
       const loadedRoutes = localStorageLoad('routes') || [];
-      const updatedRoutes = loadedRoutes.filter((route) => route.from !== location1 || route.to !== location2);
+      const updatedRoutes = loadedRoutes.filter((route) => route.from !== location1.name || route.to !== location2.name);
       localStorageSave('routes', updatedRoutes);
       setIsRouteSaved(false);
     }
@@ -42,8 +42,8 @@ function RoutesSubpage({ location1, location2 }) {
       const newRoute = {
         _id: newId,
         name: name, 
-        from: location1,
-        to: location2,
+        from: location1.name,
+        to: location2.name,
       };
       loadedRoutes.push(newRoute);
       localStorageSave('routes', loadedRoutes);
@@ -63,7 +63,6 @@ function RoutesSubpage({ location1, location2 }) {
   return (
     <div className="routes-subpage-container">
       <div className="title-container">
-        <h1>Route</h1>
         <img
           src={isRouteSaved ? HeartIconLoaded : HeartIcon}
           alt="Saved Icon"
@@ -81,11 +80,11 @@ function RoutesSubpage({ location1, location2 }) {
             Shuttle {shuttle} scheduled at <strong>{shuttleSchedule}</strong>
           </p>
           <p className="text-sm">
-            {location1} to shuttle:{" "}
+            {location1.name} to shuttle:{" "}
             <strong>{timeToShuttle} min</strong>
           </p>
           <p className="text-sm">
-            Shuttle to {location2}:{" "}
+            Shuttle to {location2.name}:{" "}
             <strong>{timeToDestination2} min</strong>
           </p>
         </div>
@@ -100,4 +99,4 @@ function RoutesSubpage({ location1, location2 }) {
   );
 }
 
-export default RoutesSubpage;
+export default RoutesSubpage;

front-end/src/components/SaveRouteDialog.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import '../css/SaveRouteDialog.css'
+import '../css/saveRouteDialog.css'
 
 function SaveRouteDialog({ onClose, onSave}) {
   const [routeName, setRouteName] = useState("");

front-end/src/components/SavedRoutesPage.js

@@ -55,7 +55,7 @@ const SavedRoutesPage = () => {
         {routes.map((savedRoute) => (
           <div key={savedRoute._id} className="flex items-center justify-between bg-lightMidTone">
             <SavedRoute savedRoute={savedRoute} />
-            <div className="savedroutes-button">
+            <div className="savedroutes-buttons">
               <img
                 onClick={() => handleEditRoute(savedRoute._id)}
                 className="change-button"

front-end/src/css/routesPage.css

@@ -1,5 +1,5 @@
 .route-container {
-  @apply p-2 pl-4 pr-6 pt-4 pb-5 h-screen bg-lightTone flex flex-col ;
+  @apply p-2 pl-4 pr-6 pt-4 pb-5 h-screen bg-lightTone flex flex-col overflow-y-auto;
 }
 
 .dark .route-container{
@@ -10,8 +10,6 @@
   @apply my-0.5 w-full;
 }
 
-
-
 .location-input label {
   @apply block text-sm font-semibold text-gray-700 mb-1;
 }

front-end/src/css/routesSubpage.css

@@ -4,16 +4,16 @@
   @apply  h-screen bg-lightTone w-full overflow-y-auto flex flex-col items-center;
 }
 
+.dark .routes-subpage-container{
+  @apply bg-darkMode-darkTone;
+}
+
 img {
   @apply rounded-3xl p-4 m-0; 
 }
 
 .title-container {
-  @apply flex justify-between items-center w-full; 
-}
-
-.title-container h1 {
-  @apply text-2xl ml-36 font-bold;
+  @apply flex items-center ml-auto; 
 }
 
 .saved-icon {
@@ -24,8 +24,10 @@ img {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   padding: 0.5rem;
-  margin: 10px;
+  margin: 2%;
+  width: 80%;
   margin-top: 20px;
   background-color: #fff;
   border: 0.5px solid #4e4a4a;
@@ -50,6 +52,7 @@ img {
 
 .nav-button {
   background-color: #165516;
+
   padding: 1rem;
   border-radius: 12px;
   color: #fff;

front-end/src/css/savedRoutesPage.css

@@ -19,17 +19,17 @@
   }
 
   .dark .savedroutes-item-wrapper {
-    @apply divide-darkMode-lightTone text-white ;
+    @apply divide-darkMode-lightTone text-white;
   }
 
-  .savedroutes-button{
-    @apply flex justify-center p-7 ;
+  .savedroutes-buttons{
+    @apply flex  p-7;
   }
 
   .saved-button {
     @apply mb-10 p-2 ml-auto text-lg bg-darkMode-darkMidTone text-white rounded-md;
   }
 
   .delete-button{
-    @apply p-1 mt-2 h-10 ml-auto text-lg bg-darkMode-darkMidTone text-white rounded-md text-sm;
+    @apply p-1 mt-2 h-10 mr-0 text-lg bg-darkMode-darkMidTone text-white rounded-md text-sm;
   }

front-end/src/utils/mapUtility.js

@@ -35,7 +35,7 @@ const SIMPLE_MAP = [
 ];
 
 const API_BASE = 'https://maps.googleapis.com/maps/api/js';
-const API_KEY = 'API_KEY_HERE';
+//const API_KEY = '';
 const API_LIBRARIES = ['geometry', 'places'];
 const CALLBACK_NAME = 'gmapAPICallback';
 const POS_DEFAULT = [40.716503, -73.976077];