Skip to content

Commit

Permalink
handle now rows found in search
Browse files Browse the repository at this point in the history
  • Loading branch information
Das committed Aug 15, 2020
1 parent 2ac78d5 commit 6a44fed
Show file tree
Hide file tree
Showing 9 changed files with 187 additions and 102 deletions.
28 changes: 14 additions & 14 deletions .firebase/hosting.YnVpbGQ.cache
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@ logo192.png,499162500000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872
logo512.png,499162500000,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
asset-manifest.json,1597027317051,b221653afb83ddf6e785c9adfc330e779b4a1b88fe6265adb85c9a3afa259e80
index.html,1597027317051,c5c1dfd8cba0da6ae7e1147b40b5f14ff2d0bf5a2e5a917361de766b8cb79b38
precache-manifest.750e320234db0419032cefb806018d85.js,1597027317051,63c831313f962a41a9279fe30a61d966968f8240d272c883b7d6a6385b825e1c
service-worker.js,1597027317051,1d931ebee5ae063bde856250d9541afab9af6de70576ee4f0366b28e1c4c4b0e
static/css/main.54e973dc.chunk.css,1597027317056,f014e924b77c96765eca9210356b23659f483ae41d3222627789b850b81e771a
static/css/main.54e973dc.chunk.css.map,1597027317057,5bd3399bfc7103a88df5b4a6d2d7049dc2a19f3db10063bd9ce7798b8bed288f
static/js/2.c08ec4d2.chunk.js.LICENSE.txt,1597027317057,6e35c90a08889838097fac293adfe2716dd320ffd6ce18953bfbbb9f80852f3f
static/js/main.1b714a39.chunk.js,1597027317057,6e0bcd49a551f2ae1c59ebda624006b14e2fd6549b2beed7ce2b8ea589ea036d
static/js/runtime-main.d4304d1c.js,1597027317057,26f0303296f02225d1157ea161c2a2b0288df5281d303c1030b6945240554cdf
static/js/main.1b714a39.chunk.js.map,1597027317057,104dc6ef6fd3b144ed6ed3748fbd143a8c18c93898a112bbb28282732ec4d4ee
static/js/runtime-main.d4304d1c.js.map,1597027317057,1cc22d56b1fa9e0824e48491e56c4c1b83632c0aea3b4a1d9f5d497b50f929f4
static/media/c3f2.13a6e59e.png,1597027317056,5bc58b9030fc4ea7b59ea279f55ec5b7728f06d130fb03e7052ef9a9ddad0bf0
static/js/2.c08ec4d2.chunk.js,1597027317057,4b4c92529cb2e31ebdd5353a6850d642b0d61b2f2d99109127a2aaee1d269b74
static/js/2.c08ec4d2.chunk.js.map,1597027317058,e82270a0fb98533b5cf3b4531156bbc101f6abf4fdf8e57dd050df918cf76d70
asset-manifest.json,1597382621078,a3671cef9d606e319cb4e8d4d2bf5e0b02153ac120b353c7f38bdfdbf4de3a0a
index.html,1597382621078,5a334299414f2a46a953b82d9ca9a2c9b77a07fc9ae4bc8cff349a895b22bbd2
precache-manifest.25824fc2f1a3c85f4a5f1fd913a528f1.js,1597382621078,a82ce8b4cf8a07ae55265cc0e51d1c70aa92896c22fd8835e6b0ca0c7c3d8329
service-worker.js,1597382621078,665de0fc553b3e5cf6a6b9c52fb8ecece336d27a173dc2c6ac9898a6ac1e9592
static/css/main.696b2acb.chunk.css,1597382621083,b539b06a59833e7cae5769f8406e32fc5ba94c86fc21c8bfec50e2b5531ee5aa
static/css/main.696b2acb.chunk.css.map,1597382621083,0fda4b309b280a2e1f6f871ff6935c14a8001b945e2ba744cf9544722cedf81c
static/js/2.37ad8844.chunk.js.LICENSE.txt,1597382621083,6e35c90a08889838097fac293adfe2716dd320ffd6ce18953bfbbb9f80852f3f
static/js/main.a0fd3508.chunk.js,1597382621082,c03462bd9601e577b4a01a4858756cb4a6e895a7d704a277bdaeed75ec8c0f53
static/js/runtime-main.d4304d1c.js,1597382621083,26f0303296f02225d1157ea161c2a2b0288df5281d303c1030b6945240554cdf
static/js/runtime-main.d4304d1c.js.map,1597382621083,1cc22d56b1fa9e0824e48491e56c4c1b83632c0aea3b4a1d9f5d497b50f929f4
static/js/main.a0fd3508.chunk.js.map,1597382621083,694ed326e1b3944b20a50900bd4d73aec5fb85c998cd79e86af374e6741dee30
static/media/c3f2.13a6e59e.png,1597382621080,5bc58b9030fc4ea7b59ea279f55ec5b7728f06d130fb03e7052ef9a9ddad0bf0
static/js/2.37ad8844.chunk.js,1597382621083,b3595cf6730d75bec306cadb66d5022a5665ee4d804250f935dd331cc173cee8
static/js/2.37ad8844.chunk.js.map,1597382621084,e0e48089c356d9bfdd09509e339bd8544835bbc6e28b66d2abc7123151e2fa44
2 changes: 2 additions & 0 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState, useMemo } from "react";
import "./App.css";
import Countries from "./Countries";
import Navbar from "./Navbar";
import Footer from "./Footer";
import { CountryContext } from "./CountryContext";

function App() {
Expand All @@ -17,6 +18,7 @@ function App() {
<Navbar />
<Countries />
</CountryContext.Provider>
<Footer />
</div>
);
}
Expand Down
21 changes: 19 additions & 2 deletions src/Countries.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
.countries {
display: flex;
flex-wrap: wrap;
margin-top: 80px;
/* flex-wrap: wrap; */
/* margin-top: 80px; */
/* margin-left: 5px; */
/* margin-bottom: 20px; */

background-image: linear-gradient(
180deg,
Expand All @@ -11,3 +12,19 @@
rgb(110, 17, 17)
);
}

.countries__list {
display: flex;
flex-wrap: wrap;
margin-top: 65px;
}

.countries__norowsfound {
margin-top: 80px;
margin-bottom: 20px;
margin-left: 10px;
}

.countries__nomatchtext {
color: rgb(99, 14, 14);
}
54 changes: 27 additions & 27 deletions src/Countries.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,38 @@ import "./Countries.css";
import Country from "./Country";
import { CountryContext } from "./CountryContext";

const base_url = "https://restcountries.eu/rest/v2/all";
//const country_search_url = "https://restcountries.eu/rest/v2/name/ia";

function Countries() {
const { countrydata, setCountrydata } = useContext(CountryContext);

//When the component load make the API call to get the data and store it in the context
useEffect(() => {
getAllCountries();
}, []);

//Make API call and and store it in the context
const getAllCountries = async () => {
const response = await fetch(base_url);
const data = await response.json();

setCountrydata(data);
};

return (
<div className="countries">
{/* <ul>{countryList.map(x => <li>{x.name} - {x.capital} - {x.currencies[0].name}</li>)}</ul> */}

{countrydata.map((country) => (
<Country
key={country.alpha2Code}
name={country.name}
flag={country.flag}
capital={country.capital}
currency={country.currencies[0].name}
/>
))}
{countrydata.length === 0 ? (
<div className="countries__norowsfound">
<h2 className="countries__nomatchtext">
Couldn't find countries matching your search. Please try new search.
</h2>
</div>
) : (
//Test mode
// <ul>
// {countrydata.map((x) => (
// <li>
// {x.name} - {x.capital}- {x.currencies[0].name}
// </li>
// ))}
// </ul>
<div className="countries__list">
{countrydata.map((country) => (
<Country
key={country.alpha2Code}
name={country.name}
flag={country.flag}
capital={country.capital}
currency={country.currencies[0].name}
/>
))}
</div>
)}
</div>
);
}
Expand Down
32 changes: 32 additions & 0 deletions src/Footer.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.footer {
/* position: fixed; */
display: flex;
/* justify-content: space-between; */
align-items: center;
background-color: rgb(0, 8, 59);
/* z-index: 99; */
height: 40px;
}

.footer__texts {
align-items: center;
display: flex;
/* width: 50%; */
margin-left: 10px;
}

.footer__texts > h1,
a {
font-size: 10px;
font-weight: 500;
margin-left: 5px;
color: rgba(240, 240, 240);
}

.footer_social {
display: flex;
width: 100px;
color: white !important;
justify-content: space-evenly;
margin-right: 20px;
}
40 changes: 40 additions & 0 deletions src/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from "react";
import "./Footer.css";
import TwitterIcon from "@material-ui/icons/Twitter";
import GitHubIcon from "@material-ui/icons/GitHub";
import LinkedInIcon from "@material-ui/icons/LinkedIn";

function Footer() {
return (
<div className="footer">
<div className="footer__texts">
<h1 className="footer__appname">
Country Capital Currency Flag (C3F) ||
</h1>
<a
href={"https://www.linkedin.com/in/swarnendu-das-41479531/"}
target="_blank"
>
© Swarnendu Das ||
</a>
<h1 className="footer__disclaimer">Disclaimer ||</h1>
<h1 className="footer__privacypolicy">Privacy Policy ||</h1>
<h1 className="footer__sitemap">Sitemap ||</h1>
</div>
<div className="footer_social">
<a
href={"https://www.linkedin.com/in/swarnendu-das-41479531/"}
target="_blank"
>
<LinkedInIcon fontSize="small" />
</a>
<GitHubIcon fontSize="small" />
<a href={"https://twitter.com/SwarnenduDasgm1"} target="_blank">
<TwitterIcon fontSize="small" />
</a>
</div>
</div>
);
}

export default Footer;
2 changes: 1 addition & 1 deletion src/Navbar.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

.nav__black {
background-color: rgb(27, 27, 27);
/* opacity: 85%; */
opacity: 85%;
}

.nav__logo {
Expand Down
46 changes: 38 additions & 8 deletions src/Navbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,15 @@ import { CountryContext } from "./CountryContext";
import Badge from "@material-ui/core/Badge";
import PublicIcon from "@material-ui/icons/Public";

const base_url = "https://restcountries.eu/rest/v2/all";
const base_url = "https://restcountries.eu/rest/v2/all/";
const url_country = "https://restcountries.eu/rest/v2/name/";
//const country_search_url = "https://restcountries.eu/rest/v2/name/uni";

function Navbar() {
const [show, handleShow] = useState(false);
const [input, setInput] = useState("");
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);

const { countrydata, setCountrydata } = useContext(CountryContext);

Expand All @@ -33,20 +36,47 @@ function Navbar() {
//REST call to get the list of countries based on the search string.
//If search strin is blank then retrieve all the countries.
//Also set the recent search data to the context
async function searchCountry() {
function searchCountry() {
let url = "";
if (input === "") {
url = base_url;
} else {
url = `${url_country}${input}`;
}

//console.log("Nav --> url:", url);
const response = await fetch(url);
const data = await response.json();
//console.table(data);
console.log(data);
setCountrydata(data);
// Exapmle of Async-Await call
// console.log("Nav --> url:", url);
// const response = await fetch(url);
// const data = await response.json();
// console.table(data);
// console.log(data);
// setCountrydata(data);

fetch(url)
.then((response) => response.json())
.then(
(data) => {
setIsLoaded(true);
console.log("Navbar --> data: ", data);
if (!data.length) {
console.log("Navbar --> fetch. No data found");
setCountrydata([]);
} else {
setCountrydata(data);
}
},
(error) => {
console.log("Navbar --> error: ", error);
setIsLoaded(true);
setError(error);
}
)
.catch((error) => {
console.error(
"There has been a problem with your fetch operation:",
error
);
});
}

return (
Expand Down
64 changes: 14 additions & 50 deletions src/requestapi.js
Original file line number Diff line number Diff line change
@@ -1,52 +1,16 @@
import React, { useEffect, useState } from "react";
/**
* Rest API to fetch data
*
*/

const base_url = "https://restcountries.eu/rest/v2/";
const url_all = "https://restcountries.eu/rest/v2/all";
const url_country = "https://restcountries.eu/rest/v2/name/ia";
import { useState } from "react";

function Requestapi() {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);

// Note: the empty deps array [] means
// this useEffect will run once
// similar to componentDidMount()
useEffect(() => {
fetch(url_country)
.then((res) => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result);
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
setIsLoaded(true);
setError(error);
}
);
}, []);

return items;
/*
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<div>{console.log("RequestApi --> ", { items })}</div>
// <ul>
// {items.map((item) => (
// <li key={item.name}>{item.name}</li>
// ))}
// </ul>
);
}
*/
}

export default Requestapi;
export const requestapi = (url) => {
const [apiReturn, setApiReturn] = useState({ data: null, loading: true });
fetch(url)
.then((response) => response.json())
.then((y) => {
setApiReturn({ data: y, loading: false });
});
return apiReturn;
};

0 comments on commit 6a44fed

Please sign in to comment.