First test

Aishanipach · Jan 5, 2022 · fe379c7 · fe379c7
1 parent 5fb8a15
commit fe379c7
Show file tree

Hide file tree

Showing 15 changed files with 566 additions and 57 deletions.
diff --git a/chart.JPG b/chart.JPG
diff --git a/chart1.JPG b/chart1.JPG
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,10 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/material": "^5.2.7",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "chart.js": "^3.7.0",
     "react": "^17.0.2",
+    "react-chartjs-2": "^4.0.0",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.2"

diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,36 @@
-.App {
-  text-align: center;
+* {
+  margin: 0;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+body {
+  background-color: rgb(199, 204, 209);
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.Header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.appStats {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  justify-content: space-between;
 }
 
-.App-link {
-  color: #61dafb;
+.containerLeft {
+  flex: 0.9;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
+.App {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  padding: 30px;
+}
+
+@media (max-width: 990px) {
+  .App {
+    display: flex;
+    flex-direction: column;
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,103 @@
-import logo from './logo.svg';
-import './App.css';
-
+// import logo from './logo.svg';
+import "./App.css";
+import React, { useState, useEffect } from "react";
+import { Card, MenuItem, FormControl, Select, CardContent } from "@mui/material";
+import Infobox from "./Info/Infobox";
+import Mapbox from "./Map/Mapbox";
+import Table from "./Table/Table";
+import { sortData } from "./util";
+import LineGraph from "./Graph/LineGraph";
 function App() {
+  const [countries, setCountries] = useState([]);
+  const [defaultCountry, setDefaultCountry] = useState("Worldwide");
+const [countryInfo, setCountryInfo]=useState({});
+const [tableData, setTableData]=useState([]);
+
+useEffect(()=>{
+  fetch("https://disease.sh/v3/covid-19/all")
+  .then(response=> response.json())
+  .then(data=>{
+    setCountryInfo(data);
+  });
+},[])
+  useEffect(() => {
+    const getCountryData = async () => {
+      await fetch("https://disease.sh/v3/covid-19/countries")
+        .then((response) => response.json())
+        .then((data) => {
+          const countries = data.map((country) => ({
+            name: country.country,
+            value: country.countryInfo.iso2,
+          }));
+
+          const sortedData = sortData(data)
+          setTableData(sortedData);
+          setCountries(countries);
+        });
+    };
+    getCountryData();
+  }, []);
+
+  const onCountryChange = async(event) => {
+    const countryCode = event.target.value;
+
+    const url= countryCode === 'worldwide' ? `https://disease.sh/v3/covid-19/all`:
+    `https://disease.sh/v3/covid-19/countries/${countryCode}`;
+
+    await fetch(url)
+    .then(response => response.json())
+    .then(data =>{
+      setDefaultCountry(countryCode);
+      setCountryInfo(data);
+
+    });
+  };
+
+console.log(countryInfo)
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <div className="containerLeft">
+        <div className="Header">
+        <h1>Covid-19 Tracker</h1>
+        <FormControl className="appDropdown">
+          {" "}
+          {/*camelCase and PascalCase*/}
+          <Select
+            varient="outlined"
+            onChange={onCountryChange}
+            value={defaultCountry}
+          >
+            <MenuItem value="Worldwide">Worldwide</MenuItem>
+            {countries.map((country) => (
+              <MenuItem value={country.value}>{country.name}</MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </div>
+
+      <div className="appStats">
+        <Infobox title="Coronavirus Cases" cases={countryInfo.todayCases} total={countryInfo.cases} />
+
+        <Infobox title="Recovered" cases={countryInfo.todayRecovered} total={countryInfo.recovered} />
+
+        <Infobox title="Deaths"  cases={countryInfo.todayDeaths} total={countryInfo.deaths} />
+      </div>
+      <Mapbox />
+      </div>
+
+      <Card className="containerRight">
+<CardContent>
+  <h3>Live Cases by Country</h3>
+  <Table countries={tableData}/>
+  <h3>Worldwide new cases</h3>
+</CardContent>
+      </Card>
+
     </div>
   );
 }
 
 export default App;
+
+// 2:40 LineGraph
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Graph/LineGraph.js b/src/Graph/LineGraph.js
@@ -0,0 +1,25 @@
+import React, {useState, useEffect} from 'react'
+import { Line } from 'react-chartjs-2'
+
+function LineGraph() {
+
+    const [data, setData]=useState({});
+
+    useEffect(() =>{
+        fetch('https://disease.sh/v3/covid-19/historical/all?lastdays=120')
+        .then(response=>response.json())
+        .then(data=>{
+
+        });
+
+
+    }, [])
+    return (
+        <div>
+            <h1>Hi</h1>
+            data
+        </div>
+    )
+}
+
+export default LineGraph
diff --git a/src/Info/Infobox.js b/src/Info/Infobox.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { Card, CardContent, Typography } from "@mui/material";
+
+function Infobox({ title, cases, total }) {
+  return (
+    <Card>
+      <CardContent>
+        <Typography className="infoTitle" color="textSecondary">
+          {title}
+        </Typography>
+
+        <h2 className="infoCases">{cases}</h2>
+
+        <Typography className="infoTotal" color="textSecondary">
+          {total} total
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default Infobox;
diff --git a/src/Map/Mapbox.js b/src/Map/Mapbox.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+function Mapbox() {
+    return (
+        <div className="Map">
+            I am map
+
+        </div>
+    )
+}
+
+export default Mapbox
diff --git a/src/Table/Table.css b/src/Table/Table.css
@@ -0,0 +1,18 @@
+.table{
+    margin-top:30px;
+    overflow:scroll;
+    height:400px;
+    color:rgb(59, 59, 59)
+}
+
+.table tr{
+    display:flex;
+    justify-content: space-between;
+}
+
+.table td{
+    padding: 0.5rem;
+}
+.table tr:nth-of-type(odd){
+    background-color: cornsilk;
+}
diff --git a/src/Table/Table.js b/src/Table/Table.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import "./Table.css";
+
+function Table({countries}) {
+    return (
+        <div className='table'>
+            {countries.map(({country, cases})=>(
+               <tr>
+                   <td>
+                       {country}
+                   </td>
+                   <td><strong>{cases}</strong></td>
+               </tr>
+
+            ))}
+        </div>
+    );
+}
+
+export default Table;
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/setupTests.js b/src/setupTests.js
diff --git a/src/util.js b/src/util.js
@@ -0,0 +1,4 @@
+export const sortData=(data)=>{
+    const sortedData = [...data];
+    return sortedData.sort((a,b)=> (a.cases>b.cases? -1:1));
+}