Changed Table Data

Author: PrinceSumberia

src/components/Charts.js

@@ -26,7 +26,6 @@ export default class Charts extends Component {
         };
       });
     } catch (err) {}
-    console.log(result);
 
     return (
       <div className="charts">

src/components/CovidApp.js

@@ -29,7 +29,6 @@ class CovidApp extends Component {
     this.formatData = this.formatData.bind(this);
     this.findId = this.findId.bind(this);
     this.handleFormat = this.handleFormat.bind(this);
-    this.tableData = this.tableData.bind(this);
   }
 
   componentDidMount() {
@@ -49,8 +48,8 @@ class CovidApp extends Component {
     axios.all([countryData, districtLevel, stateChanges]).then(
       axios.spread((...responses) => {
         const countryData = responses[0].data;
-        const districtLevel = responses[1].data;
-        const stateChanges = responses[2].data;
+        // const districtLevel = responses[1].data;
+        // const stateChanges = responses[2].data;
 
         const [todayData] = countryData.statewise.slice(0, 1);
         const casesTimeline = countryData.cases_time_series;
@@ -89,35 +88,14 @@ class CovidApp extends Component {
     }
   }
 
-  tableData(data) {
-    const newArr = data
-      .slice(-1)
-      .map((data) => data.regional)
-      .flat();
-    const newData = newArr.map((region, i) => {
-      return {
-        id: region.loc,
-        name: region.loc,
-        deaths: region.deaths,
-        discharged: region.discharged,
-        confirmed: region.totalConfirmed,
-        active: region.totalConfirmed - (region.discharged + region.deaths),
-      };
-    });
-    return newData;
-  }
-
   handleFormat() {
     const newdata = this.formatData(this.state.data);
-    // const tableData = this.tableData(this.state.data);
-    // this.setState({ mapData: newdata, tableData: tableData });
     this.setState({ mapData: newdata });
   }
 
   render() {
     const { classes, setDarkMode, isDarkMode } = this.props;
-    const { mapData, tableData, isLoading, data } = this.state;
-    console.log(this.state.casesTimeline);
+    const { mapData, isLoading, data } = this.state;
 
     if (isLoading) {
       return (
@@ -230,12 +208,12 @@ class CovidApp extends Component {
               </div>
             </div>
           </div>
-          {/* <div className={classes.tableContainer}>
+          <div className={classes.tableContainer}>
             <h2 className={classes.tableHeading}>
               State/UT Wise Data (Sortable){" "}
             </h2>
-            <DisplayTable tableData={tableData} isDarkMode={isDarkMode} />
-          </div> */}
+            <DisplayTable tableData={data} isDarkMode={isDarkMode} />
+          </div>
         </div>
       </>
     );

src/components/DisplayTable.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faArrowCircleRight,
@@ -62,8 +62,6 @@ const DisplayTable = ({ tableData, isDarkMode }) => {
     setDisplayDist(!displayDist);
   };
 
-  useEffect(() => {}, [distId, displayDist]);
-
   return (
     <table>
       {/* <caption>Products</caption> */}
@@ -72,8 +70,8 @@ const DisplayTable = ({ tableData, isDarkMode }) => {
           <th>
             <button
               type="button"
-              onClick={() => requestSort("name")}
-              className={getClassNamesFor("name")}
+              onClick={() => requestSort("state")}
+              className={getClassNamesFor("state")}
             >
               Name
             </button>
@@ -99,8 +97,8 @@ const DisplayTable = ({ tableData, isDarkMode }) => {
           <th>
             <button
               type="button"
-              onClick={() => requestSort("discharged")}
-              className={getClassNamesFor("discharged")}
+              onClick={() => requestSort("recovered")}
+              className={getClassNamesFor("recovered")}
             >
               Recovered
             </button>
@@ -118,22 +116,23 @@ const DisplayTable = ({ tableData, isDarkMode }) => {
       </thead>
       <tbody>
         {items.map((item) => (
-          <tr key={item.id}>
+          <tr key={item.statecode}>
             <td style={lightText}>
               <FontAwesomeIcon
                 icon={
-                  distId === item.id && displayDist
+                  distId === item.statecode && displayDist
                     ? faArrowCircleDown
                     : faArrowCircleRight
                 }
-                onClick={() => toggleDistView(item.id)}
+                className=""
+                onClick={() => toggleDistView(item.statecode)}
               />{" "}
-              {item.name}
+              {item.state}
             </td>
 
             <td style={lightText}>{item.confirmed}</td>
             <td style={lightText}>{item.active}</td>
-            <td style={lightText}>{item.discharged}</td>
+            <td style={lightText}>{item.recovered}</td>
             <td style={lightText}>{item.deaths}</td>
           </tr>
           /* {distId === item.id && displayDist ? (
@@ -152,4 +151,3 @@ const DisplayTable = ({ tableData, isDarkMode }) => {
 };
 
 export default DisplayTable;
-