Change overview page

Author: PrinceSumberia

src/components/CovidApp.js

@@ -19,6 +19,7 @@ class CovidApp extends Component {
 
     this.state = {
       data: [],
+      todayData: {},
       isLoading: false,
       mapData: [],
       tableData: [],
@@ -50,12 +51,17 @@ class CovidApp extends Component {
 
     axios.all([countryData, districtLevel, stateChanges]).then(
       axios.spread((...responses) => {
-        const responseOne = responses[0].data;
-        const responseTwo = responses[1].data;
-        const responesThree = responses[2].data;
+        const countryData = responses[0].data;
+        const districtLevel = responses[1].data;
+        const stateChanges = responses[2].data;
 
+        const [data] = countryData.cases_time_series.slice(-1);
+        console.log(data);
+
+        this.setState({ todayData: data });
         // use/access the results
-        console.log(responseOne, responseTwo, responesThree);
+        // console.log(data);
+        // console.log(responseOne, responseTwo, responesThree);
       })
     );
 
@@ -116,7 +122,13 @@ class CovidApp extends Component {
     const { classes, setDarkMode, isDarkMode } = this.props;
     const { mapData, tableData, isLoading, data } = this.state;
 
-    return null;
+    return (
+      <Overview
+        isDarkMode={isDarkMode}
+        data={this.state.todayData}
+        loadingStatus={this.loadingStatus}
+      />
+    );
 
     // if (isLoading) {
     //   return (

src/components/Overview.js

@@ -12,97 +12,109 @@ class Overview extends Component {
       dataChanges: {},
       isLoading: false,
     };
-    this.calculateChange = this.calculateChange.bind(this);
-    this.getData = this.getData.bind(this);
-    this.setData = this.setData.bind(this);
+    // this.calculateChange = this.calculateChange.bind(this);
+    // this.getData = this.getData.bind(this);
+    // this.setData = this.setData.bind(this);
   }
 
-  componentDidMount() {
-    this.getData(this.props.data);
-  }
+  // componentDidMount() {
+  //   this.getData(this.props.data);
+  // }
 
-  setData() {
-    this.getData();
-  }
+  // setData() {
+  //   this.getData();
+  // }
 
-  getData(propsData) {
-    const data = propsData.slice(-2);
-    try {
-      const previousDay = data[0].summary;
-      const currentDay = data[1].summary;
-      this.setState(
-        {
-          previousDay: {
-            confirmed: previousDay.total,
-            recovered: previousDay.discharged,
-            deaths: previousDay.deaths,
-            activeCases:
-              previousDay.total - (previousDay.discharged + previousDay.deaths),
-          },
-          currentDay: {
-            confirmed: currentDay.total,
-            recovered: currentDay.discharged,
-            deaths: currentDay.deaths,
-            activeCases:
-              currentDay.total - (currentDay.discharged + currentDay.deaths),
-          },
-        },
-        this.calculateChange
-      );
-    } catch {}
-  }
+  // getData(propsData) {
+  //   const data = propsData.slice(-2);
+  //   try {
+  //     const previousDay = data[0].summary;
+  //     const currentDay = data[1].summary;
+  //     this.setState(
+  //       {
+  //         previousDay: {
+  //           confirmed: previousDay.total,
+  //           recovered: previousDay.discharged,
+  //           deaths: previousDay.deaths,
+  //           activeCases:
+  //             previousDay.total - (previousDay.discharged + previousDay.deaths),
+  //         },
+  //         currentDay: {
+  //           confirmed: currentDay.total,
+  //           recovered: currentDay.discharged,
+  //           deaths: currentDay.deaths,
+  //           activeCases:
+  //             currentDay.total - (currentDay.discharged + currentDay.deaths),
+  //         },
+  //       },
+  //       this.calculateChange
+  //     );
+  //   } catch {}
+  // }
 
-  calculateChange() {
-    const { previousDay, currentDay } = this.state;
-    let newObj = Object.keys(currentDay).reduce((a, k) => {
-      a[k] = currentDay[k] - previousDay[k];
-      return a;
-    }, {});
-    const newState = {
-      ...this.state,
-      dataChanges: newObj,
-    };
-    this.setState({
-      ...newState,
-    });
-  }
+  // calculateChange() {
+  //   const { previousDay, currentDay } = this.state;
+  //   let newObj = Object.keys(currentDay).reduce((a, k) => {
+  //     a[k] = currentDay[k] - previousDay[k];
+  //     return a;
+  //   }, {});
+  //   const newState = {
+  //     ...this.state,
+  //     dataChanges: newObj,
+  //   };
+  //   this.setState({
+  //     ...newState,
+  //   });
+  // }
+
+  // dailyconfirmed: "1902";
+  // dailydeceased: "69";
+  // dailyrecovered: "610";
+  // date: "28 April ";
+  // totalconfirmed: "31360";
+  // totaldeceased: "1008";
+  // totalrecovered: "7747";
 
   render() {
     const { confirmed, recovered, deaths, activeCases } = this.state.currentDay;
     const dataChange = this.state.dataChanges;
     const { classes, isDarkMode } = this.props;
+    const { totalconfirmed, totaldeceased, totalrecovered } = this.props.data;
+
+    const active =
+      Number(totalconfirmed) - (Number(totaldeceased) + Number(totalrecovered));
 
     return (
       <div className={classes.root}>
         <div className={classes.panels}>
           <div className={classes.panelContainer}>
             <DisplayPanels
               title="Confirmed"
-              number={confirmed}
+              number={totalconfirmed}
               isDarkMode={isDarkMode}
               dataChange={dataChange.confirmed}
             />
           </div>
           <div className={classes.panelContainer}>
             <DisplayPanels
               title="Active"
-              number={activeCases}
+              number={active}
               isDarkMode={isDarkMode}
               dataChange={dataChange.activeCases}
             />
           </div>
           <div className={classes.panelContainer}>
             <DisplayPanels
               title="Recovered"
-              number={recovered}
+              number={totalrecovered}
               isDarkMode={isDarkMode}
               dataChange={dataChange.recovered}
             />
           </div>
           <div className={classes.panelContainer}>
             <DisplayPanels
               title="Deceased"
-              number={deaths}
+              number={totaldeceased}
               isDarkMode={isDarkMode}
               dataChange={dataChange.deaths}
             />