From e7ab98323d76202f5694075dfadb47dbae428bdb Mon Sep 17 00:00:00 2001
From: Savy <savy.novachez011@gmail.com>
Date: Fri, 14 Apr 2023 16:50:02 +0530
Subject: [PATCH] Finished Ex 2.20

---
 Part_2/countrydata/.gitignore                |  1 +
 Part_2/countrydata/src/App.js                |  9 ++--
 Part_2/countrydata/src/components/Details.js | 51 +++++++++++++++++---
 3 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/Part_2/countrydata/.gitignore b/Part_2/countrydata/.gitignore
index 4d29575..cc964cb 100644
--- a/Part_2/countrydata/.gitignore
+++ b/Part_2/countrydata/.gitignore
@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local
diff --git a/Part_2/countrydata/src/App.js b/Part_2/countrydata/src/App.js
index 4a5eb6a..ba4cf7c 100644
--- a/Part_2/countrydata/src/App.js
+++ b/Part_2/countrydata/src/App.js
@@ -22,14 +22,12 @@ const App = () => {
 
 	const handleSearch = (event) => {
 		setSearch(event.target.value)
+		setDisplay(false)
 	}
 
 	const handleClick = (country) => {
-		console.log('Clicked')
-		console.log(country)
 		setDisplayCountry(country)
-		setDisplay(current => !current)
-		console.log(displayCountry)
+		setDisplay(true)
 	}
 
 	return (
@@ -41,7 +39,7 @@ const App = () => {
 			<br />
 
 			{searchResults.length > 10 && <p>Too Many Results to Show, Please specify query</p>}
-			{searchResults.length <10 && searchResults.length > 1 && searchResults.map(country => (
+			{searchResults.length < 10 && searchResults.length > 1 && searchResults.map(country => (
 				<div>
 				<li key={country.name}>
 					{country.name}
@@ -52,7 +50,6 @@ const App = () => {
 			))}
 			{searchResults.length === 1 && (
 				<div>
-					{console.log('Entering Details')}
 					<Details country={searchResults[0]} />
 				</div>
 			)}
diff --git a/Part_2/countrydata/src/components/Details.js b/Part_2/countrydata/src/components/Details.js
index 6990aa2..d8e14dc 100644
--- a/Part_2/countrydata/src/components/Details.js
+++ b/Part_2/countrydata/src/components/Details.js
@@ -1,3 +1,37 @@
+import { useEffect, useState } from "react"
+import axios from "axios"
+
+const WeatherData = ({ country }) => {
+	const baseURL = 'http://api.openweathermap.org/data/2.5/weather'
+	const api_key = process.env.REACT_APP_API_KEY
+	const [ weather, setWeather ] = useState([])
+	const city = country.capital[0].replace(/ /g,"+");
+
+	useEffect(() => {
+		console.log('Getting Data')
+		axios
+			.get(`${baseURL}?q=${city}&units=metric&appid=${api_key}`)
+			.then(response => {
+				setWeather(Object.assign(weather, response.data))
+				console.log("Response recieved", weather)
+			})
+	}, [city])
+
+	if (weather.name === undefined) {
+		return <p>Loading...</p>
+	}
+
+	return (
+		<div>
+			<p><b>Temperature:</b> {weather.main.temp}<sup>o</sup>C</p>
+			<p><b>Weather:</b> {weather.weather[0].main}</p>
+			<p><b>Wind:</b> {weather.wind.speed}m/s</p>
+			<img alt={weather.weather[0].main} src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`}/>
+			
+		</div>
+	)
+}
+
 const Details = ({ country }) => {
 	if (country.length === 0) {
 		return null
@@ -5,19 +39,22 @@ const Details = ({ country }) => {
 
 	return (
 		<div>
-			<h2>{country.name}&nbsp;{country.emoji}</h2>
-			<p><strong>Capital:</strong> {country.capital}</p>
-			<p><strong>Area:</strong> {country.area} km²</p>
-			<p><strong>Population:</strong> {country.population}</p>
-			<p><strong>Region:</strong> {country.region}</p>
-			<p><strong>Sub-Region:</strong> {country.subregion}</p>
-			<p><strong>Languages:</strong></p> 
+			<h2><u>{country.name}&nbsp;{country.emoji}</u></h2>
+			<p><b>Capital:</b> {country.capital}</p>
+			<p><b>Area:</b> {country.area} km²</p>
+			<p><b>Population:</b> {country.population}</p>
+			<p><b>Region:</b> {country.region}</p>
+			<p><b>Sub-Region:</b> {country.subregion}</p>
+			<p><b>Languages:</b></p> 
 			<ul>	
 				{Object.values(country.languages).map(item =>
 					<li key={item}>{item}</li>
 				)}
 			</ul>
 			<img src={country.flags[0]} alt={country.name} width={250}/>
+		
+			<h2><u>Weather in {country.capital}</u></h2>
+			<WeatherData country={country} />
 		</div>
 	)
 }
-- 
2.51.2