Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

quick fix when there is no route #141

Merged
merged 5 commits into from
Dec 7, 2023
Merged

quick fix when there is no route #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c142e1f
quick fix when there is no route
r8btx Dec 7, 2023
5fbb802
removed debug message
r8btx Dec 7, 2023
78affe9
defer tutorial
r8btx Dec 7, 2023
395f4c5
fixed saved route not loading location data
r8btx Dec 7, 2023
bc97b55
fixed error caused by the previous commit
r8btx Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions front-end/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ function App() {
<TutorialContext.Provider value={{ tutorialIndex, setTutorialIndex, tutorialOn, setTutorialOn }}>
<div onKeyDown={devTools}>
<BrowserRouter>
{!isLoading && tutorialOn && <TutorialComponent />}
{/* {!isLoading && tutorialOn && <TutorialComponent />} */}
{isLoading && <LoadingScreen />} {!isLoading && <NavBar />} {/* Hides navbar when loading */}
{!isLoading && (
<Routes>
Expand All @@ -92,7 +92,7 @@ function App() {
<Route path="/settings/view-schedule" element={<TimeSpreadsheetPage />} />
<Route path="/settings/feedback-support" element={<FeedbackSupportPage />} />
<Route path="/settings/privacypolicy" element={<PrivacyPolicyPage />} />
<Route path="/routes/:location1/:address1/:location2/:address2" element={<RoutesPage />} />
<Route path="/routes/:encodedLocation1/:encodedLocation2/" element={<RoutesPage />} />
</Routes>
)}
</BrowserRouter>
Expand Down
145 changes: 72 additions & 73 deletions front-end/src/components/RoutesPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,123 +1,120 @@
import React, { useState, useEffect, useCallback, useRef } from "react";
import { Link, useParams } from "react-router-dom";
import LocationFilter from "./LocationFilter";
import "../css/routesPage.css";
import RoutesSubpage from "./RoutesSubpage";
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Link, useParams } from 'react-router-dom';
import LocationFilter from './LocationFilter';
import '../css/routesPage.css';
import RoutesSubpage from './RoutesSubpage';

function RoutesPage() {
const { location1, address1, location2, address2 } = useParams();
const { encodedLocation1, encodedLocation2 } = useParams();

const decodedLocation1 = encodedLocation1 ? JSON.parse(encodedLocation1) : null;
const decodedLocation2 = encodedLocation2 ? JSON.parse(encodedLocation2) : null;

const lastLocation1 = useRef();
const lastLocation2 = useRef();
const awaitingData = useRef(false); //set loading state
const [ routes, setRoutes ] = useState([]); //set routes state

const [routes, setRoutes] = useState([]); //set routes state

if (typeof window.nyushuttle == "undefined") {
if (typeof window.nyushuttle == 'undefined') {
window.nyushuttle = {};
}

const [fromLocation, setFromLocation] = useState(() => {
if (location1 || address1) {
return { name: location1 || "", address: address1 || "" };
} else if (
typeof window.nyushuttle !== "undefined" &&
window.nyushuttle.fromLocation
) {
if (decodedLocation1) {
return decodedLocation1;
} else if (typeof window.nyushuttle !== 'undefined' && window.nyushuttle.fromLocation) {
return window.nyushuttle.fromLocation;
}
return { name: "", address: "" };
return { name: '', address: '' };
});

const [toLocation, setToLocation] = useState(() => {
if (location2 || address2) {
return { name: location2 || "", address: address2 || "" };
} else if (
typeof window.nyushuttle !== "undefined" &&
window.nyushuttle.toLocation
) {
if (decodedLocation2) {
return decodedLocation2;
} else if (typeof window.nyushuttle !== 'undefined' && window.nyushuttle.toLocation) {
return window.nyushuttle.toLocation;
}
return { name: "", address: "" };
return { name: '', address: '' };
});


useEffect(() => {
if (typeof window.nyushuttle == "undefined") {
if (typeof window.nyushuttle == 'undefined') {
window.nyushuttle = {};
}
window.nyushuttle.fromLocation = fromLocation;
}, [fromLocation]);

useEffect(() => {
if (typeof window.nyushuttle == "undefined") {
if (typeof window.nyushuttle == 'undefined') {
window.nyushuttle = {};
}
window.nyushuttle.toLocation = toLocation;
}, [toLocation]);

const [showRecent, setRecent] = useState("");
const [showRecent, setRecent] = useState('');
const [showSubpage, setShowSubpage] = useState(false);

const checkAndShowSubpage = useCallback(() => {
try{
try {
if (awaitingData.current === true) {
setShowSubpage(false);
console.log('awaiting data');
return }
console.log('awaiting data');
return;
}
if (fromLocation.name === lastLocation1.current.name && toLocation.name === lastLocation2.current.name) {
awaitingData.current = false;
return;
}
}
catch(typeError){
} catch (typeError) {
console.log('same input, no need to fetch new route');
}
if (fromLocation.name && toLocation.name && fromLocation.name !== toLocation.name) {
awaitingData.current = true;
let reachableRoutes = fetch(`/getRoute`, {
method: "POST",
method: 'POST',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
},
body: JSON.stringify({
origin_lat: fromLocation.lat,
origin_lng: fromLocation.lng,
destination_lat: toLocation.lat,
destination_lng: toLocation.lng,
routes: window.nyushuttle.routes,
stops: window.nyushuttle.stops
})
body: JSON.stringify({
origin_lat: fromLocation.lat,
origin_lng: fromLocation.lng,
destination_lat: toLocation.lat,
destination_lng: toLocation.lng,
routes: window.nyushuttle.routes,
stops: window.nyushuttle.stops,
}),
})
.then((response) => {
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
throw new Error('Network response was not ok');
}
awaitingData.current = false;
return response.json();
})
.then((data) => {
lastLocation1.current = fromLocation;
lastLocation2.current = toLocation;
if (Object.keys(data.onSameRoute).length === 0){
alert('No route found');
return response.json();
})
.then((data) => {
lastLocation1.current = fromLocation;
lastLocation2.current = toLocation;
if (!data || !data.onSameRoute || Object.keys(data.onSameRoute).length === 0) {
setRoutes('No route found');
setShowSubpage(true);
return;
}
}

console.log(Object.keys(data.onSameRoute).length)
if (Object.keys(data.onSameRoute).length === 7){
setRoutes(['You should walk instead!']);
}
else{
setRoutes(data.onSameRoute);
window.nyushuttle.startStopLocation = data.originStop.stopId;
window.nyushuttle.endStopLocation = data.destinationStop.stopId;
}
setShowSubpage(true);
return data;
})
.catch((error) => {
console.log(Object.keys(data.onSameRoute).length);
if (Object.keys(data.onSameRoute).length === 7) {
setRoutes(['You should walk instead!']);
setShowSubpage(true);
} else {
setRoutes(data.onSameRoute);
window.nyushuttle.startStopLocation = data.originStop.stopId;
window.nyushuttle.endStopLocation = data.destinationStop.stopId;
}
setShowSubpage(true);
return data;
})
.catch((error) => {
console.error('Fetch error:', error);
});
});
console.log(reachableRoutes);
} else {
setShowSubpage(false);
Expand All @@ -128,8 +125,6 @@ function RoutesPage() {
checkAndShowSubpage();
}, [checkAndShowSubpage]);



return (
<div className="route-container">
<div className="input-wrapper">
Expand All @@ -154,15 +149,19 @@ function RoutesPage() {
<LocationFilter
initialLocation={toLocation}
onLocationChange={(location) => {
setToLocation({ name: location.name, address: location.address, place_id: location.place_id, lat: location.lat, lng: location.lng });
setToLocation({
name: location.name,
address: location.address,
place_id: location.place_id,
lat: location.lat,
lng: location.lng,
});
}}
/>
</div>
</div>

{showSubpage && (
<RoutesSubpage location1={fromLocation} location2={toLocation} routes={routes} />
)}
{showSubpage && <RoutesSubpage location1={fromLocation} location2={toLocation} routes={routes} />}
</div>
);
}
Expand Down
46 changes: 31 additions & 15 deletions front-end/src/components/RoutesSubpage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ function RoutesSubpage({ location1, location2, routes }) {
const [navigateTo, setNavigateTo] = useState(null);
const navigate = useNavigate();

const exist = !!routes;
const isErrorMessage = exist ? typeof routes === 'string' : false;
// console.log(exist, isErrorMessage, routes);

const openSaveDialog = () => {
console.log('clicked');
if (!isRouteSaved) {
Expand Down Expand Up @@ -89,24 +93,36 @@ function RoutesSubpage({ location1, location2, routes }) {
</div>
<RouteMap location1={location1} location2={location2} />
<div className="route-info-container">
{Object.keys(routes).map((key, index) => (
<div key={index} className="route-info">
<div className="route-text">
<p className="text-lg">
<strong>{key}</strong>
</p>
<p className="text-base ">
Total Walking Time: <strong>{routes[key].time} min</strong>
</p>
{/* <p className="text-sm">
{!exist && (
<div>
<h1>Unexpected error occurred</h1>
</div>
)}
{exist && isErrorMessage && (
<div>
<h1>{routes}</h1>
</div>
)}
{exist &&
!isErrorMessage &&
Object.keys(routes).map((key, index) => (
<div key={index} className="route-info">
<div className="route-text">
<p className="text-lg">
<strong>{key}</strong>
</p>
<p className="text-base ">
Total Walking Time: <strong>{routes[key].time} min</strong>
</p>
{/* <p className="text-sm">
Shuttle {key} scheduled at <strong>{shuttleSchedule}</strong>
</p> */}
</div>
<button id={key} className="nav-button" onClick={(e) => setNavigateTo(e.target.id)}>
Start
</button>
</div>
<button id={key} className="nav-button" onClick={(e) => setNavigateTo(e.target.id)}>
Start
</button>
</div>
))}
))}
</div>
</div>
);
Expand Down
Loading