From d12f09ed08d4b70ee417575fe846cb62718551aa Mon Sep 17 00:00:00 2001 From: rui hildt Date: Sun, 9 Feb 2020 19:40:34 +0100 Subject: [PATCH] Connect to api and setup basic homepage --- package-lock.json | 76 ++++++++++++++++++++++ package.json | 3 +- public/index.html | 2 +- src/App.js | 5 +- src/apiRequests.js | 0 src/components/HomeView.jsx | 126 ++++++++++++++++++++++++++++++++++++ src/utils/API.js | 6 ++ 7 files changed, 215 insertions(+), 3 deletions(-) delete mode 100644 src/apiRequests.js create mode 100644 src/utils/API.js diff --git a/package-lock.json b/package-lock.json index 7702fa5..286bb23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1078,6 +1078,29 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/is-prop-valid": { + "version": "0.8.6", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz", + "integrity": "sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -2492,6 +2515,22 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz", "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==" }, + "babel-plugin-styled-components": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", + "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -3003,6 +3042,11 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -3649,6 +3693,11 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -3739,6 +3788,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -12803,6 +12862,23 @@ "schema-utils": "^2.6.4" } }, + "styled-components": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.0.1.tgz", + "integrity": "sha512-E0xKTRIjTs4DyvC1MHu/EcCXIj6+ENCP8hP01koyoADF++WdBUOrSGwU1scJRw7/YaYOhDvvoad6VlMG+0j53A==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.3", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", diff --git a/package.json b/package.json index 074d759..0b7c224 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "react-dom": "^16.12.0", "react-router-dom": "^5.1.2", "react-scripts": "3.3.1", - "react-sigma": "^1.2.34" + "react-sigma": "^1.2.34", + "styled-components": "^5.0.1" }, "scripts": { "start": "react-scripts start", diff --git a/public/index.html b/public/index.html index aa069f2..8664ba4 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Dijkstra diff --git a/src/App.js b/src/App.js index 10fc497..8f6c484 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,14 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { Layout } from 'antd'; +import HomeView from './components/HomeView'; +import 'antd/dist/antd.css'; function App() { return (

Dijkstra

Dijkstra is an app thas uses Dijkstra algorithm to display the shortest path between different cities in Belgium.

+ ); } diff --git a/src/apiRequests.js b/src/apiRequests.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/HomeView.jsx b/src/components/HomeView.jsx index e69de29..051db80 100644 --- a/src/components/HomeView.jsx +++ b/src/components/HomeView.jsx @@ -0,0 +1,126 @@ +import React, { useState ,useEffect } from "react"; +import Axios from '../utils/API'; +import { Select, Button, Icon } from 'antd'; +const { Option } = Select; + +function HomeView() { + const [cities, setCities] = useState([]); + const [startingPoint, setStartingPoint] = useState(); + const [destination, setDestination] = useState(); + const [shortestPath, setShortestPath] = useState(); + const [errorMessage, setErrorMessage] = useState(); + + useEffect(() => { + async function fetchData() { + try { + const { data } = await Axios.get( + `/countries/1` + ); + setCities(data); + } catch (error) { + console.error(error); + } + }; + fetchData(); + }, []); + + function handleStart(city_id) { + // eslint-disable-next-line + let [ startingPoint ] = cities.filter(city => city.id == city_id); + setStartingPoint(startingPoint); + } + + function handleDestination(city_id) { + // eslint-disable-next-line + let [ destination ] = cities.filter(city => city.id == city_id); + setDestination(destination); + } + + 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 { + setErrorMessage('Please select a Starting point and a Destination'); + } + } + + return( +
+
+

Select Starting Point

+
+ + +
+
+
+

Select Destination

+
+ + +
+
+
+ + {errorMessage && +

{errorMessage}

+ } +
+ { + shortestPath && +
+

Shortest path from {startingPoint.name} to {destination.name}

+

{shortestPath.path.map(city => ( + <>{city.name} + ))} +

+ +
+ } +
+ ); +} + +export default HomeView diff --git a/src/utils/API.js b/src/utils/API.js new file mode 100644 index 0000000..23d9763 --- /dev/null +++ b/src/utils/API.js @@ -0,0 +1,6 @@ +import axios from "axios"; + +export default axios.create({ + baseURL: "https://dijkstra-backend.herokuapp.com/api", + responseType: "json" +}); \ No newline at end of file