complete project

src/App.js

@@ -1,24 +1,32 @@
 import React, { Component } from "react";
-import {Cards,Chart,CountryPicker} from './components';
-import {fetchData} from './api';
-import style from "./App.module.css"
+import { Cards, Chart, CountryPicker } from "./components";
+import { fetchData } from "./api";
+import styles from "./App.module.css";
+import coronaImage from "./images/covid.png";
 
 class App extends Component {
-    state = {
-        data: {},
-    }
-    async componentDidMount() {
-        const fetchedData = await fetchData();
-        this.setState({data:fetchedData});
-    }
-
+  state = {
+    data: {},
+    country: "",
+  };
+  async componentDidMount() {
+    const fetchedData = await fetchData();
+    this.setState({ data: fetchedData });
+  }
+
+  handleCountryChange = async (country) => {
+    const fetchedData = await fetchData(country);
+    this.setState({ data: fetchedData, country: country });
+  };
+
   render() {
-      const {data} = this.state;
+    const { data, country } = this.state;
     return (
-      <div className={style.container}>
-        <Cards data={data}/>
-        <CountryPicker/>
-        <Chart/>
+      <div className={styles.container}>
+        <img className={styles.image} src={coronaImage} alt="Covid-19"/>
+        <Cards data={data} />
+        <CountryPicker handleCountryChange={this.handleCountryChange} />
+        <Chart data={data} country={country} />
       </div>
     );
   }

src/App.module.css

@@ -7,4 +7,18 @@ body{
     align-items: center;
     justify-content: center;
     flex-direction: column;
+}
+
+.image{
+    width:370px;
+    margin-top: 50px;
+}
+
+@media(max-width:770px){
+    .container{
+        margin: 0 10%;
+    }
+    .image{
+        width: 100%;
+    }
 }

src/api/index.js

@@ -2,11 +2,18 @@ import axios from "axios";
 
 const url = "https://covid19.mathdro.id/api";
 
-export async function fetchData() {
+export async function fetchData(country) {
+    let changeableUrl = url;
+    if(country){
+        changeableUrl = `${url}/countries/${country}`;
+    }
+
     try {
-        const { data: { confirmed, recovered, deaths, lastUpdate }} = await axios.get(url);
+        const { data: { confirmed, recovered, deaths, lastUpdate }} = await axios.get(changeableUrl);
         return { confirmed, recovered, deaths, lastUpdate };
-      } catch (error) {} 
+      } catch (error) {
+          console.log(error);
+      } 
 }
 
 export async function fetchDailyData() {
@@ -20,6 +27,16 @@ export async function fetchDailyData() {
 
         return modifiedData;
     } catch (error) {
-
+        console.log(error);
     }    
+}
+
+export async function fetchCountries() {
+    try {
+        const {data:{countries}} = await axios.get(`${url}/countries`);
+
+        return countries.map(country => country.name);
+    } catch (error) {
+        console.log(error);
+    }
 }

src/components/Cards/Cards.jsx

@@ -4,7 +4,6 @@ import {
   CardContent,
   Typography,
   Grid,
-  StylesProvider,
 } from "@material-ui/core";
 import CountUp from "react-countup";
 import cx from "classnames";

src/components/Cards/Cards.module.css

@@ -17,3 +17,9 @@
 .deaths {
   border-bottom: 10px solid rgba(255, 0, 0, 0.5);
 }
+
+@media(max-width:770px){
+  .card{
+    margin: 2% 0 !important;
+  }
+}

src/components/Chart/Chart.jsx

@@ -3,7 +3,7 @@ import { fetchDailyData } from "../../api/";
 import { Line, Bar } from "react-chartjs-2";
 import styles from "./Charts.module.css";
 
-function Chart() {
+function Chart({ data: { confirmed, recovered, deaths }, country }) {
   const [dailyData, setDailyData] = useState([]);
 
   useEffect(() => {
@@ -12,32 +12,56 @@ function Chart() {
     };
 
     fetchApi();
-  });
+  },[]);
 
   const lineChart = dailyData.length ? (
     <Line
       data={{
-        labels: dailyData.map(({date}) => date),
-        datasets: [{
-            data:dailyData.map(({confirmed}) => confirmed),
-            label:'Infected',
-            borderColor:'#3333ff',
-            fill:true
-        }, {
-            data:dailyData.map(({deaths}) => deaths),
-            label:'Infected',
-            borderColor:'red',
-            backgroundColor:'rgba(255,0,0,0.5)',
-            fill:true
-        }],
+        labels: dailyData.map(({ date }) => date),
+        datasets: [
+          {
+            data: dailyData.map(({ confirmed }) => confirmed),
+            label: "Infected",
+            borderColor: "#3333ff",
+            fill: true,
+          },
+          {
+            data: dailyData.map(({ deaths }) => deaths),
+            label: "Infected",
+            borderColor: "red",
+            backgroundColor: "rgba(255,0,0,0.5)",
+            fill: true,
+          },
+        ],
+      }}
+    />
+  ) : null;
+
+  const barChart = confirmed ? (
+    <Bar
+      data={{
+        labels: ["Infected", "Recovered", "Deaths"],
+        datasets: [
+          {
+            labels: "People",
+            backgroundColor: [
+              "rgba(0, 0, 255, 0.5)",
+              "rgba(0, 255, 0, 0.5)",
+              "rgba(255, 0, 0, 0.5)",
+            ],
+            data: [confirmed.value, recovered.value, deaths.value],
+          },
+        ],
+      }}
+      options={{
+        legend: { display: false },
+        title: { display: true, text: `Current state in ${country}` },
       }}
     />
   ) : null;
 
   return (
-    <div className={styles.container}>
-    {lineChart}
-    </div>
+    <div className={styles.container}>{country ? barChart : lineChart}</div>
   );
 }
 

src/components/Chart/Charts.module.css

@@ -2,4 +2,10 @@
     display: flex;
     justify-content: center;
     width: 85%;
+}
+
+@media(max-width:770px){
+    .container{
+        width: 100%;
+    }
 }

src/components/CountryPicker/CountryPicker.jsx

@@ -1,10 +1,28 @@
-import React from 'react';
+import React,{useEffect,useState} from 'react';
+import {NativeSelect,FormControl} from '@material-ui/core';
+import {fetchCountries} from '../../api';
+import styles from "./CountryPicker.module.css";
+
+function CountryPicker({handleCountryChange}) {
+    const [fetchedCountries,setFetchedCountries] = useState([]);
+
+    useEffect(() => {
+        async function fetchApi () {
+            setFetchedCountries(await fetchCountries());
+        }
+
+        fetchApi();
+    },[setFetchedCountries])
 
-function CountryPicker(props) {
     return (
-        <div>
-            <h1>CountryPicker</h1>
-        </div>
+        <FormControl class={styles.formControl}>
+            <NativeSelect defaultValue="" onChange={(e) => {
+                handleCountryChange(e.target.value)
+            }}>
+                <option value="">Global</option>
+                {fetchedCountries.map((country,i) => <option key={i} value={country}>{country}</option>)}
+            </NativeSelect>
+        </FormControl>
     );
 }
 

src/components/CountryPicker/CountryPicker.module.css

@@ -0,0 +1,4 @@
+.formControl{
+    width: 30%;
+    margin-bottom: 30px !important;
+}