Refactor error handling and requests

This commit is contained in:
rui hildt 2020-02-10 00:12:39 +01:00
parent d12f09ed08
commit 86e2a700f8
6 changed files with 199 additions and 45 deletions

81
package-lock.json generated
View File

@ -1078,6 +1078,14 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
}, },
"@egjs/hammerjs": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
"integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
"requires": {
"@types/hammerjs": "^2.0.36"
}
},
"@emotion/is-prop-valid": { "@emotion/is-prop-valid": {
"version": "0.8.6", "version": "0.8.6",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz",
@ -1541,6 +1549,11 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"@types/hammerjs": {
"version": "2.0.36",
"resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.36.tgz",
"integrity": "sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ=="
},
"@types/istanbul-lib-coverage": { "@types/istanbul-lib-coverage": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
@ -7951,6 +7964,11 @@
"object.assign": "^4.1.0" "object.assign": "^4.1.0"
} }
}, },
"keycharm": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.2.0.tgz",
"integrity": "sha1-+m6i5DuQpoAohD0n8gddNajD5vk="
},
"killable": { "killable": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@ -11296,6 +11314,24 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.5.tgz", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.5.tgz",
"integrity": "sha512-+DMR2k5c6BqMDSMF8hLH0vYKtKTeikiFW+fj0LClN+XZg4N9b8QUAdHC62CGWNLTi/gnuuemNcNcTFrCvK1f+A==" "integrity": "sha512-+DMR2k5c6BqMDSMF8hLH0vYKtKTeikiFW+fj0LClN+XZg4N9b8QUAdHC62CGWNLTi/gnuuemNcNcTFrCvK1f+A=="
}, },
"react-graph-vis": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/react-graph-vis/-/react-graph-vis-1.0.5.tgz",
"integrity": "sha512-y7+eHcwj7GryRoY+ZawwsDmS8OMeJ8Gpzmzejqwz+T2qg6IYTk1bod42H5g3J2zzHcPaqAZpwxZG3d3YB4nBwQ==",
"requires": {
"lodash": "^4.17.15",
"prop-types": "^15.5.10",
"uuid": "^2.0.1",
"vis-network": "^5.1.1"
},
"dependencies": {
"uuid": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
"integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho="
}
}
},
"react-is": { "react-is": {
"version": "16.12.0", "version": "16.12.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
@ -13586,6 +13622,51 @@
"extsprintf": "^1.2.0" "extsprintf": "^1.2.0"
} }
}, },
"vis-data": {
"version": "6.3.5",
"resolved": "https://registry.npmjs.org/vis-data/-/vis-data-6.3.5.tgz",
"integrity": "sha512-H8lD1NTmC5HimYeqTouxhbUya5qrYQGjpJhIHkxsm5R34EEdcm/D1cLTMLFFyIoZC6SQkADQj+dlFKf5DOnSww==",
"requires": {
"vis-util": "2.0.1",
"vis-uuid": "1.1.3"
},
"dependencies": {
"vis-util": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/vis-util/-/vis-util-2.0.1.tgz",
"integrity": "sha512-VBQ6zCT+Iaum70uzLbjk0nLMOjp9NhPzU42j0gaM6q6tg0eTcgIWNXzAqamhQtmm1kDj0jMLzKvkFOPENYv34w==",
"optional": true
}
}
},
"vis-network": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/vis-network/-/vis-network-5.4.1.tgz",
"integrity": "sha512-hUJlFWoCmLup6IxoXCr//OO2ZCkC8jrXEkkHLG1DhBgB54Y3K33+e5q4tc436inMlGzfqqaKTIToNbOGr8Szww==",
"requires": {
"@egjs/hammerjs": "^2.0.15",
"component-emitter": "^1.3.0",
"keycharm": "^0.2.0",
"moment": "^2.24.0",
"timsort": "^0.3.0",
"vis-data": "^6.1.1",
"vis-util": "^1.1.6"
}
},
"vis-util": {
"version": "1.1.10",
"resolved": "https://registry.npmjs.org/vis-util/-/vis-util-1.1.10.tgz",
"integrity": "sha512-8hGSxsFi2ogYYweClQyITzWnirWgQ8p0i9M4d3OXMuUO8vjXrf+2zHOYI9OZbtUduxAWuMEePnS9BXDtPJmJ7Q==",
"requires": {
"moment": "2.24.0",
"vis-uuid": "1.1.3"
}
},
"vis-uuid": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/vis-uuid/-/vis-uuid-1.1.3.tgz",
"integrity": "sha512-2B6XdY1bkzbUh+TugmnAaFa61KO9R5pzBzIuFIm8a9FrkbxIdSmQXV+FbfkL8QunkQV/bT0JDLQ2puqCS2+0Og=="
},
"vm-browserify": { "vm-browserify": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",

View File

@ -10,6 +10,7 @@
"axios": "^0.19.2", "axios": "^0.19.2",
"react": "^16.12.0", "react": "^16.12.0",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
"react-graph-vis": "^1.0.5",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",
"react-scripts": "3.3.1", "react-scripts": "3.3.1",
"react-sigma": "^1.2.34", "react-sigma": "^1.2.34",

View File

@ -7,7 +7,7 @@ function App() {
return ( return (
<Layout> <Layout>
<h1>Dijkstra</h1> <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/> <HomeView/>
</Layout> </Layout>
); );

View File

@ -1,66 +1,85 @@
import React, { useState ,useEffect } from "react"; 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'; import { Select, Button, Icon } from 'antd';
const { Option } = Select; const { Option } = Select;
function HomeView() { function HomeView() {
const [cities, setCities] = useState([]);
const [startingPoint, setStartingPoint] = useState(); const [startingPoint, setStartingPoint] = useState();
const [destination, setDestination] = useState(); const [destination, setDestination] = useState();
const [errorSelect, setError] = useState({ message: '', flag: false });
const [shortestPath, setShortestPath] = useState(); const [shortestPath, setShortestPath] = useState();
const [errorMessage, setErrorMessage] = useState();
const [cities, setCities] = useState([]);
useEffect(() => { useEffect(() => {
async function fetchData() { fetchCities()
try { .then(data => setCities(data))
const { data } = await Axios.get( .catch(error => console.log(error))
`/countries/1`
);
setCities(data);
} catch (error) {
console.error(error);
}
};
fetchData();
}, []); }, []);
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) { function handleStart(city_id) {
// eslint-disable-next-line // eslint-disable-next-line
let [ startingPoint ] = cities.filter(city => city.id == city_id); let [ startingPoint ] = cities.filter(city => city.id == city_id);
setStartingPoint(startingPoint); 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) { function handleDestination(city_id) {
// eslint-disable-next-line // eslint-disable-next-line
let [ destination ] = cities.filter(city => city.id == city_id); let [ destination ] = cities.filter(city => city.id == city_id);
setDestination(destination); 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() { function handleSubmit() {
if (startingPoint === destination) { if (startingPoint === destination) {
setErrorMessage('Starting Point and Destination must be different cities.');
return return
} else if (startingPoint && destination) { } else
async function getPath() { if (startingPoint && destination) {
try { getShortestPath(startingPoint.id, destination.id)
const response = await Axios.get( .then(data => setShortestPath(data))
`/path`, .catch(error => console.log(error));
{ setError({ flag: false });
params: {
start_city_id: startingPoint.id,
end_city_id: destination.id
}
}
);
setShortestPath(response.data)
setErrorMessage();
} catch (error) {
console.error(error);
}
}
getPath();
} else { } 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 <Select
defaultValue="Choose a city" defaultValue="Choose a city"
onChange={handleStart} onChange={handleStart}
style={{ width: 139 }}
> >
{cities.map(city => ( {cities.map(city => (
<Option key={city.id}>{city.name}</Option> <Option key={city.id}>{city.name}</Option>
@ -89,6 +109,7 @@ function HomeView() {
<Select <Select
defaultValue="Choose a city" defaultValue="Choose a city"
onChange={handleDestination} onChange={handleDestination}
style={{ width: 139 }}
> >
{cities.map(city => ( {cities.map(city => (
<Option key={city.id}>{city.name}</Option> <Option key={city.id}>{city.name}</Option>
@ -104,21 +125,32 @@ function HomeView() {
Get shortest path between the cities Get shortest path between the cities
<Icon type="right" /> <Icon type="right" />
</Button> </Button>
{errorMessage && {errorSelect.flag &&
<p>{errorMessage}</p> <p>{errorSelect.message}</p>
} }
</section> </section>
{ {
shortestPath && shortestPath &&
<section> <section>
<h2>Shortest path from {startingPoint.name} to {destination.name}</h2> <h2>Shortest path from {startingPoint.name} to {destination.name} ({shortestPath.distance}km)</h2>
<p>{shortestPath.path.map(city => ( <div>{shortestPath.path.map(city => (
<><span>{city.name}</span><Icon type="right" /></> <p key={city.id}><Icon type="right" /><span>{city.name}</span></p>
))} ))}
</p> </div>
</section> </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> </main>
); );
} }

View 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);
}
}

View File

@ -1,6 +1,6 @@
import axios from "axios"; import axios from "axios";
export default axios.create({ export default axios.create({
baseURL: "https://dijkstra-backend.herokuapp.com/api", baseURL: "https://dijkstra-backend.herokuapp.com/",
responseType: "json" responseType: "json"
}); });