dijkstra-frontend/src/components/HomeView.jsx

import React, { useState ,useEffect } from "react";
import { fetchRoads, fetchCities, getShortestPath } from './requests';
import {Sigma, RandomizeNodePositions, RelativeSize, SigmaEnableSVG} from 'react-sigma';
import { Select, Button, Icon } from 'antd';

const { Option } = Select;

function HomeView() {
    const [startingPoint, setStartingPoint] = useState();
    const [destination, setDestination] = useState();
    const [errorSelect, setError] = useState({ message: '', flag: false });
    const [shortestPath, setShortestPath] = useState();
    
    const [cities, setCities] = useState([]);
    useEffect(() => {
        fetchCities()
            .then(data => setCities(data))
            .catch(error => console.log(error))
    }, []);
    
    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) {
        // eslint-disable-next-line
        let [ startingPoint ] = cities.filter(city => city.id == city_id);
        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) {
        // eslint-disable-next-line
        let [ destination ] = cities.filter(city => city.id == city_id);
        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() {
        if (startingPoint === destination) {
            return
        } else 
        if (startingPoint && destination) {
            getShortestPath(startingPoint.id, destination.id)
                .then(data => setShortestPath(data))
                .catch(error => console.log(error));
            setError({ flag: false });
        } else {
            setError({ message: 'Please select a start and a destination', flag: true});
        }
    }

    return(
        <main>
            <section>
                <h2>Select Starting Point</h2>
                <div>
                    <Select defaultValue="Belgium"  disabled>
                    </Select>
                    <Select 
                        defaultValue="Choose a city"
                        onChange={handleStart}
                        style={{ width: 139 }}
                    >
                        {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}
                        style={{ width: 139 }}
                    >
                        {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>
                {errorSelect.flag &&
                <p>{errorSelect.message}</p>
                }
            </section>
            {
            shortestPath && 
            <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>
                    ))}
                </div>

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

export default HomeView