Next features

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Prince Sumberia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,11 +1,32 @@
 # COVID-19 Tracker
 
+<p align="center">
+<img src="./src/assets/screesnhot.png" width="100%">
+</p>
+
+<p align="center">
+  View <a href="https://covidindiatracker.netlify.app/">Covid-19 India Tracker</a>
+</p>
+
 ## Project Setup
+
 ```
 npm install
 ```
 
 ## Run Locally
+
 ```
 npm start
 ```
+
+## Contribute
+
+Covid-19 India Tracker is an open source project. So, feel free to contribute. And if you're new to contributing to Open Source on Github, then [this guide](https://guides.github.com/activities/contributing-to-open-source/) will help you.
+
+If you find any error or have any suggestion, feel free to create an [issue](https://github.com/PrinceSumberia/covid-19-tracker/issues/new).
+
+## Credits
+
+- Thanks, [@covid19india](https://github.com/covid19india) for the awesome [API](https://api.covid19india.org/). Was previously using [this API](https://api.rootnet.in/covid19-in/)
+- Thanks, [Drawer](https://drawer.design/products/coronavirus-icons) for the awesome Icons.

package.json

@@ -14,7 +14,9 @@
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.19.2",
     "classnames": "^2.2.6",
+    "date-fns": "^2.13.0",
     "react": "^16.13.1",
+    "react-content-loader": "^5.0.4",
     "react-dom": "^16.13.1",
     "react-fade-in": "^1.0.0",
     "react-lottie": "^1.2.3",

src/App.css

@@ -3,11 +3,10 @@
  }
 
  .navBar {
-   flex: 0 0 10%;
+   flex: 0 0 8%;
    min-height: 100vh;
    background-color: #1A1053;
    color: rgba(255, 255, 255, .9);
-   /* color: (props)=> props.isDarkMode ? "rgba(255,255,255,.87)": "rgba(255,255,255,.9)", */
    text-transform: capitalize;
    display: flex;
    justify-content: center;
@@ -18,4 +17,20 @@
    padding: 4rem;
    position: relative;
    overflow: hidden;
+ }
+
+ @media (max-width: 991.98px) {
+   .root {
+     flex-direction: column;
+   }
+
+   .navBar {
+     min-height: 10vh;
+     justify-content: space-around;
+     align-items: center;
+   }
+
+   .mainContent {
+     padding: 0;
+   }
  }

src/App.js

@@ -5,6 +5,8 @@ import "./App.css";
 import Navbar from "./components/Navbar";
 import { Switch, Route } from "react-router-dom";
 import StaySafe from "./components/StaySafe";
+import Help from "./components/Help";
+import Symptoms from "./components/Symptoms";
 
 class App extends Component {
   constructor(props) {
@@ -39,9 +41,9 @@ class App extends Component {
                   />
                 )}
               />
-              <Route exact path="/symptoms" render={() => <h1>symptoms</h1>} />
+              <Route exact path="/symptoms" render={() => <Symptoms />} />
               <Route exact path="/stay-safe" render={() => <StaySafe />} />
-              <Route exact path="/help" render={() => <h1>Help Page</h1>} />
+              <Route exact path="/essentials" render={() => <Help />} />
               <Route
                 path="/"
                 render={() => (

src/components/Barchart.js

@@ -26,7 +26,7 @@ export default class Barchart extends Component {
     } catch (err) {}
 
     return (
-      <div className="charts">
+      <div className="barcharts">
         {!isLoading && (
           <BarChart
             width={350}

src/components/Charts.js

@@ -1,11 +1,19 @@
 import React, { Component } from "react";
-import { LineChart, Line, XAxis, YAxis, Tooltip, Legend } from "recharts";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
 import colors from "../constants/colors";
 import "../styles/Charts.css";
 
 export default class Charts extends Component {
   render() {
-    const { isLoading, data } = this.props;
+    const { data } = this.props;
     let result;
     try {
       const updatedData = data.slice(1).slice(-50);
@@ -29,7 +37,7 @@ export default class Charts extends Component {
 
     return (
       <div className="charts">
-        {!isLoading && (
+        <ResponsiveContainer>
           <LineChart
             width={600}
             height={300}
@@ -75,7 +83,7 @@ export default class Charts extends Component {
               dot={false}
             />
           </LineChart>
-        )}
+        </ResponsiveContainer>
       </div>
     );
   }