import React, { useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowCircleDown, faArrowCircleRight, } from "@fortawesome/free-solid-svg-icons"; import "../styles/DisplayTable.css"; const useSortableData = (items, config = null) => { const [sortConfig, setSortConfig] = React.useState(config); const sortedItems = React.useMemo(() => { let sortableItems = [...items]; if (sortConfig !== null) { sortableItems.sort((a, b) => { if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === "ascending" ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === "ascending" ? 1 : -1; } return 0; }); } return sortableItems; }, [items, sortConfig]); const requestSort = (key) => { let direction = "ascending"; if ( sortConfig && sortConfig.key === key && sortConfig.direction === "ascending" ) { direction = "descending"; } setSortConfig({ key, direction }); }; return { items: sortedItems, requestSort, sortConfig }; }; const DisplayTable = ({ tableData, isDarkMode, districtLevel }) => { let result; try { result = tableData.map((dataItem) => { let newObject = {}; for (let [key, value] of Object.entries(dataItem)) { if ( key === "lastupdatedtime" || key === "state" || key === "statecode" || key === "statenotes" ) { newObject[key] = value; } else { newObject[key] = Number(value); } } return newObject; }); } catch (err) {} const getDistrictData = (statecode) => { try { const stateWithDist = districtLevel.find( (state) => state.statecode === statecode ); const districtData = stateWithDist.districtData.map((dist) => ( <tr className="district-tr" key={dist.district}> <td className="district-td" style={lightText}> {dist.district} </td> <td className="district-td" style={lightText}> {dist.confirmed} {dist.delta.confirmed > 0 && ( <span className="delta-confirmed">[{dist.delta.confirmed}] </span> )} </td> <td className="district-td" style={lightText}> {dist.active} </td> <td className="district-td" style={lightText}> {dist.recovered} {dist.delta.recovered > 0 && ( <span className="delta-recovered">[{dist.delta.recovered}] </span> )} </td> <td className="district-td" style={lightText}> {dist.deceased} {dist.delta.deceased > 0 && ( <span className="delta-deceased">[{dist.delta.deceased}] </span> )} </td> </tr> )); const markup = ( <> <tr className="district-tr" key={`${statecode} Dist`}> <th className="tableHead districtHead">District</th> <th className="tableHead districtHead">Confirmed</th> <th className="tableHead districtHead">Active</th> <th className="tableHead districtHead">Recovered</th> <th className="tableHead districtHead">Deceased</th> </tr> {districtData} <tr className="spacer-bottom"></tr> </> ); return markup; } catch (err) {} }; const { items, requestSort, sortConfig } = useSortableData(result); const [displayDist, setDisplayDist] = useState(false); const [distId, setDistId] = useState(""); const lightText = { color: isDarkMode && "rgba(255,255,255,.75)", }; const getClassNamesFor = (name) => { if (!sortConfig) { return; } return sortConfig.key === name ? sortConfig.direction : undefined; }; const toggleDistView = (id) => { setDistId(id); setDisplayDist(!displayDist); }; return ( <table> <caption style={{ marginTop: "1rem", marginBottom: "4rem", }} > Expand to get district wise data </caption> <thead> <tr> <th className="tableHead"> <button type="button" onClick={() => requestSort("state")} className={`tableHead-Button ${getClassNamesFor("state")}`} > Name </button> </th> <th className="tableHead"> <button type="button" onClick={() => requestSort("confirmed")} className={`tableHead-Button ${getClassNamesFor("confirmed")}`} > Confirmed </button> </th> <th className="tableHead"> <button type="button" onClick={() => requestSort("active")} className={`tableHead-Button ${getClassNamesFor("active")}`} > Active </button> </th> <th className="tableHead"> <button type="button" onClick={() => requestSort("recovered")} className={`tableHead-Button ${getClassNamesFor("recovered")}`} > Recovered </button> </th> <th className="tableHead"> <button type="button" onClick={() => requestSort("deaths")} className={`tableHead-Button ${getClassNamesFor("deaths")}`} > Deceased </button> </th> </tr> </thead> <tbody> {items.map((item) => ( <React.Fragment key={item.statecode}> <tr className="state-tr"> <td className="state-td" style={lightText}> <FontAwesomeIcon icon={ distId === item.statecode && displayDist ? faArrowCircleDown : faArrowCircleRight } className="" onClick={() => toggleDistView(item.statecode)} />{" "} {item.state} </td> <td className="state-td" style={lightText}> {item.confirmed} {item.deltaconfirmed > 0 && ( <span className="delta-confirmed"> [{item.deltaconfirmed}]{" "} </span> )} </td> <td className="state-td" style={lightText}> {item.active} </td> <td className="state-td" style={lightText}> {item.recovered} {item.deltarecovered > 0 && ( <span className="delta-recovered"> [{item.deltarecovered}]{" "} </span> )} </td> <td className="state-td" style={lightText}> {item.deaths} {item.deltadeaths > 0 && ( <span className="delta-deceased">[{item.deltadeaths}] </span> )} </td> </tr> {distId === item.statecode && displayDist ? getDistrictData(item.statecode) : null} </React.Fragment> ))} </tbody> </table> ); }; export default DisplayTable;