Refactor error handling and requests
This commit is contained in:
@@ -7,7 +7,7 @@ function App() {
|
||||
return (
|
||||
<Layout>
|
||||
<h1>Dijkstra</h1>
|
||||
<p>Dijkstra is an app thas uses Dijkstra algorithm to display the shortest path between different cities in Belgium.</p>
|
||||
<p>Find the shortest path between different cities in Belgium with Dijkstra algorithm.</p>
|
||||
<HomeView/>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
@@ -1,66 +1,85 @@
|
||||
import React, { useState ,useEffect } from "react";
|
||||
import Axios from '../utils/API';
|
||||
import { fetchRoads, fetchCities, getShortestPath } from './requests';
|
||||
import {Sigma, RandomizeNodePositions, RelativeSize, SigmaEnableSVG} from 'react-sigma';
|
||||
import { Select, Button, Icon } from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
function HomeView() {
|
||||
const [cities, setCities] = useState([]);
|
||||
const [startingPoint, setStartingPoint] = useState();
|
||||
const [destination, setDestination] = useState();
|
||||
const [errorSelect, setError] = useState({ message: '', flag: false });
|
||||
const [shortestPath, setShortestPath] = useState();
|
||||
const [errorMessage, setErrorMessage] = useState();
|
||||
|
||||
|
||||
const [cities, setCities] = useState([]);
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const { data } = await Axios.get(
|
||||
`/countries/1`
|
||||
);
|
||||
setCities(data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
fetchCities()
|
||||
.then(data => setCities(data))
|
||||
.catch(error => console.log(error))
|
||||
}, []);
|
||||
|
||||
const [roads, setRoads] = useState([]);
|
||||
useEffect(() => {
|
||||
fetchRoads()
|
||||
.then(data => setRoads(data))
|
||||
.catch(error => console.log(error));
|
||||
}, []);
|
||||
|
||||
|
||||
const [graph, setGraph] = useState({nodes: [], edges: []});
|
||||
useEffect(() => {
|
||||
let nodes = cities.map(node => (
|
||||
{ id: `n${node.id}`, label: node.name}
|
||||
));
|
||||
|
||||
let edges = roads.map(edge => (
|
||||
{ id: `e${edge.id}`, source: `n${edge.start_city_id}`, target: `n${edge.end_city_id}`, label: 'SEES' }
|
||||
))
|
||||
|
||||
setGraph({nodes, edges})
|
||||
}, [cities, roads])
|
||||
|
||||
|
||||
function handleStart(city_id) {
|
||||
// eslint-disable-next-line
|
||||
let [ startingPoint ] = cities.filter(city => city.id == city_id);
|
||||
setStartingPoint(startingPoint);
|
||||
// Check if start and destination are the same
|
||||
if (startingPoint === destination) {
|
||||
setError({ message: 'The start and destination must be different.', flag: true });
|
||||
return
|
||||
}
|
||||
// Will reset the error message and shown path
|
||||
setShortestPath();
|
||||
setError({ flag: false });
|
||||
}
|
||||
|
||||
function handleDestination(city_id) {
|
||||
// eslint-disable-next-line
|
||||
let [ destination ] = cities.filter(city => city.id == city_id);
|
||||
setDestination(destination);
|
||||
// Check if start and destination are the same
|
||||
if (startingPoint === destination) {
|
||||
setError({ message: 'The start and destination must be different.', flag: true });
|
||||
return
|
||||
}
|
||||
// Will reset the error message and shown path
|
||||
setShortestPath();
|
||||
setError({ flag: false });
|
||||
}
|
||||
|
||||
|
||||
function handleSubmit() {
|
||||
if (startingPoint === destination) {
|
||||
setErrorMessage('Starting Point and Destination must be different cities.');
|
||||
return
|
||||
} else if (startingPoint && destination) {
|
||||
async function getPath() {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`/path`,
|
||||
{
|
||||
params: {
|
||||
start_city_id: startingPoint.id,
|
||||
end_city_id: destination.id
|
||||
}
|
||||
}
|
||||
);
|
||||
setShortestPath(response.data)
|
||||
setErrorMessage();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
getPath();
|
||||
} else
|
||||
if (startingPoint && destination) {
|
||||
getShortestPath(startingPoint.id, destination.id)
|
||||
.then(data => setShortestPath(data))
|
||||
.catch(error => console.log(error));
|
||||
setError({ flag: false });
|
||||
} else {
|
||||
setErrorMessage('Please select a Starting point and a Destination');
|
||||
setError({ message: 'Please select a start and a destination', flag: true});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,6 +93,7 @@ function HomeView() {
|
||||
<Select
|
||||
defaultValue="Choose a city"
|
||||
onChange={handleStart}
|
||||
style={{ width: 139 }}
|
||||
>
|
||||
{cities.map(city => (
|
||||
<Option key={city.id}>{city.name}</Option>
|
||||
@@ -89,6 +109,7 @@ function HomeView() {
|
||||
<Select
|
||||
defaultValue="Choose a city"
|
||||
onChange={handleDestination}
|
||||
style={{ width: 139 }}
|
||||
>
|
||||
{cities.map(city => (
|
||||
<Option key={city.id}>{city.name}</Option>
|
||||
@@ -104,21 +125,32 @@ function HomeView() {
|
||||
Get shortest path between the cities
|
||||
<Icon type="right" />
|
||||
</Button>
|
||||
{errorMessage &&
|
||||
<p>{errorMessage}</p>
|
||||
{errorSelect.flag &&
|
||||
<p>{errorSelect.message}</p>
|
||||
}
|
||||
</section>
|
||||
{
|
||||
shortestPath &&
|
||||
shortestPath &&
|
||||
<section>
|
||||
<h2>Shortest path from {startingPoint.name} to {destination.name}</h2>
|
||||
<p>{shortestPath.path.map(city => (
|
||||
<><span>{city.name}</span><Icon type="right" /></>
|
||||
<h2>Shortest path from {startingPoint.name} to {destination.name} ({shortestPath.distance}km)</h2>
|
||||
<div>{shortestPath.path.map(city => (
|
||||
<p key={city.id}><Icon type="right" /><span>{city.name}</span></p>
|
||||
))}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
}
|
||||
{ graph.nodes.length > 0 &&
|
||||
|
||||
<div>
|
||||
<p>Graph</p>
|
||||
<Sigma graph={graph} settings={{drawEdges: true, clone: false}} renderer="svg">
|
||||
<RelativeSize initialSize={50}/>
|
||||
<RandomizeNodePositions/>
|
||||
</Sigma>
|
||||
</div>
|
||||
|
||||
}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
40
src/components/requests.js
Normal file
40
src/components/requests.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import Axios from '../utils/API';
|
||||
|
||||
export async function fetchRoads() {
|
||||
try {
|
||||
const { data } = await Axios.get(
|
||||
`api/roads`
|
||||
);
|
||||
return data
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
export async function fetchCities() {
|
||||
try {
|
||||
const { data } = await Axios.get(
|
||||
`api/countries/1`
|
||||
);
|
||||
return data
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
export async function getShortestPath(startingPointId, destinationID) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`api/path`,
|
||||
{
|
||||
params: {
|
||||
start_city_id: startingPointId,
|
||||
end_city_id: destinationID
|
||||
}
|
||||
}
|
||||
);
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import axios from "axios";
|
||||
|
||||
export default axios.create({
|
||||
baseURL: "https://dijkstra-backend.herokuapp.com/api",
|
||||
baseURL: "https://dijkstra-backend.herokuapp.com/",
|
||||
responseType: "json"
|
||||
});
|
||||
Reference in New Issue
Block a user