IT-forward · bekji · Mar 28, 2021 · Apr 1, 2021 · Apr 6, 2021 · Apr 7, 2021
diff --git a/.gitignore b/.gitignore
@@ -12,4 +12,4 @@ yarn-debug.log*
 yarn-error.log*
 /.changelog
 .npm/
-yarn.lock
+
diff --git a/README.md b/README.md
@@ -1,22 +1,18 @@
-# 22-28 Mart hafta uchun vazifa
+22-28 Mart hafta uchun vazifa
+Ushbu reponi kompyuteringizga clone qilib oling.
+O'z ismingiz bilan yangi branch oching.
+Repozitory ichida yangi ismingiz bilan react app yarating.
+Github'ga push qilib PR yaratish esingizdan chiqmasin.
+Loyihaga talablar:
+1. Min:
 
-1. Ushbu reponi kompyuteringizga clone qilib oling.
-2. O'z ismingiz bilan yangi `branch` oching.
-3. Repozitory ichida yangi ismingiz bilan react app yarating.
-4. Github'ga push qilib PR yaratish esingizdan chiqmasin.
+Boshqalarning qilgan ishiga (video yoki maqolalarga) qaramasdan React bilan mustaqil kamida 1 ta app yoki o’yin tayyorlash.
+React class componentlardanmas, Function componentlar bilan kod yozishi va state o’rniga hook’larni ishlatishi: https://reactjs.org/docs/hooks-intro.html
+Loyiha kamida 5 ta component’dan iborat bo’lishi.
+Bootstrap CSS framework ishlatish.
+Har bir proyekt Github’ga yuklab borilgan bo’lishi va README yozilgan bo'lishi.
+2. Max:
 
-### Loyihaga talablar:
-
-**1. Min:**
-
-- Boshqalarning qilgan ishiga (video yoki maqolalarga) qaramasdan React bilan mustaqil kamida 1 ta app yoki o’yin tayyorlash.
-- React class componentlardanmas, Function componentlar bilan kod yozishi va state o’rniga hook’larni ishlatishi: https://reactjs.org/docs/hooks-intro.html
-- Loyiha kamida 5 ta component’dan iborat bo’lishi.
-- Bootstrap CSS framework ishlatish.
-- Har bir proyekt Github’ga yuklab borilgan bo’lishi va README yozilgan bo'lishi.
-
-**2. Max:**
-
-- API servislardan foydalanish: https://github.com/public-apis/public-apis
-- Test yozish: https://reactjs.org/docs/testing.html
-- PropTypes ishlatish: https://reactjs.org/docs/typechecking-with-proptypes.html
+API servislardan foydalanish: https://github.com/public-apis/public-apis
+Test yozish: https://reactjs.org/docs/testing.html
+PropTypes ishlatish: https://reactjs.org/docs/typechecking-with-proptypes.html
diff --git a/oybek/.gitignore b/oybek/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/oybek/README.md b/oybek/README.md
@@ -0,0 +1,9 @@
+Ushbu react-app yordamida covid-19 statistikasini olishimiz mumkin.
+
+<!-- bootstrapni o'rnatish uchun -->
+
+yarn install react-bootstrap bootstrap
+
+<!-- test qilish uchun -->
+
+yarn test
diff --git a/oybek/package.json b/oybek/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "oybek",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^4.6.0",
+    "react": "^17.0.2",
+    "react-bootstrap": "^1.5.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/oybek/public/index.html b/oybek/public/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+
+  <title>Covid-19 statistics</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/oybek/src/App.css b/oybek/src/App.css
@@ -0,0 +1,17 @@
+header {
+  background-color: black;
+  color: white;
+  padding: 15px;
+}
+
+
+.cardImg {
+  height: 300px;
+}
+
+@media screen and (max-width: 1100px) {
+
+  .cardImg {
+    height: 200px;
+  }
+}
diff --git a/oybek/src/App.js b/oybek/src/App.js
@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import CardTop from './components/CardTop';
+import List from './components/List';
+import Header from './components/Header';
+import Search from './components/Search';
+import ListHeader from './components/ListHeader';
+
+
+
+function App() {
+
+  const [results, setResults] = useState([]);
+
+  const url = 'https://corona.lmao.ninja/v2/countries/';
+
+  useEffect(() => {
+    async function fetchData() {
+      const data = await fetch(url).then(res => res.json());
+      setResults(data);
+    }
+    fetchData();
+
+  }, []);
+
+  const [searchCountry, setSearchCountry] = useState('');
+
+  const filterCountry = results.filter(item => {
+    return searchCountry !== "" ? item.country.toLowerCase().includes(searchCountry.toLowerCase()) : item;
+  });
+
+  return (
+    <div className="App">
+      <Header />
+      <CardTop />
+      <ListHeader />
+      <Search onChange={e => setSearchCountry(e.target.value)} />
+      <List results={filterCountry} />
+    </div>
+  );
+}
+
+export default App;
diff --git a/oybek/src/App.test.js b/oybek/src/App.test.js
@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+// test('renders learn react link', () => {
+//   render(<App />);
+//   const linkElement = screen.getByText(/learn react/i);
+//   expect(linkElement).toBeInTheDocument();
+// });
+
+it("renders without crashing", () => {
+  render(<App />);
+});
+
+it("renders App component with headers and search", () => {
+  render(<App />);
+
+  expect(screen.getByText('COVID-19 Statistics')).toBeInTheDocument();
+
+  expect(screen.getByPlaceholderText('Search a country')).toBeInTheDocument();
+
+  expect(screen.getByText('Statistics by country')).toBeInTheDocument();
+}); 
+
diff --git a/oybek/src/components/CardTop.js b/oybek/src/components/CardTop.js
@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import Card from 'react-bootstrap/Card';
+import CardDeck from 'react-bootstrap/CardDeck';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const CardTop = () => {
+    const url = "https://corona.lmao.ninja/v2/all";
+
+    const [global, setGlobal] = useState([]);
+
+    useEffect(() => {
+        async function fetchData() {
+            const data = await fetch(url).then(res => res.json());
+            setGlobal(data);
+        }
+        fetchData();
+
+    }, []);
+
+    const date = new Date(parseInt(global.updated));
+    const lastUpdated = date.toString();
+
+
+
+    return (
+        <CardDeck style={{ margin: 0 }} >
+            <Card bg='secondary' text={'white'} className='text-center' style={{ margin: '10px' }}>
+                <Card.Body>
+                    <Card.Title>Cases</Card.Title>
+                    <Card.Text data-testid="cases-n">
+                        {global.cases}
+                    </Card.Text>
+                </Card.Body>
+                <Card.Footer>
+                    <small>Last updated {lastUpdated}</small>
+                </Card.Footer>
+            </Card>
+            <Card bg="danger" text={'white'} className='text-center' style={{ margin: '10px' }}>
+                <Card.Body>
+                    <Card.Title>Deaths</Card.Title>
+                    <Card.Text data-testid="deaths-n">
+                        {global.deaths}
+                    </Card.Text>
+                </Card.Body>
+                <Card.Footer>
+                    <small>Last updated {lastUpdated}</small>
+                </Card.Footer>
+            </Card>
+            <Card bg='success' text={'white'} className='text-center' style={{ margin: '10px' }}>
+                <Card.Body>
+                    <Card.Title>Recovered</Card.Title>
+                    <Card.Text data-testid="recovered-n">
+                        {global.recovered}
+                    </Card.Text>
+                </Card.Body>
+                <Card.Footer>
+                    <small>Last updated {lastUpdated}</small>
+                </Card.Footer>
+            </Card>
+        </CardDeck >
+    )
+}
+
+export default CardTop;
diff --git a/oybek/src/components/CardTop.test.js b/oybek/src/components/CardTop.test.js
@@ -0,0 +1,33 @@
+import { render, screen, act } from '@testing-library/react';
+
+import CardTop from './CardTop';
+
+describe("CardTop", () => {
+    test('renders CardTop component correctly', () => {
+        render(<CardTop />);
+
+        expect(screen.getByText('Cases')).toBeInTheDocument();
+
+        expect(screen.getByText('Deaths')).toBeInTheDocument();
+
+        expect(screen.getByText('Recovered')).toBeInTheDocument();
+    })
+});
+
+describe("Fetch CardTop", () => {
+    test('fetch works', async () => {
+        global.fetch = jest.fn(() => Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({
+                cases: 141408657,
+                deaths: 3026367,
+                recovered: 120222502
+            }),
+        }));
+
+        await act(async () => render(<CardTop />));
+        expect(screen.getByTestId('cases-n').textContent).toBe('141408657');
+        expect(screen.getByTestId('deaths-n').textContent).toBe('3026367');
+        expect(screen.getByTestId('recovered-n').textContent).toBe('120222502');
+    });
+});
diff --git a/oybek/src/components/Header.js b/oybek/src/components/Header.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import '../App.css';
+
+const Header = ({ title }) => {
+    return (
+        <header className='text-center'>
+            <h1>{title}</h1>
+        </header>
+    )
+}
+
+Header.defaultProps = {
+    title: 'COVID-19 Statistics',
+}
+
+Header.propTypes = {
+    title: PropTypes.string.isRequired,
+}
+
+export default Header;
diff --git a/oybek/src/components/List.js b/oybek/src/components/List.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Card } from 'react-bootstrap';
+import CardColumns from 'react-bootstrap/CardColumns';
+import '../App.css';
+import PropTypes from 'prop-types';
+
+
+const List = ({ results }) => {
+
+    return (
+        <CardColumns style={{ padding: 5 }} >
+            {results.map((data, i) => (
+                <Card
+                    key={i}
+                    bg='light'
+                    text='dark'
+                    className='text-center'
+                >
+                    <Card.Img className="cardImg" variant='top' src={data.countryInfo.flag} />
+                    <Card.Body>
+                        <Card.Title>{data.country}</Card.Title>
+                        <Card.Text>Cases: {data.cases}</Card.Text>
+                        <Card.Text>Deaths: {data.deaths}</Card.Text>
+                        <Card.Text>Recovered: {data.recovered}</Card.Text>
+                        <Card.Text>Today's cases: {data.todayCases}</Card.Text>
+                        <Card.Text>Today's deaths: {data.todayDeaths}</Card.Text>
+                        <Card.Text>Active: {data.active}</Card.Text>
+                        <Card.Text>Critical: {data.critical}</Card.Text>
+                    </Card.Body>
+                </Card >
+            ))}
+        </CardColumns>
+    )
+}
+
+List.propTypes = {
+    results: PropTypes.array.isRequired,
+}
+
+export default List;