big changes

Author: adrianhajdin

package-lock.json

@@ -12,7 +12,7 @@
     "classnames": "^2.2.6",
     "react": "^16.13.1",
     "react-chartjs-2": "^2.9.0",
-    "react-device-detect": "^1.11.14",
+    "react-countup": "^4.3.3",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"
   },

package.json

@@ -3,8 +3,22 @@
   margin-top: 20px !important;
 }
 
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.link {
+  cursor: pointer;
+}
+
+.image-covid {
+  width: 370px;
+}
+
 body {
-  background-color: rgb(250, 250,250)
+  background-color: rgb(250, 250,250);
 }
 
 .intro-container {

src/App.css

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import './App.css';
-import { Container, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 
-import {isMobile} from 'react-device-detect';
+import CoronaLogo from './images/image.png';
 
 import Info from './components/Info/Info';
 import Countries from './components/Countries/Countries';
@@ -33,14 +33,14 @@ class App extends React.Component {
     const { data, country } = this.state;
 
     return (
-      <Container>
-        <Typography variant="h2" className="heading">Corona Statistics</Typography>
+      <div className="container">
+        <span className="link" onClick={() => this.handleCountryChange('')}><img className="image-covid" src={CoronaLogo} alt="logo" /></span>
         <div className="intro-container">
           <Info data={data} />
           <Countries handleCountryChange={this.handleCountryChange} />
         </div>
         { window.innerWidth > 500 ? <Chart data={data} country={country} /> : <Typography align="center" variant="h5">Rotate your device and reload the page to see the chart</Typography>}
-      </Container>
+      </div>
     );
   }
 }

src/App.js

@@ -3,6 +3,8 @@ import axios from 'axios';
 const fetchData = (country) => {
   let url = 'https://covid19.mathdro.id/api'; 
 
+  console.log(country);
+
   if(country) {
     url = `${url}/countries/${country}`;
   }

src/api/fetchData.js

@@ -2,15 +2,20 @@
 .chart-container {
   display: flex;
   justify-content: center;
-  margin: 0 15%;
+  width: 45%;
 }
 
 canvas {
   width: 100%;
 }
 
-@media only screen and (max-width: 820px) {
+@media only screen and (max-width: 1000px) {
   .chart-container {
-    margin: 0 5%;
+     width: 70%;
+  }
+}
+@media only screen and (max-width: 1441px) {
+  .chart-container {
+     width: 60%;
   }
 }

src/components/Chart/Chart.css

@@ -1,18 +1,15 @@
 import React, { useState, useEffect } from 'react'
 import { Line, Bar } from 'react-chartjs-2';
 
-import { Container } from '@material-ui/core';
-
 import './Chart.css'
 
-
 import fetchDaily from '../../api/fetchDaily';
 
 const Chart = ({ data, country }) => {
   const [dailyData, setDailyData] = useState({});
 
   useEffect(() => {
-    async function fetchMyAPI() {
+    const fetchMyAPI = async () => {
       const dailyData = await fetchDaily();
 
       setDailyData(dailyData)
@@ -28,18 +25,15 @@ const Chart = ({ data, country }) => {
         datasets: [
           {
             label: "People",
-            backgroundColor: ["rgb(0,0,205)", "rgb(0,205, 0)", "rgb(205,0, 0)"],
+            backgroundColor: ["rgba(0, 0, 255, 0.5)", "rgba(0, 255, 0, 0.5)", "rgba(255, 0, 0, 0.5)"],
             data: [data.confirmed, data.recovered, data.deaths]
           }
         ]
       }}
       options={{
         legend: { display: false },
-        title: {
-          display: true,
-          text: `Current state in ${country}`
-        }
-      }}
+      title: { display: true, text: `Current state in ${country}` },
+    }}
     /> : null
   )
 
@@ -55,7 +49,7 @@ const Chart = ({ data, country }) => {
         data: dailyData.map(({ deaths }) => deaths),
         label: "Deaths",
         borderColor: "red",
-        backgroundColor: "#ff9999",
+        backgroundColor: "rgba(255, 0, 0, 0.5)",
         fill: true
       }
       ]

src/components/Chart/Chart.jsx

@@ -13,16 +13,16 @@ img {
   width: 200px;
 }
 
-.confirmed {
-  background-color: rgba(0, 0, 255, 0.5);
+.infected {
+  border-bottom: 10px solid rgba(0, 0, 255, 0.5);
 }
 
 .recovered {
-  background-color: rgba(0, 255, 0, 0.5);
+  border-bottom: 10px solid rgba(0, 255, 0, 0.5);
 }
 
 .deaths {
-  background-color: rgba(255, 0, 0, 0.5);
+  border-bottom: 10px solid rgba(255, 0, 0, 0.5);
 }
 
 @media only screen and (max-width: 820px) {

src/components/Info/Info.css

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import { Card, CardActions, CardContent, Button, Typography, Grid } from '@material-ui/core';
+import CountUp from 'react-countup';
+
 
 import './Info.css';
 
@@ -14,13 +16,18 @@ const Info = ({ data }) => {
   return (
     <div className="container">
       <Grid container spacing={3} justify="center">
-        <Grid item xs={12} md={3} component={Card} className="card">
+        <Grid item xs={12} md={3} component={Card} className="card infected">
             <CardContent>
               <Typography color="textSecondary" gutterBottom>
                 Infected
               </Typography>
               <Typography variant="h5" component="h2">
-                {data.confirmed.toLocaleString()}
+              <CountUp 
+                start={0}
+                end={data.confirmed}
+                duration={2.75}
+                separator=","
+              />
               </Typography>
               <Typography color="textSecondary">
                 {new Date(data.lastUpdate).toDateString()}
@@ -31,13 +38,18 @@ const Info = ({ data }) => {
             </CardContent>
 
         </Grid>
-        <Grid item xs={12} md={3} component={Card} className="card">
+        <Grid item xs={12} md={3} component={Card} className="card recovered">
             <CardContent>
               <Typography color="textSecondary" gutterBottom>
                 Recovered
         </Typography>
               <Typography variant="h5" component="h2">
-                {data.recovered.toLocaleString()}
+              <CountUp 
+                start={0}
+                end={data.recovered}
+                duration={2.75}
+                separator=","
+              />
               </Typography>
               <Typography color="textSecondary">
                 {new Date(data.lastUpdate).toDateString()}
@@ -48,13 +60,18 @@ const Info = ({ data }) => {
             </CardContent>
 
         </Grid>
-        <Grid item xs={12} md={3} component={Card} className="card">
+        <Grid item xs={12} md={3} component={Card} className="card deaths">
             <CardContent>
               <Typography color="textSecondary" gutterBottom>
                 Deaths
         </Typography>
               <Typography variant="h5" component="h2">
-                {data.deaths.toLocaleString()}
+              <CountUp 
+                start={0}
+                end={data.deaths}
+                duration={2.75}
+                separator=","
+              />
               </Typography>
               <Typography color="textSecondary">
                 {new Date(data.lastUpdate).toDateString()}