G

covid

public
Guest Jun 13, 2024 Never 13
Clone
Plaintext paste1.txt 104 lines (91 loc) | 3.14 KB
1
import React, { useState, useEffect } from 'react';
2
import './CovidDetails.css';
3
4
const CovidVaccinationDetails = () => {
5
const [states, setStates] = useState([]);
6
const [selectedState, setSelectedState] = useState('');
7
const [districtsDetails, setDistrictsDetails] = useState([]);
8
const [searchTerm, setSearchTerm] = useState('');
9
10
useEffect(() => {
11
fetch('https://data.covid19india.org/v4/min/data.min.json')
12
.then((response) => response.json())
13
.then((data) => {
14
const stateList = Object.keys(data).map((stateCode) => ({
15
code: stateCode
16
}));
17
setStates(stateList);
18
});
19
}, []);
20
21
useEffect(() => {
22
if (selectedState) {
23
fetch('https://data.covid19india.org/v4/min/data.min.json')
24
.then((response) => response.json())
25
.then((data) => {
26
const districtData = data[selectedState]?.districts || {};
27
const districtDetails = Object.keys(districtData).map((districtName) => ({
28
name: districtName,
29
details: districtData[districtName].total,
30
}));
31
setDistrictsDetails(districtDetails);
32
});
33
} else {
34
setDistrictsDetails([]);
35
}
36
}, [selectedState]);
37
38
const handleStateChange = (event) => {
39
setSelectedState(event.target.value);
40
};
41
const handleSearchChange = (event) => {
42
setSearchTerm(event.target.value.toLowerCase());
43
};
44
45
const filteredDistricts = districtsDetails.filter((district) =>
46
district.name.toLowerCase().includes(searchTerm)
47
);
48
49
50
51
return (
52
<div className='main'>
53
<h2>COVID-19 Details</h2>
54
<select value={selectedState} onChange={handleStateChange}>
55
<option value="asdf">Select a State</option>
56
57
{states.map((state) => (
58
<option style={{color:"black"}} key={state.code} value={state.code}>
59
{state.code}
60
</option>
61
))}
62
</select>
63
{selectedState && (
64
<input
65
type="text"
66
placeholder="Search district"
67
value={searchTerm}
68
onChange={handleSearchChange}
69
/>
70
)}
71
72
{filteredDistricts.length > 0 && (
73
<table className="DetailsTable">
74
<thead>
75
<tr>
76
<th>District</th>
77
<th>Confirmed</th>
78
<th>Deceased</th>
79
<th>Recovered</th>
80
<th>Vaccinated 1</th>
81
<th>Vaccinated 2</th>
82
83
</tr>
84
</thead>
85
<tbody>
86
{filteredDistricts.map((district) => (
87
<tr key={district.name}>
88
<td>{district.name}</td>
89
<td>{district.details.confirmed || 'N/A'}</td>
90
<td>{district.details.deceased || 'N/A'}</td>
91
<td>{district.details.recovered || 'N/A'}</td>
92
<td>{district.details.vaccinated1 || 'N/A' }</td>
93
<td>{district.details.vaccinated2 || 'N/A'}</td>
94
95
</tr>
96
))}
97
</tbody>
98
</table>
99
)}
100
</div>
101
);
102
};
103
104
export default CovidVaccinationDetails;