Connect to api and setup basic homepage

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 (
     <Layout>
       <h1>Dijkstra</h1>
       <p>Dijkstra is an app thas uses Dijkstra algorithm to display the shortest path between different cities in Belgium.</p>
+      <HomeView/>
     </Layout>
   );
 }

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(
+        <main>
+            <section>
+                <h2>Select Starting Point</h2>
+                <div>
+                    <Select defaultValue="Belgium"  disabled>
+                    </Select>
+                    <Select 
+                        defaultValue="Choose a city"
+                        onChange={handleStart}
+                    >
+                        {cities.map(city => (
+                            <Option key={city.id}>{city.name}</Option>
+                        ))}
+                    </Select>
+                </div>
+            </section>
+            <section>
+                <h2>Select Destination</h2>
+                <div>
+                    <Select defaultValue="Belgium"  disabled>
+                    </Select>
+                    <Select
+                        defaultValue="Choose a city"
+                        onChange={handleDestination}
+                    >
+                        {cities.map(city => (
+                            <Option key={city.id}>{city.name}</Option>
+                        ))}
+                    </Select>
+                </div>
+            </section>
+            <section>
+                <Button
+                    type="primary"
+                    onClick={handleSubmit}
+                >
+                    Get shortest path between the cities
+                    <Icon type="right" />
+                </Button>
+                {errorMessage &&
+                <p>{errorMessage}</p>
+                }
+            </section>
+            {
+            shortestPath &&
+            <section>
+                <h2>Shortest path from {startingPoint.name} to {destination.name}</h2>
+                <p>{shortestPath.path.map(city => (
+                    <><span>{city.name}</span><Icon type="right" /></>
+                    ))}
+                </p>
+
+            </section>
+            }
+        </main>
+    );
+}
+
+export default HomeView

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"
+});