From a56468315f9758f20ee88927bace5bebffab0840 Mon Sep 17 00:00:00 2001 From: bartrabolsky Date: Sun, 5 Jan 2025 19:03:58 +0200 Subject: [PATCH] bar trabolsky countries react --- index.html | 25 ++++---- package-lock.json | 91 +++++++++++++++++++++++++++++ package.json | 3 +- src/App.jsx | 4 +- src/assets/css/common.css | 9 ++- src/assets/css/main.css | 2 +- src/assets/css/modal.css | 31 ++++++++++ src/components/Country.jsx | 19 +++++- src/components/Modal.jsx | 17 ++++++ src/pages/Home.jsx | 117 +++++++++++++++++++++++++++++++++++-- 10 files changed, 294 insertions(+), 24 deletions(-) create mode 100644 src/assets/css/modal.css create mode 100644 src/components/Modal.jsx diff --git a/index.html b/index.html index 0c589ec..2d45a96 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,16 @@ - - - - - Vite + React - - -
- - - + + + + + + Vite + React + + + +
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1b387cb..643079c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "countries-react", "version": "0.0.0", "dependencies": { + "axios": "^1.7.9", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -1870,6 +1871,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -1886,6 +1892,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.7.9", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz", + "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -2085,6 +2101,17 @@ "dev": true, "license": "MIT" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -2236,6 +2263,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/detect-libc": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", @@ -2810,6 +2845,25 @@ "dev": true, "license": "ISC" }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2820,6 +2874,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz", + "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -3718,6 +3785,25 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -4058,6 +4144,11 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index 0b5022f..651bc47 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.7.9", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -26,4 +27,4 @@ "sass": "^1.83.0", "vite": "^6.0.3" } -} +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 2a88e41..8db83a5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,9 +6,9 @@ import Home from "./pages/Home"; function App() { return ( - <> +
- +
); } diff --git a/src/assets/css/common.css b/src/assets/css/common.css index 7d63db5..5991b3d 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -7,6 +7,13 @@ outline: none; } +.container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + html { font-size: 100%; scroll-behavior: smooth; @@ -306,4 +313,4 @@ body.dark-theme .country-info li { body.dark-theme .country-info strong { color: white; -} +} \ No newline at end of file diff --git a/src/assets/css/main.css b/src/assets/css/main.css index f51ac8b..42b5501 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -222,4 +222,4 @@ font-size: 16px; text-transform: capitalize; margin-bottom: 15px; -} +} \ No newline at end of file diff --git a/src/assets/css/modal.css b/src/assets/css/modal.css new file mode 100644 index 0000000..d47129a --- /dev/null +++ b/src/assets/css/modal.css @@ -0,0 +1,31 @@ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal-container { + background: white; + padding: 20px; + border-radius: 8px; + width: 90%; + max-width: 500px; + position: relative; +} + +.modal-close-button { + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/Country.jsx b/src/components/Country.jsx index 177580c..9724890 100644 --- a/src/components/Country.jsx +++ b/src/components/Country.jsx @@ -1,9 +1,22 @@ import React from 'react' +import "../assets/css/main.css" -const Country = () => { + +const Country = ({ country }) => { return ( - // TODO: Country component -
Country
+
+
+ {`${country.name} +
+
+

{country.name}

+
    +
  • Population: {country.population}
    • +
  • Region: {country.region}
    • +
  • Capital: {country.capital}
    • +
+
+
) } diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx new file mode 100644 index 0000000..3aa05c7 --- /dev/null +++ b/src/components/Modal.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import "../assets/css/modal.css"; + +const Modal = ({ children, onClose }) => { + return ( +
+
e.stopPropagation()}> + + {children} +
+
+ ); +}; + +export default Modal; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 507e0c5..e2ec05b 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,11 +1,118 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; +import "../assets/css/common.css"; +import axios from "axios"; +import Country from "../components/Country"; +import Modal from "../components/Modal"; const Home = () => { + const [search, setSearch] = useState(''); + const [countries, setCountries] = useState([]); + const [filteredCountries, setFilteredCountries] = useState([]); + const [selectedCountry, setSelectedCountry] = useState(null); + const [isModalOpen, setIsModalOpen] = useState(false); + + useEffect(() => { + // Fetch data from API + const fetchCountries = async () => { + try { + const response = await axios.get("https://restcountries.com/v3.1/all"); + console.log("Response data:", response.data); // Debugging API response + const formattedData = response.data.map((country) => ({ + name: country.name.common, + flag: country.flags.png, + population: country.population, + region: country.region, + capital: country.capital ? country.capital[0] : "N/A", + subregion: country.subregion, + languages: country.languages ? Object.values(country.languages).join(", ") : "N/A", + currencies: country.currencies ? Object.values(country.currencies).map(c => c.name).join(", ") : "N/A", + })); + setCountries(formattedData); + setFilteredCountries(formattedData); + console.log("Formatted data:", formattedData); // Debugging formatted data + } catch (error) { + console.error("Error fetching countries data:", error); + } + }; + + fetchCountries(); + }, []); + + useEffect(() => { + // Filter countries based on search input + const filtered = countries.filter((country) => + country.name.toLowerCase().includes(search.toLowerCase()) + ); + setFilteredCountries(filtered); + console.log("Filtered countries:", filtered); // Debugging filtered data + }, [search, countries]); + + const handleCountryClick = (country) => { + setSelectedCountry(country); + setIsModalOpen(true); + }; + + const closeModal = () => { + setIsModalOpen(false); + setSelectedCountry(null); + }; + return ( - // TODO: Home page - // Render Country component (components/Country.jsx) for each country - // Take data from (assets/CountriesData.json) -
Home
+
+ +
+
+
+

Where in the world?

+
+ +
+
+ +
+
+
+ + setSearch(e.target.value)} + /> +
+
+
+
+
+
+ {filteredCountries.map((country, index) => ( +
handleCountryClick(country)}> + +
+ ))} +
+
+
+ {isModalOpen && selectedCountry && ( + +
+

{selectedCountry.name}

+ {`${selectedCountry.name} +

Population: {selectedCountry.population}

+

Region: {selectedCountry.region}

+

Subregion: {selectedCountry.subregion}

+

Capital: {selectedCountry.capital}

+

Languages: {selectedCountry.languages}

+

Currencies: {selectedCountry.currencies}

+
+ + )} +
); };