feat: Suggesting best routes

.gitignore

@@ -21,6 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
 
 .env
 package-lock.json

package.json

@@ -3,13 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.9.2",
+    "@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "dotenv": "^16.0.1",
     "leaflet": "^1.8.0",
+    "leaflet-routing-machine": "^3.2.12",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-geocode": "^0.2.3",
     "react-leaflet": "^4.0.1",
     "react-scripts": "4.0.3",
     "react-search-autocomplete": "^7.2.2",

src/screen/routing.js

@@ -0,0 +1,23 @@
+import leaflet from "leaflet";
+import { createControlComponent } from "@react-leaflet/core";
+import "leaflet-routing-machine";
+
+function createRoutineMachineLayer({geocodes}) {
+    console.log(geocodes);
+  const instance = leaflet.Routing.control({
+    waypoints: [
+      leaflet.latLng(geocodes[0].lat, geocodes[0].lon),
+      leaflet.latLng(geocodes[1].lat, geocodes[1].lon)
+    ],
+    lineOptions: {
+        styles: [{ color: "#6FA1EC", weight: 6 }]
+      },
+    show: false,
+  });
+
+  return instance;
+};
+
+const RoutingMachine = createControlComponent(createRoutineMachineLayer);
+
+export default RoutingMachine;

src/screen/trip.css

@@ -0,0 +1,32 @@
+.search-bar{
+    margin-top: 2rem;
+    margin-bottom: 4rem;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-direction: row;
+}
+
+.leaflet-container {
+    width: 80%;
+    height: 75vh;
+    margin: 0 auto;
+  }
+
+.route_button{
+    width: 150px;
+    padding: 10px;
+    background-color: blue;
+    color: white;
+    font-size: 20px;
+    margin-bottom: 10px;
+    border-radius: 15%;
+    border: none;
+    cursor: pointer;
+}
+
+.icon{
+    margin-top: 10px;
+    width: 50px;
+}

src/screen/trip.js

@@ -1,18 +1,91 @@
-import React from "react";
+import React, {useState} from "react";
 import { Fab } from "../Components/common/Fab";
-import { Food } from "../Components/Food";
+import { Food }from "../Components/Food";
+import './trip.css';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import Search from "../Search";
+import RoutingMachine from "./routing";
+import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
+
 
 const navigateToHome = () => (window.location.href = "/");
 
 export function Trip() {
+  const [currentCity, setCurrentCity] = useState(null);
+  const [fromCity, setFromCity] = useState(null);
+  const [toCity, setToCity] = useState(null);
+  const [cityList, setCityList] = useState([]);
+  const [isLoaded, setLoaded] = useState(false);
+
+  function setRoute() {
+    if(fromCity==null || toCity==null) {
+      alert("Something went wrong, try again!");
+      return;
+    }
+    fetch(`https://geocode.search.hereapi.com/v1/geocode?q=${fromCity}&apiKey=${process.env.REACT_APP_HEREAPI}`)
+    .then((res) => res.json())
+      .then((result) => {
+        //console.log(result);
+        let list = [...cityList];
+        list.push({
+          lat: result.items[0].position.lat,
+          lon: result.items[0].position.lng,
+        });
+        setCityList(list);
+      });
+    fetch(`https://geocode.search.hereapi.com/v1/geocode?q=${toCity}&apiKey=${process.env.REACT_APP_HEREAPI}`)
+      .then((res) => res.json())
+        .then((result) => {
+          //console.log(result);
+          let list = [...cityList];
+          list.push({
+            lat: result.items[0].position.lat,
+            lon: result.items[0].position.lng,
+          });
+          setCityList(list);
+          setLoaded(true);
+        });
+
+  }
+
+
   React.useEffect(() => {
     document.title = "Plan a trip";
-  }, []);
 
-
+    window.navigator.geolocation.getCurrentPosition((position) => {
+      fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.coords.latitude}&lon=${position.coords.longitude}&appid=${process.env.REACT_APP_APIKEY}`)
+      .then(res => res.json())
+      .then(result => {
+        //console.log(result)
+        setCurrentCity({
+          lat: result.coord.lat, 
+          lon: result.coord.lon, 
+          name: result.name 
+        });
+      })
+    })
 
-  return (
+  }, []);
+  return ( 
     <>
+    <div className="search-bar">
+      <Search setCity={setFromCity} />
+      <ArrowRightAltIcon className="icon"/>
+      <Search setCity={setToCity} />
+    </div>
+    <button onClick={setRoute} className="route_button">Find Route</button>
+      {currentCity==null? <div>Loading...</div> :
+        <MapContainer center={[currentCity.lat,currentCity.lon]} zoom={13} scrollWheelZoom={false}>
+           <TileLayer
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            {cityList.length === 2 && <RoutingMachine geocodes={cityList} />}
+            <Marker position={[currentCity.lat,currentCity.lon]}>
+            <Popup>You are here!</Popup>
+          </Marker>
+        </MapContainer>
+          }
       <Food country="PK" />
       <Fab onClick={navigateToHome} icon="thermostat">
         Weather