Added Attraction component

src/Components/Attractions.js

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+
+const Attractions = (results) => {
+  // console.log(results.results.city.name);
+
+  const locationData = results.results;
+  const city = locationData.city.name;
+  const lng = locationData.city.coord.lon;
+  const lat = locationData.city.coord.lat;
+
+  const [attractionsData, setAttractionsData] = useState([]);
+
+  const AttractionsApiUrl = `https://api.opentripmap.com/0.1/en/places/radius?radius=1000&lon=${lng}&lat=${lat}9&rate=2&format=json&limit=15&apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`;
+
+  useEffect(() => {
+    (async () => {
+      // Fetching all attractions
+      const attractions = await fetch(AttractionsApiUrl).then((res) =>
+        res.json()
+      );
+
+      const xids = attractions.map((attraction) => attraction.xid);
+      if (xids.length === 0) {
+        console.log("Sorry nothing found");
+        return;
+      }
+
+      let dataArray = [];
+      for (let index = 0; index < 5; index++) {
+        const xid = xids[index];
+        const AttractionsDataApiUrl = `https://api.opentripmap.com/0.1/en/places/xid/${xid}?apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`;
+
+        // Fetching detailed info about each attraction
+        const data = await fetch(AttractionsDataApiUrl).then((res) =>
+          res.json()
+        );
+        if(!data.xid) continue
+        dataArray.push(data);
+      }
+
+      setAttractionsData([...dataArray]);
+    })();
+  }, [city]);
+
+  console.log("MY DATA", attractionsData);
+
+  return (
+    <div>
+      <h1>Places to visit in {city}</h1>
+      <div >
+        {attractionsData.map((attractionData) => (
+          <div class="card" style={{ 
+            backgroundColor: "white", borderRadius: "25px",
+            border: "2px solid #73AD21",
+            padding: "20px",
+            margin: "10px"
+            }}>
+            <p key={attractionData.xid} style={{ color: "black" }}>
+              {attractionData.name}
+            </p>
+            <img src={attractionData?.preview?.source?attractionData.preview.source:""} alt="alternatetext"/>
+            {
+              <p style={{ color: "black" }}>
+                {attractionData?.wikipedia_extracts ||
+                attractionData?.wikipedia_extracts?.text
+                  ? attractionData.wikipedia_extracts.text
+                  : "Not avail"}
+              </p>
+            }
+            <a href={attractionData.wikipedia} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Attractions;

src/Search.js

@@ -8,7 +8,7 @@ const autocompleteURL =
 function autoCompleteCity(city) {
   if (!city) return Promise.resolve([]);
 
-  const query = `q=${city}&limit=4&types=city&apiKey=${process.env.REACT_APP_HEREAPI}`;
+  const query = `q=${city}&limit=4&types=city&apiKey=71jcwfm2L5Kd0JjqWZl4XXyaSjdDVuaZPEu_rXRYVOA`;
   return fetch(`${autocompleteURL}${query}`)
     .then((res) => res.json())
     .then((result) => {

src/screen/home.js

@@ -1,12 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import "./home.css";
 import { Fab } from "../Components/common/Fab";
 import Box from "../Components/Box";
 import logo from "../assets/logo.png";
 import Forecast from "../forecast/Forecast.js";
 import Search from "../Search";
+import Attractions from "../Components/Attractions";
 import Map from "../Components/Map";
 
+
 const navigateToTrip = () => (window.location.href = "/trip");
 
 function App() {
@@ -19,6 +21,10 @@ function App() {
   const [generic, setGeneric] = useState("app");
   const [notfound, setFlag] = useState(false);
 
+
+  console.log("results", results);
+
+
   // get geolocation of the user
   useEffect(() => {
     if ("geolocation" in navigator) {
@@ -59,6 +65,7 @@ function App() {
   }, []);
 
   const fetchWeather = (url) => {
+
     return fetch(url)
       .then((res) => res.json())
       .then((result) => {
@@ -101,7 +108,7 @@ function App() {
         setIsLoaded(true);
         setError(error);
       });
-  };
+  },[]);
 
   useEffect(() => {
     document.body.classList.add("app");
@@ -176,6 +183,9 @@ function App() {
           {isLoaded && results && (
             <Box weather={results.list[0].weather[0].main} />
           )}
+          {isLoaded && results && (
+            <Attractions results={results} />
+          )}
           <Fab icon={"airplane_ticket"} onClick={navigateToTrip}>
             Plan Trip
           </Fab>