From 3d6283d77e07638961f48f8a43f7db7f550b3289 Mon Sep 17 00:00:00 2001
From: amirreza-ashrafi-dev <aa090818@yahoo.com>
Date: Wed, 12 Apr 2023 14:01:15 +0430
Subject: [PATCH 1/3] iframe allowFullScreena is a wrong property and changed
 to allowFullScreen, Link component which wrapped around iframe removed
 because it doesn't affect and it causing error

---
 src/components/Header.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 80b69ad..281d37e 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -16,16 +16,14 @@ const header = () => {
       <div data-aos="fade-up" data-aos-duration="7000">
         <Link to="/travel-guide">
           <div data-aos="fade-up" data-aos-duration="7000">
-            <Link to="/travel-guide">
-              <iframe
-                src="https://giphy.com/embed/yo1whaKkz38ME"
-                width="150"
-                height="100"
-                className="giphy-embed"
-                allowFullScreena
-                title="A GIF of planet earth spinning"
-              ></iframe>
-            </Link>
+            <iframe
+              src="https://giphy.com/embed/yo1whaKkz38ME"
+              width="150"
+              height="100"
+              className="giphy-embed"
+              allowFullScreen
+              title="A GIF of planet earth spinning"
+            ></iframe>
           </div>
         </Link>
       </div>

From 16021e7d80240e00de91ffb6d6f78c55c454eaab Mon Sep 17 00:00:00 2001
From: amirreza-ashrafi-dev <aa090818@yahoo.com>
Date: Wed, 12 Apr 2023 14:31:46 +0430
Subject: [PATCH 2/3] return statement issue inside renderdetail method from
 Detail component fixed

---
 src/components/CountryDetails/Detail.js | 132 ++++++++++++------------
 1 file changed, 67 insertions(+), 65 deletions(-)

diff --git a/src/components/CountryDetails/Detail.js b/src/components/CountryDetails/Detail.js
index eba980a..170f4fd 100644
--- a/src/components/CountryDetails/Detail.js
+++ b/src/components/CountryDetails/Detail.js
@@ -14,6 +14,7 @@ class Detail extends React.Component {
     const { id } = this.props.match.params;
 
     axios.get(`https://restcountries.com/v2/name/${id}`).then((response) => {
+      console.log(response);
       if (id.toLowerCase() === "india") {
         response.data[1].population = 1380879389;
         this.setState({ details: response.data[1] });
@@ -54,73 +55,74 @@ class Detail extends React.Component {
 
   renderDetail = () => {
     const { details } = this.state;
+    return <>
+      {!details ? (
+        <Loader />
+      ) : (
+        <div className="region-details">
+          <img
+            alt={details.region}
+            src={details.flag}
+            height="100"
+            width="200"
+          />
+          <h1>{this.props.match.params.id}</h1>
+          <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
+            <h3>Population</h3>
+            <p>{details.population.toLocaleString()}</p>
+          </div>
+          <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
+            <h3>Capital</h3>
+            <p>{details.capital}</p>
+          </div>
+          <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
+            <h3>Call Code</h3>
+            <p>{details.callingCodes}</p>
+          </div>
+          <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
+            <h3>Region</h3>
+            <p>{details.region}</p>
+          </div>
+          <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
+            <h3>Native</h3>
+            <p>{details.demonym}</p>
+          </div>
+          <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
+            <h3>Languages</h3>
+            <p>
+              {details.languages
+                .map((language) => `${language.nativeName}`)
+                .join(", ")}
+            </p>
+          </div>
+          <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
+            <h3>Currencies</h3>
+            <p>
+              {details.currencies
+                .map((currency) => `${currency.name} (${currency.code})`)
+                .join(", ")}
+            </p>
+          </div>
+          <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
+            <h3>Time Zone(s)</h3>
+            <p>{details.timezones.join(", ")}</p>
+          </div>
 
-  !details ? (
-    <Loader />
-  ) : (
-    <div className="region-details">
-      <img
-        alt={details.region}
-        src={details.flag}
-        height="100"
-        width="200"
-      />
-      <h1>{this.props.match.params.id}</h1>
-      <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
-        <h3>Population</h3>
-        <p>{details.population.toLocaleString()}</p>
-      </div>
-      <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
-        <h3>Capital</h3>
-        <p>{details.capital}</p>
-      </div>
-      <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
-        <h3>Call Code</h3>
-        <p>{details.callingCodes}</p>
-      </div>
-      <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
-        <h3>Region</h3>
-        <p>{details.region}</p>
-      </div>
-      <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
-        <h3>Native</h3>
-        <p>{details.demonym}</p>
-      </div>
-      <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
-        <h3>Languages</h3>
-        <p>
-          {details.languages
-            .map((language) => `${language.nativeName}`)
-            .join(", ")}
-        </p>
-      </div>
-      <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
-        <h3>Currencies</h3>
-        <p>
-          {details.currencies
-            .map((currency) => `${currency.name} (${currency.code})`)
-            .join(", ")}
-        </p>
-      </div>
-      <div className="ma3 pa4 br3 grow f4 ph3 pv2 dib shadow-5 ba tc">
-        <h3>Time Zone(s)</h3>
-        <p>{details.timezones.join(", ")}</p>
-      </div>
+          <CountryMap
+            countryName={details.name}
+            lat={details.latlng[0]}
+            lng={details.latlng[1]}
+          />
 
-      <CountryMap
-        countryName={details.name}
-        lat={details.latlng[0]}
-        lng={details.latlng[1]}
-      />
-
-      <Link
-        className="f6 link dim br-pill ph4 pv2 mb2 dib white bg-purple"
-        to={`/travel-guide/${details.region.toLowerCase()}`}
-      >
-        BACK
-      </Link>
-    </div>
-  );
+          <Link
+            className="f6 link dim br-pill ph4 pv2 mb2 dib white bg-purple"
+            to={`/travel-guide/${details.region.toLowerCase()}`}
+          >
+            BACK
+          </Link>
+        </div>
+      )}
+    </>
   };
 
   render() {

From e1aec00a8fe0ff55c93c4f08f7ff6b04882daacc Mon Sep 17 00:00:00 2001
From: amirreza-ashrafi-dev <aa090818@yahoo.com>
Date: Wed, 12 Apr 2023 14:33:09 +0430
Subject: [PATCH 3/3] remove console.log

---
 src/components/CountryDetails/Detail.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/CountryDetails/Detail.js b/src/components/CountryDetails/Detail.js
index 170f4fd..49ed38f 100644
--- a/src/components/CountryDetails/Detail.js
+++ b/src/components/CountryDetails/Detail.js
@@ -14,7 +14,6 @@ class Detail extends React.Component {
     const { id } = this.props.match.params;
 
     axios.get(`https://restcountries.com/v2/name/${id}`).then((response) => {
-      console.log(response);
       if (id.toLowerCase() === "india") {
         response.data[1].population = 1380879389;
         this.setState({ details: response.data[1] });