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;