From e95bb21532a07242ce34aa4aeea23ee6a56ad6af Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Mon, 10 Feb 2020 03:09:47 +0100
Subject: [PATCH] Improve styling

---
 src/App.js                  |  14 +-----
 src/assets/arrow-right.png  | Bin 0 -> 2066 bytes
 src/components/HomeView.jsx |  97 ++++++++++++++++++++++++++----------
 3 files changed, 73 insertions(+), 38 deletions(-)
 create mode 100644 src/assets/arrow-right.png

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 (
-    <MainSection>
-      <h1>Dijkstra</h1>
-      <p>Find the shortest path between different cities in Belgium with Dijkstra algorithm.</p>
+    <>
       <HomeView/>
-    </MainSection>
+    </>
   );
 }
 
 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 0000000000000000000000000000000000000000..b35ba0208ff05b9ae294643cf904fce098a9b4ae
GIT binary patch
literal 2066
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
SF6sgQZ-~1K*_rP|&-_2#<G!Q-

literal 0
HcmV?d00001

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(
-        <main>
-            <section>
-                <h2>Select Starting Point</h2>
+        <Main>
+            <h1>Dijkstra</h1>
+            <p>Find the shortest path between different cities in Belgium with Dijkstra algorithm.</p>
+            <Section>
+                <h2>Starting Point</h2>
                 <div>
-                    <Select defaultValue="Belgium"  disabled>
-                    </Select>
+                    <StyledSelect defaultValue="Belgium"  disabled>
+                    </StyledSelect>
                     <Select 
-                        defaultValue="Choose a city"
+                        defaultValue="Select a city"
                         onChange={handleStart}
                         style={{ width: 139 }}
                     >
@@ -133,14 +139,14 @@ function HomeView() {
                         ))}
                     </Select>
                 </div>
-            </section>
-            <section>
-                <h2>Select Destination</h2>
+            </Section>
+            <Section>
+                <h2>Destination</h2>
                 <div>
-                    <Select defaultValue="Belgium"  disabled>
-                    </Select>
+                    <StyledSelect defaultValue="Belgium"  disabled>
+                    </StyledSelect>
                     <Select
-                        defaultValue="Choose a city"
+                        defaultValue="Select a city"
                         onChange={handleDestination}
                         style={{ width: 139 }}
                     >
@@ -149,8 +155,8 @@ function HomeView() {
                         ))}
                     </Select>
                 </div>
-            </section>
-            <section>
+            </Section>
+            <Section>
                 <Button
                     type="primary"
                     onClick={handleSubmit}
@@ -161,17 +167,17 @@ function HomeView() {
                 {errorSelect.flag &&
                 <p>{errorSelect.message}</p>
                 }
-            </section>
+            </Section>
             {
             shortestPath && 
-            <section>
+            <Section>
                 <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>
+                <StyledP>{shortestPath.path.map(city => (
+                    <StyledSpan key={city.id} class="cityPath">{city.name}</StyledSpan>
                     ))}
-                </div>
+                </StyledP>
 
-            </section>
+            </Section>
             }
             { graph.nodes.length > 0 &&
 
@@ -184,8 +190,47 @@ function HomeView() {
                 }}
                 />
             }
-        </main>
+        </Main>
     );
 }
 
 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