diff --git a/src/App.js b/src/App.js
index d96e822..7bd817a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,22 +1,12 @@
import React from 'react';
-import { Layout } from 'antd';
import HomeView from './components/HomeView';
-import 'antd/dist/antd.css';
-import styled from 'styled-components';
function App() {
return (
-
- Dijkstra
- Find the shortest path between different cities in Belgium with Dijkstra algorithm.
+ <>
-
+ >
);
}
export default App;
-
-const MainSection = styled.main`
- max-width: 800px;
- margin: 0 auto;
-`
\ No newline at end of file
diff --git a/src/assets/arrow-right.png b/src/assets/arrow-right.png
new file mode 100644
index 0000000..b35ba02
Binary files /dev/null and b/src/assets/arrow-right.png differ
diff --git a/src/components/HomeView.jsx b/src/components/HomeView.jsx
index b588e1d..b70bf38 100644
--- a/src/components/HomeView.jsx
+++ b/src/components/HomeView.jsx
@@ -1,13 +1,16 @@
-import React, { useState ,useEffect } from "react";
+import React, { useState ,useEffect } from 'react';
import { fetchRoads, fetchCities, getShortestPath } from './requests';
import { Select, Button, Icon } from 'antd';
-import Graph from "react-graph-vis";
+import Graph from 'react-graph-vis';
+import styled from 'styled-components';
+import 'antd/dist/antd.css';
+import arrow from '../assets/arrow-right.png';
const { Option } = Select;
function HomeView() {
- const [startingPoint, setStartingPoint] = useState();
- const [destination, setDestination] = useState();
+ const [startingPoint, setStartingPoint] = useState(1);
+ const [destination, setDestination] = useState(9);
const [errorSelect, setError] = useState({ message: '', flag: false });
const [shortestPath, setShortestPath] = useState();
@@ -33,7 +36,7 @@ function HomeView() {
));
let edges = roads.map(edge => (
- { from: edge.start_city_id, to: edge.end_city_id, length: edge.distance }
+ { from: edge.start_city_id, to: edge.end_city_id, length: edge.distance * 2 }
))
setGraph({nodes, edges})
@@ -69,6 +72,7 @@ function HomeView() {
function handleSubmit() {
if (startingPoint === destination) {
+ setError({ message: 'Please select a start and a destination', flag: true});
return
} else
if (startingPoint && destination) {
@@ -117,14 +121,16 @@ function HomeView() {
// setGraph({...graph, edges: updatedEdges});
return(
-
-
- Select Starting Point
+
+ Dijkstra
+ Find the shortest path between different cities in Belgium with Dijkstra algorithm.
+
+ Starting Point
-
+
+
-
-
+
+ Destination
-
+
+
-
-
+
}
-
+
{
shortestPath &&
-
+
Shortest path from {startingPoint.name} to {destination.name} ({shortestPath.distance}km)
- {shortestPath.path.map(city => (
-
{city.name}
+
{shortestPath.path.map(city => (
+ {city.name}
))}
-
+
-
+
}
{ graph.nodes.length > 0 &&
@@ -184,8 +190,47 @@ function HomeView() {
}}
/>
}
-
+
);
}
export default HomeView
+
+const Main = styled.main`
+ padding-top: 20px;
+ max-width: 800px;
+ margin: 0 auto;
+`
+
+const Section = styled.section`
+ margin: 20px 0;
+`
+
+const StyledSelect = styled(Select)`
+ margin-right:10px;
+`
+
+const StyledSpan = styled.span`
+ ::after {
+ content: "";
+ background-image: url(${arrow});
+ background-size: 13px 17px;
+ display: inline-block;
+ width: 13px;
+ height: 17px;
+ margin-right: 10px;
+ margin-left: 10px;
+ padding-top: 10px;
+ bottom: -10px;
+ }
+ font-size:1.5rem;
+ color: #40a9ff;
+`
+
+const StyledP = styled.p`
+ span:last-child {
+ ::after {
+ background-image: none;
+ }
+ }
+`
\ No newline at end of file