diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..361a7dd --- /dev/null +++ b/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. diff --git a/README.md b/README.md index 9c05637..f8035ae 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,32 @@ # COVID-19 Tracker +

+ +

+ +

+ View Covid-19 India Tracker +

+ ## 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. diff --git a/package-lock.json b/package-lock.json index 0538270..ce1e24d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4481,6 +4481,11 @@ } } }, + "date-fns": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.13.0.tgz", + "integrity": "sha512-xm0c61mevGF7f0XpCGtDTGpzEFC/1fpLXHbmFpxZZQJuvByIK2ozm6cSYuU+nxFYOPh2EuCfzUwlTEFwKG+h5w==" + }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", @@ -11187,6 +11192,11 @@ "whatwg-fetch": "^3.0.0" } }, + "react-content-loader": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-5.0.4.tgz", + "integrity": "sha512-hxv4Td1kQxFOmIUbBZ2S3HGZ/jJr28aJvM+8fndm9TmNOE7tSde7WSTL6R68aTS6qE0BA3ptcWIErrP704pQSw==" + }, "react-dev-utils": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz", diff --git a/package.json b/package.json index b94b6cb..0259e90 100644 --- a/package.json +++ b/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", diff --git a/src/App.css b/src/App.css index bc8c156..50bc361 100644 --- a/src/App.css +++ b/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; + } } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 0f92038..4be1c4e 100644 --- a/src/App.js +++ b/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 { /> )} /> -

symptoms

} /> + } /> } /> -

Help Page

} /> + } /> ( diff --git a/src/assets/screesnhot.png b/src/assets/screesnhot.png new file mode 100644 index 0000000..57f49e7 Binary files /dev/null and b/src/assets/screesnhot.png differ diff --git a/src/components/Barchart.js b/src/components/Barchart.js index 7fedf01..edc4d78 100644 --- a/src/components/Barchart.js +++ b/src/components/Barchart.js @@ -26,7 +26,7 @@ export default class Barchart extends Component { } catch (err) {} return ( -
+
{!isLoading && ( - {!isLoading && ( + - )} +
); } diff --git a/src/components/CovidApp.js b/src/components/CovidApp.js index e6ccdd2..c07b7c2 100644 --- a/src/components/CovidApp.js +++ b/src/components/CovidApp.js @@ -1,4 +1,5 @@ import React, { Component } from "react"; +import { formatDistance } from "date-fns"; import Overview from "./Overview"; import { withStyles } from "@material-ui/styles"; import colors from "../constants/colors"; @@ -7,14 +8,19 @@ import DisplayTable from "./DisplayTable"; import styles from "../styles/CovidAppStyles"; import axios from "axios"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faSyncAlt } from "@fortawesome/free-solid-svg-icons"; +import { + faSyncAlt, + faBell, + faBellSlash, +} from "@fortawesome/free-solid-svg-icons"; import "../styles/DarkModeButton.css"; import MapSection from "./MapSection"; import Barchart from "./Barchart"; import stateCodes from "../constants/stateCodes"; import Lottie from "react-lottie"; import * as animationData from "../assets/loading.json"; -import FadeIn from "react-fade-in"; +// import FadeIn from "react-fade-in"; +import Footer from "./Footer"; const defaultOptions = { loop: true, @@ -25,6 +31,21 @@ const defaultOptions = { }, }; +const months = { + "01": "Jan", + "02": "Feb", + "03": "Mar", + "04": "Apr", + "05": "May", + "06": "Jun", + "07": "Jul", + "08": "Aug", + "09": "Sep", + "10": "Oct", + "11": "Nov", + "12": "Dec", +}; + class CovidApp extends Component { constructor(props) { super(props); @@ -41,6 +62,7 @@ class CovidApp extends Component { this.formatData = this.formatData.bind(this); this.findId = this.findId.bind(this); this.handleFormat = this.handleFormat.bind(this); + this.handleNotification = this.handleNotification.bind(this); } componentDidMount() { @@ -56,12 +78,18 @@ class CovidApp extends Component { const stateChanges = axios.get( "https://api.covid19india.org/states_daily.json" ); + const updates = axios.get( + "https://api.covid19india.org/updatelog/log.json" + ); - axios.all([countryData, districtLevel, stateChanges]).then( + axios.all([countryData, districtLevel, stateChanges, updates]).then( axios.spread((...responses) => { const countryData = responses[0].data; - // const districtLevel = responses[1].data; + const districtLevel = responses[1].data; // const stateChanges = responses[2].data; + const updates = responses[3].data; + + // console.log(countryData.statewise[0].lastupdatedtime); const [todayData] = countryData.statewise.slice(0, 1); const casesTimeline = countryData.cases_time_series; @@ -73,6 +101,9 @@ class CovidApp extends Component { data: data, todayData: todayData, casesTimeline: casesTimeline, + districtLevel: districtLevel, + updates: updates, + expanded: false, }, this.handleFormat ); @@ -107,9 +138,29 @@ class CovidApp extends Component { this.setState({ mapData: newdata }); } + handleNotification() { + this.setState({ expanded: !this.state.expanded }); + } + + formatDate(date) { + try { + const day = date.slice(0, 2); + const month = date.slice(3, 5); + const time = date.slice(11); + return `${day} ${months[month]}, ${time.slice(0, 5)} IST`; + } catch (err) {} + } + render() { const { classes, setDarkMode, isDarkMode } = this.props; - const { mapData, isLoading, data } = this.state; + const { + mapData, + isLoading, + data, + districtLevel, + expanded, + updates, + } = this.state; if (isLoading) { return ( @@ -118,9 +169,34 @@ class CovidApp extends Component {
); } + let displayUpdates; + try { + displayUpdates = updates + .slice(-5) + .reverse() + .map(({ update, timestamp }, i) => { + update = update.replace("\n", "
"); + return ( +
+
+ {`${formatDistance( + new Date(timestamp * 1000), + new Date() + )} ago`} +
+

+
+ ); + }); + } catch (err) {} return ( - + <>

Covid-19 India Trend @@ -132,6 +208,28 @@ class CovidApp extends Component { onClick={this.fetchData} />

+
+ Last Updated:{" "} + {this.formatDate(this.state.todayData.lastupdatedtime)} +
+
+
+ {expanded ? ( + + ) : ( +
+ +
+ )} +
+ {expanded &&
{displayUpdates}
} +
- +
+ +
@@ -159,10 +259,12 @@ class CovidApp extends Component {
- +
+ +
State/UT Wise Data (Sortable){" "} - +
- +