| 1 |
- {"version":3,"sources":["components/Header/SearchBar/SearchBar.module.css","components/SortBar/SortBar.module.css","components/Header/Logo/Logo.module.css","components/CountriesList/DetailCountry/DetailCountry.module.css","App.module.css","components/Header/Header.module.css","data/api.js","img/heart.svg","components/CountriesList/DetailCountry/DetailCountry.tsx","components/CountriesList/CountriesList.tsx","img/logo.png","components/Header/Logo/Logo.tsx","img/magnifier.svg","components/Header/SearchBar/SearchBar.tsx","components/Header/Header.tsx","components/SortBar/SortBar.tsx","App.tsx","index.tsx","components/CountriesList/CountriesList.module.css"],"names":["module","exports","axios","require","defaults","baseURL","getAllCountries","a","get","Countries","data","DetailCountry","country","handleCloseDetail","Country","TotalConfirmed","TotalDeaths","TotalRecovered","className","s","detailWrapper","id","onClick","detailNotification","detailNotification__title","detailNotification__row","src","heartSvg","width","height","alt","detailNotification__row__title","detailNotification__row__amount","detailNotification__btn","CountriesList","filter","countries","useState","isOpen","setIsOpen","setCountry","countriesList","e","tagName","target","dataset","length","toLowerCase","includes","map","index","countriesList_item","data-id","String","countriesList_item_number","countriesList_item_country","countriesList_item_confirmed","Logo","logoWrapper","logoImg","logoStatistic","SearchBar","handleFilter","searchBar","onChange","type","searchBar__input","placeholder","searchBar__btn","magnifierImg","Header","headerWrapper","SortBar","handleSort","sortBarWrapper","sortBarWrapper__btn","data-sort","App","setCountries","setFilter","useEffect","appWrapper","preventDefault","value","sortBy","sort","prevState","b","ReactDOM","render","StrictMode","fallback","position","autoClose","hideProgressBar","newestOnTop","closeOnClick","rtl","pauseOnFocusLoss","draggable","pauseOnHover","document","getElementById"],"mappings":"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","file":"static/js/main.320be3a1.chunk.js","sourcesContent":["// extracted by mini-css-extract-plugin\nmodule.exports = {\"searchBar\":\"SearchBar_searchBar__3KDGD\",\"searchBar__input\":\"SearchBar_searchBar__input__rrhpX\",\"searchBar__btn\":\"SearchBar_searchBar__btn__22GvM\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"sortBarWrapper\":\"SortBar_sortBarWrapper__3GCSo\",\"sortBarWrapper__btn\":\"SortBar_sortBarWrapper__btn__1qrEt\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"logoWrapper\":\"Logo_logoWrapper__3bbyN\",\"logoStatistic\":\"Logo_logoStatistic__2PMQp\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"detailWrapper\":\"DetailCountry_detailWrapper__2urBV\",\"detailNotification\":\"DetailCountry_detailNotification__biCLv\",\"detailNotification__title\":\"DetailCountry_detailNotification__title__1UpBo\",\"detailNotification__row\":\"DetailCountry_detailNotification__row__SWHtT\",\"detailNotification__row__title\":\"DetailCountry_detailNotification__row__title__2K3LE\",\"detailNotification__row__amount\":\"DetailCountry_detailNotification__row__amount__3ThJh\",\"detailNotification__btn\":\"DetailCountry_detailNotification__btn__QWE5C\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"appWrapper\":\"App_appWrapper__39w-7\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"headerWrapper\":\"Header_headerWrapper__2FgT9\"};","const axios = require('axios');\naxios.defaults.baseURL = 'https://api.covid19api.com/';\n\nconst getAllCountries = async () => {\n const {\n data: { Countries },\n } = await axios.get(`/summary`);\n return Countries;\n};\n\nexport { getAllCountries };\n","export default __webpack_public_path__ + \"static/media/heart.8ddee724.svg\";","import s from './DetailCountry.module.css';\nimport heartSvg from '../../../img/heart.svg';\n\nconst DetailCountry = ({\n country,\n handleCloseDetail,\n}: {\n country: any;\n handleCloseDetail: any;\n}) => {\n const { Country, TotalConfirmed, TotalDeaths, TotalRecovered } = country;\n\n return (\n <div className={s.detailWrapper} id=\"close\" onClick={handleCloseDetail}>\n <div className={s.detailNotification}>\n <h3 className={s.detailNotification__title}>{Country}</h3>\n <div className={s.detailNotification__row}>\n <img src={heartSvg} width=\"30px\" height=\"30px\" alt=\"heart\" />\n <h4 className={s.detailNotification__row__title}>Total Confirmed</h4>\n <h4 className={s.detailNotification__row__amount}>\n {TotalConfirmed}\n </h4>\n </div>\n <div className={s.detailNotification__row}>\n <img src={heartSvg} width=\"30px\" height=\"30px\" alt=\"death\" />\n <h4 className={s.detailNotification__row__title}>Total Deaths</h4>\n <h4 className={s.detailNotification__row__amount}>{TotalDeaths}</h4>\n </div>\n <div className={s.detailNotification__row}>\n <img src={heartSvg} width=\"30px\" height=\"30px\" alt=\"recovered\" />\n <h4 className={s.detailNotification__row__title}>Total Recovered</h4>\n <h4 className={s.detailNotification__row__amount}>\n {TotalRecovered}\n </h4>\n </div>\n <button className={s.detailNotification__btn} id=\"close\">\n ok\n </button>\n </div>\n </div>\n );\n};\n\nexport default DetailCountry;\n","import { useState } from 'react';\n\nimport s from './CountriesList.module.css';\nimport DetailCountry from './DetailCountry/DetailCountry';\n\ninterface ICountry {\n Country: string;\n TotalConfirmed: number;\n}\n\nconst CountriesList = ({\n filter,\n countries,\n}: {\n filter: string;\n countries: any;\n}) => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [country, setCountry] = useState<object>({});\n\n const handleList = (e: any) => {\n const tagName = e.target.tagName;\n if (tagName === 'H4' || tagName === 'LI') {\n const id = e.target.dataset.id;\n setCountry(countries[id]);\n setIsOpen(true);\n }\n };\n\n const handleCloseDetail = (e: any) => {\n const id = e.target.id;\n if (id === 'close') {\n setIsOpen(false);\n }\n };\n\n return (\n <>\n <ul className={s.countriesList} onClick={handleList}>\n {countries.length > 0 &&\n countries\n .filter((country: any) =>\n country.Country.toLowerCase().includes(filter.toLowerCase()),\n )\n .map((country: ICountry, index: number) => {\n const { Country, TotalConfirmed } = country;\n return (\n <li\n className={s.countriesList_item}\n key={index}\n data-id={String(index)}\n >\n <h4\n className={s.countriesList_item_number}\n data-id={String(index)}\n >\n {index + 1}\n </h4>\n <h4\n className={s.countriesList_item_country}\n data-id={String(index)}\n >\n {Country}\n </h4>\n <h4\n className={s.countriesList_item_confirmed}\n data-id={String(index)}\n >\n {TotalConfirmed}\n </h4>\n </li>\n );\n })}\n </ul>\n {isOpen && (\n <DetailCountry\n handleCloseDetail={handleCloseDetail}\n country={country}\n />\n )}\n </>\n );\n};\n\nexport default CountriesList;\n","export default __webpack_public_path__ + \"static/media/logo.1993b40e.png\";","import s from './Logo.module.css';\nimport logoImg from '../../../img/logo.png';\n\nconst Logo = () => {\n return (\n <div className={s.logoWrapper}>\n <img src={logoImg} alt=\"logo\" width=\"200px\" height=\"200px\" />\n <h1 className={s.logoStatistic}>statistic</h1>\n </div>\n );\n};\n\nexport default Logo;\n","export default __webpack_public_path__ + \"static/media/magnifier.acbfeeca.svg\";","import s from './SearchBar.module.css';\nimport magnifierImg from '../../../img/magnifier.svg';\n\nconst SearchBar = ({ handleFilter }: { handleFilter: any }) => {\n return (\n <form className={s.searchBar} onChange={handleFilter}>\n <input\n type=\"text\"\n className={s.searchBar__input}\n placeholder=\"Write country name...\"\n ></input>\n <button className={s.searchBar__btn} type=\"submit\">\n <img src={magnifierImg} alt=\"magnifier\" width=\"30px\" height=\"30px\" />\n </button>\n </form>\n );\n};\n\nexport default SearchBar;\n","import s from './Header.module.css';\nimport Logo from './Logo/Logo';\nimport SearchBar from './SearchBar/SearchBar';\n\nconst Header = ({ handleFilter }: { handleFilter: any }) => {\n return (\n <div className={s.headerWrapper}>\n <Logo />\n <SearchBar handleFilter={handleFilter} />\n </div>\n );\n};\n\nexport default Header;\n","import s from './SortBar.module.css';\n\nconst SortBar = ({ handleSort }: { handleSort: any }) => {\n return (\n <div className={s.sortBarWrapper} onClick={handleSort}>\n <button\n className={s.sortBarWrapper__btn}\n data-sort=\"Country\"\n type=\"button\"\n >\n Sort By Country Name\n </button>\n <button\n className={s.sortBarWrapper__btn}\n data-sort=\"TotalConfirmed\"\n type=\"button\"\n >\n Sort By TotalConfirmed\n </button>\n </div>\n );\n};\n\nexport default SortBar;\n","import { useState, useEffect } from 'react';\n\nimport s from './App.module.css';\nimport { getAllCountries } from './data/api';\nimport CountriesList from './components/CountriesList/CountriesList';\nimport Header from './components/Header/Header';\nimport SortBar from './components/SortBar/SortBar';\n\nfunction App() {\n const [countries, setCountries] = useState<any>([]);\n const [filter, setFilter] = useState<string>('');\n\n useEffect(() => {\n (async function getCountries() {\n const data = await getAllCountries();\n setCountries(data);\n })();\n }, []);\n\n const handleFilter = (e: any) => {\n e.preventDefault();\n const value = e.target.value;\n setFilter(value);\n };\n\n const handleSort = (e: any) => {\n const sortBy = e.target.dataset.sort;\n if (sortBy) {\n setCountries((prevState: any) => [\n ...prevState.sort(function (a: any, b: any) {\n if (a[sortBy] < b[sortBy]) {\n return -1;\n } else if (a[sortBy] > b[sortBy]) {\n return 1;\n }\n return 0;\n }),\n ]);\n }\n };\n\n return (\n <div className={s.appWrapper}>\n <Header handleFilter={handleFilter} />\n <SortBar handleSort={handleSort} />\n <CountriesList filter={filter} countries={countries} />\n </div>\n );\n}\n\nexport default App;\n","import React, { Suspense } from 'react';\nimport ReactDOM from 'react-dom';\nimport 'react-toastify/dist/ReactToastify.css';\nimport { ToastContainer } from 'react-toastify';\nimport 'modern-normalize/modern-normalize.css';\nimport './index.css';\nimport App from './App';\n\nReactDOM.render(\n <React.StrictMode>\n <Suspense fallback={null}>\n <App />\n <ToastContainer\n position=\"top-right\"\n autoClose={3000}\n hideProgressBar={false}\n newestOnTop={false}\n closeOnClick\n rtl={false}\n pauseOnFocusLoss\n draggable\n pauseOnHover\n />\n </Suspense>\n </React.StrictMode>,\n document.getElementById('root'),\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"countriesList\":\"CountriesList_countriesList__3VGvd\",\"countriesList_item\":\"CountriesList_countriesList_item__3WeKy\",\"countriesList_item_number\":\"CountriesList_countriesList_item_number__10WKl\",\"countriesList_item_country\":\"CountriesList_countriesList_item_country__1prkU\",\"countriesList_item_confirmed\":\"CountriesList_countriesList_item_confirmed__3t-yL\"};"],"sourceRoot":""}
|
