From b963ea9e935a81aee04536c3e89ed48bf881149f Mon Sep 17 00:00:00 2001 From: Ruchita Gosavi Date: Tue, 26 Jul 2022 16:39:50 +0530 Subject: [PATCH 1/7] Use xid to get data about the location --- src/Components/Attractions.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Components/Attractions.js b/src/Components/Attractions.js index 31a0b14..48246fb 100644 --- a/src/Components/Attractions.js +++ b/src/Components/Attractions.js @@ -6,9 +6,14 @@ const Attractions = (results) => { const city = locationData.city.name; const lng = locationData.city.coord.lon; const lat = locationData.city.coord.lat; - + useEffect(() => { fetch(`https://api.opentripmap.com/0.1/en/places/radius?radius=1000&lon=${lng}&lat=${lat}9&rate=2&format=json&limit=15&apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`) + .then(res => res.json()) + .then(data => { + const xid = data[0].xid; + return fetch(`https://api.opentripmap.com/0.1/en/places/xid/${xid}?apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`); + }) .then(res => res.json()) .then(data => { console.log(data); From d82e3c7a2772c45702f68746cd23933311a1df3d Mon Sep 17 00:00:00 2001 From: Ruchita Gosavi Date: Tue, 26 Jul 2022 16:57:57 +0530 Subject: [PATCH 2/7] Refactor code Use async await instead of multiple .then --- src/Components/Attractions.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/Components/Attractions.js b/src/Components/Attractions.js index 48246fb..6bbf8ad 100644 --- a/src/Components/Attractions.js +++ b/src/Components/Attractions.js @@ -6,19 +6,20 @@ const Attractions = (results) => { const city = locationData.city.name; const lng = locationData.city.coord.lon; const lat = locationData.city.coord.lat; - + + 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(() => { - fetch(`https://api.opentripmap.com/0.1/en/places/radius?radius=1000&lon=${lng}&lat=${lat}9&rate=2&format=json&limit=15&apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`) - .then(res => res.json()) - .then(data => { - const xid = data[0].xid; - return fetch(`https://api.opentripmap.com/0.1/en/places/xid/${xid}?apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`); - }) - .then(res => res.json()) - .then(data => { - console.log(data); - }) + (async () => { + const attractions = await fetch(AttractionsApiUrl).then(res => res.json()); + // console.log(attractions); + const xid = attractions[0].xid; + + const AttractionsDataApiUrl = `https://api.opentripmap.com/0.1/en/places/xid/${xid}?apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`; + const attractionsData = await fetch(AttractionsDataApiUrl).then(res => res.json()); + // console.log(attractionsData); + })(); }, [city]) + return (

{city}

From dcfcdd24750669b82337e59c64ecaf5b58852d4f Mon Sep 17 00:00:00 2001 From: AkhileshManda Date: Wed, 27 Jul 2022 17:09:04 +0530 Subject: [PATCH 3/7] updated attractions.js --- src/Components/Attractions.js | 16 +++++++++++----- src/Search.js | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/Components/Attractions.js b/src/Components/Attractions.js index 31a0b14..6bbf8ad 100644 --- a/src/Components/Attractions.js +++ b/src/Components/Attractions.js @@ -7,13 +7,19 @@ const Attractions = (results) => { const lng = locationData.city.coord.lon; const lat = locationData.city.coord.lat; + 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(() => { - fetch(`https://api.opentripmap.com/0.1/en/places/radius?radius=1000&lon=${lng}&lat=${lat}9&rate=2&format=json&limit=15&apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`) - .then(res => res.json()) - .then(data => { - console.log(data); - }) + (async () => { + const attractions = await fetch(AttractionsApiUrl).then(res => res.json()); + // console.log(attractions); + const xid = attractions[0].xid; + + const AttractionsDataApiUrl = `https://api.opentripmap.com/0.1/en/places/xid/${xid}?apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`; + const attractionsData = await fetch(AttractionsDataApiUrl).then(res => res.json()); + // console.log(attractionsData); + })(); }, [city]) + return (

{city}

diff --git a/src/Search.js b/src/Search.js index 0da5756..6a9c726 100644 --- a/src/Search.js +++ b/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) => { From 7ed70865a23d6b175c030d9c260b5b6e2c7f558a Mon Sep 17 00:00:00 2001 From: Ruchita Gosavi Date: Thu, 28 Jul 2022 17:21:23 +0530 Subject: [PATCH 4/7] Display names of some attractions --- src/Components/Attractions.js | 79 ++++++++++++++++++++++------------- 1 file changed, 51 insertions(+), 28 deletions(-) diff --git a/src/Components/Attractions.js b/src/Components/Attractions.js index 6bbf8ad..f28a133 100644 --- a/src/Components/Attractions.js +++ b/src/Components/Attractions.js @@ -1,30 +1,53 @@ -import React, { useEffect } from "react"; +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 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 () => { - const attractions = await fetch(AttractionsApiUrl).then(res => res.json()); - // console.log(attractions); - const xid = attractions[0].xid; - - const AttractionsDataApiUrl = `https://api.opentripmap.com/0.1/en/places/xid/${xid}?apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`; - const attractionsData = await fetch(AttractionsDataApiUrl).then(res => res.json()); - // console.log(attractionsData); - })(); - }, [city]) - - return ( -
-

{city}

-
- ); -} - -export default Attractions; \ No newline at end of file + 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() + ); + dataArray.push(data); + } + setAttractionsData([...dataArray]); + })(); + }, [city]); + + return ( +
+

{city}

+
+ {attractionsData.map((attractionData) => ( +

{attractionData.name}

+ ))} +
+
+ ); +}; + +export default Attractions; From ab9695b64d005c58110979dea736f7fc6b396c06 Mon Sep 17 00:00:00 2001 From: AkhileshManda Date: Thu, 28 Jul 2022 18:08:42 +0530 Subject: [PATCH 5/7] minor changes --- src/Components/Attractions.js | 135 +++++++++++++++++++++++++++------- src/screen/home.js | 9 ++- 2 files changed, 112 insertions(+), 32 deletions(-) diff --git a/src/Components/Attractions.js b/src/Components/Attractions.js index 6bbf8ad..a6c502a 100644 --- a/src/Components/Attractions.js +++ b/src/Components/Attractions.js @@ -1,30 +1,109 @@ -import React, { useEffect } from "react"; +import React, { useState, useEffect, useMemo } 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 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 () => { - const attractions = await fetch(AttractionsApiUrl).then(res => res.json()); - // console.log(attractions); - const xid = attractions[0].xid; - - const AttractionsDataApiUrl = `https://api.opentripmap.com/0.1/en/places/xid/${xid}?apikey=5ae2e3f221c38a28845f05b6c06a2c73eb6f2499d3b1881719d6dd39`; - const attractionsData = await fetch(AttractionsDataApiUrl).then(res => res.json()); - // console.log(attractionsData); - })(); - }, [city]) - - return ( -
-

{city}

-
- ); -} - -export default Attractions; \ No newline at end of file + // 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; + + console.log(city); + console.log(lng); + console.log(lat); + + const [attractionsData, setAttractionsData] = useState([]); + + const [isLoading, setIsLoading] = useState(true); + + 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=${process.env.REACT_APP_PLACESKEY}`; + useEffect(() => { + (async () => { + try { + console.log("city ", city); + setIsLoading(true); + const res = await fetch(AttractionsApiUrl); + + const attractions = await res.json(); + + //console.log(attractions); + // const xid = attractions[0].xid; + + let xids = []; + for (let i = 0; i < Math.min(attractions.length, 7); i++) { + //console.log(attractions[i].xid); + xids.push(attractions[i].xid); + } + + // console.log(xids); + if (xids.length === 0) { + console.log("Sorry nothing found"); + } + + const dataArray = []; + xids.forEach(async (xid) => { + if (xid) { + const AttractionsDataApiUrl = `https://api.opentripmap.com/0.1/en/places/xid/${xid}?apikey=${process.env.REACT_APP_PLACESKEY}`; + const res = await fetch(AttractionsDataApiUrl); + console.log("ran"); + const data = await res.json(); + // console.log(data); + if (data.name) { + const { + name, + preview: { source } = {}, + wikipedia_extracts: { text } = {}, + } = data; + //console.log(name, source, text); + dataArray.push({ name, source, text }); + } + } + }); + + setAttractionsData(dataArray); + setIsLoading(false); + } catch (e) { + console.error(e); + setIsLoading(false); + } + })(); + }, [city]); + + useEffect(() => { + console.log("ATTRACTION DATA", attractionsData); + }, [attractionsData]); + + const attractionsDataComponent = useMemo( + () => + attractionsData.map((attraction) => { + // console.log("HERE"); + console.log(attraction.name, attraction.name !== ""); + return

{attraction.name}

; + }), + [attractionsData] + ); + + console.log( + "attractionsDataComponent.length", + attractionsDataComponent.length + ); + + //console.log("LMAO WORKING",attractionsData); + return ( + <> + {isLoading ? ( +
Loading...
+ ) : ( +
+

{city}

+

HEREEE

+ + {attractionsDataComponent.length === 0 + ? "No results" + : attractionsDataComponent} +
+ )} + + ); +}; + +export default Attractions; diff --git a/src/screen/home.js b/src/screen/home.js index a0a0d41..4643fd6 100644 --- a/src/screen/home.js +++ b/src/screen/home.js @@ -1,4 +1,4 @@ -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"; @@ -18,8 +18,9 @@ function App() { const [generic, setGeneric] = useState("app"); const [notfound, setFlag] = useState(false); - console.log(1, results); - const fetchWeather = (url) => { + console.log("results", results); + + const fetchWeather = useCallback((url) => { return fetch(url) .then((res) => res.json()) .then((result) => { @@ -67,7 +68,7 @@ function App() { setIsLoaded(true); setError(error); }); - }; + },[]); useEffect(() => { document.body.classList.add("app"); From 867753420a5281ba028d976881bcdaa47e6f4e49 Mon Sep 17 00:00:00 2001 From: AkhileshManda Date: Fri, 29 Jul 2022 09:04:46 +0530 Subject: [PATCH 6/7] added card with image --- src/Components/Attractions.js | 32 +++++++++++++++++++++++++++----- src/screen/home.js | 4 ++++ 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/Components/Attractions.js b/src/Components/Attractions.js index 8ed44b4..8b210a9 100644 --- a/src/Components/Attractions.js +++ b/src/Components/Attractions.js @@ -1,5 +1,4 @@ - -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect } from "react"; const Attractions = (results) => { // console.log(results.results.city.name); @@ -35,18 +34,41 @@ const Attractions = (results) => { 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 (
-

{city}

-
+

Places to visit in {city}

+
{attractionsData.map((attractionData) => ( -

{attractionData.name}

+
+

+ {attractionData.name} +

+ alternatetext + { +

+ {attractionData?.wikipedia_extracts || + attractionData?.wikipedia_extracts?.text + ? attractionData.wikipedia_extracts.text + : "Not avail"} +

+ } + +
))}
diff --git a/src/screen/home.js b/src/screen/home.js index df26e55..9714708 100644 --- a/src/screen/home.js +++ b/src/screen/home.js @@ -5,6 +5,7 @@ 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"; const navigateToTrip = () => (window.location.href = "/trip"); @@ -125,6 +126,9 @@ function App() { {isLoaded && results && ( )} + {isLoaded && results && ( + + )} Plan Trip From b85dcaf48d00b61e14fd884da03c1010940b3f3e Mon Sep 17 00:00:00 2001 From: AkhileshManda Date: Fri, 29 Jul 2022 18:51:44 +0530 Subject: [PATCH 7/7] removed error --- src/screen/home.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screen/home.js b/src/screen/home.js index 146df5e..d4b6618 100644 --- a/src/screen/home.js +++ b/src/screen/home.js @@ -108,7 +108,7 @@ function App() { setIsLoaded(true); setError(error); }); - },[]); + } useEffect(() => { document.body.classList.add("app");