Add updates icons and data

Author: PrinceSumberia

package-lock.json

@@ -14,6 +14,7 @@
     "@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",

package.json

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import { formatDistance, format } from "date-fns";
 import Overview from "./Overview";
 import { withStyles } from "@material-ui/styles";
 import colors from "../constants/colors";
@@ -7,7 +8,11 @@ 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";
@@ -42,6 +47,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() {
@@ -57,12 +63,16 @@ 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 stateChanges = responses[2].data;
+        const updates = responses[3].data;
 
         const [todayData] = countryData.statewise.slice(0, 1);
         const casesTimeline = countryData.cases_time_series;
@@ -75,6 +85,8 @@ class CovidApp extends Component {
             todayData: todayData,
             casesTimeline: casesTimeline,
             districtLevel: districtLevel,
+            updates: updates,
+            expanded: false,
           },
           this.handleFormat
         );
@@ -109,9 +121,20 @@ class CovidApp extends Component {
     this.setState({ mapData: newdata });
   }
 
+  handleNotification() {
+    this.setState({ expanded: !this.state.expanded });
+  }
+
   render() {
     const { classes, setDarkMode, isDarkMode } = this.props;
-    const { mapData, isLoading, data, districtLevel } = this.state;
+    const {
+      mapData,
+      isLoading,
+      data,
+      districtLevel,
+      expanded,
+      updates,
+    } = this.state;
 
     if (isLoading) {
       return (
@@ -120,10 +143,34 @@ class CovidApp extends Component {
         </div>
       );
     }
+    let displayUpdates;
+    try {
+      displayUpdates = updates
+        .slice(-5)
+        .reverse()
+        .map(({ update, timestamp }, i) => {
+          update = update.replace("\n", "<br/>");
+          return (
+            <React.Fragment key={i}>
+              <h5>
+                {`${formatDistance(
+                  new Date(timestamp * 1000),
+                  new Date()
+                )} ago`}
+              </h5>
+              <h4
+                dangerouslySetInnerHTML={{
+                  __html: update,
+                }}
+              ></h4>
+            </React.Fragment>
+          );
+        });
+    } catch (err) {}
 
     return (
-      <FadeIn>
-        <div className={classes.header}>
+      <>
+        <div className={classes.header} style={{ zIndex: "999" }}>
           <h1 className={classes.heading}>
             <span>Covid-19</span> India Trend
           </h1>
@@ -134,6 +181,22 @@ class CovidApp extends Component {
               onClick={this.fetchData}
             />
           </div>
+          <div className={classes.updates}>
+            <div className={classes.notification}>
+              {expanded ? (
+                <FontAwesomeIcon
+                  icon={faBellSlash}
+                  onClick={this.handleNotification}
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon={faBell}
+                  onClick={this.handleNotification}
+                />
+              )}
+            </div>
+            <div className={classes.update}>{expanded && displayUpdates}</div>
+          </div>
           <div className="darkModeButton">
             <label className="switch">
               <input
@@ -145,11 +208,13 @@ class CovidApp extends Component {
             </label>
           </div>
         </div>
-        <Overview
-          isDarkMode={isDarkMode}
-          data={this.state.todayData}
-          loadingStatus={this.loadingStatus}
-        />
+        <div style={{ position: "relative", zIndex: "-1" }}>
+          <Overview
+            isDarkMode={isDarkMode}
+            data={this.state.todayData}
+            loadingStatus={this.loadingStatus}
+          />
+        </div>
         <div className={classes.content}>
           <div className={classes.contentArea}>
             <div className={classes.mapArea}>
@@ -238,7 +303,7 @@ class CovidApp extends Component {
           </div>
         </div>
         <Footer />
-      </FadeIn>
+      </>
     );
   }
 }

src/components/CovidApp.js

@@ -27,10 +27,40 @@ export default {
     [sizes.down("xs")]: {
       fontSize: "2rem",
       padding: "3rem",
-      // paddingBottom: "1.5rem",
     },
   },
 
+  updates: {
+    marginLeft: "auto",
+    position: "relative",
+  },
+
+  notification: {
+    fontSize: "3rem",
+    color: colors.darkPurple,
+    position: "relative",
+    transition: "all .5s ease",
+
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      width: "1rem",
+      height: "1rem",
+      backgroundColor: "red",
+      borderRadius: "10rem",
+      top: "1rem",
+      right: 0,
+    },
+  },
+
+  update: {
+    display: "block",
+    position: "absolute",
+    left: "-25rem",
+    backgroundColor: "red",
+    zIndex: "99999999",
+  },
+
   content: {
     backgroundColor: (props) => (props.isDarkMode ? colors.darkPurple : "#fff"),
     borderRadius: "2rem",

src/styles/CovidAppStyles.js

@@ -6,7 +6,7 @@
 }
 
 .darkModeButton {
-  margin-left: auto;
+  margin-left: 2rem;
 }
 
 /* Hide default HTML checkbox */