Skip to content

Commit 64c2c4d

Browse files
PrinceSumberiaPrinceSumberia
committed
add another api
1 parent 86cda8f commit 64c2c4d

File tree

2 files changed

+147
-125
lines changed

2 files changed

+147
-125
lines changed

‎src/components/CovidApp.js‎

Lines changed: 146 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -37,16 +37,35 @@ class CovidApp extends Component {
3737

3838
async fetchData() {
3939
this.setState({ isLoading: !this.state.isLoading });
40+
const countryData = axios.get("https://api.covid19india.org/data.json");
41+
const districtLevel = axios.get(
42+
"https://api.covid19india.org/v2/state_district_wise.json"
43+
);
44+
const stateChanges = axios.get(
45+
"https://api.covid19india.org/states_daily.json"
46+
);
4047
const response = await axios.get(
4148
"https://api.rootnet.in/covid19-in/stats/history"
4249
);
43-
this.setState(
44-
(st) => ({
45-
data: response.data.data,
46-
isLoading: !st.isLoading,
47-
}),
48-
this.handleFormat
50+
51+
axios.all([countryData, districtLevel, stateChanges]).then(
52+
axios.spread((...responses) => {
53+
const responseOne = responses[0].data;
54+
const responseTwo = responses[1].data;
55+
const responesThree = responses[2].data;
56+
57+
// use/access the results
58+
console.log(responseOne, responseTwo, responesThree);
59+
})
4960
);
61+
62+
// this.setState(
63+
// (st) => ({
64+
// data: response.data.data,
65+
// isLoading: !st.isLoading,
66+
// }),
67+
// this.handleFormat
68+
// );
5069
}
5170

5271
formatData(data) {
@@ -97,125 +116,127 @@ class CovidApp extends Component {
97116
const { classes, setDarkMode, isDarkMode } = this.props;
98117
const { mapData, tableData, isLoading, data } = this.state;
99118

100-
if (isLoading) {
101-
return (
102-
<div className={classes.loadingIcon}>
103-
<FontAwesomeIcon icon={faSyncAlt} className={classes.refreshIcon} />
104-
</div>
105-
);
106-
}
107-
return (
108-
<>
109-
<div className={classes.header}>
110-
<h1 className={classes.heading}>
111-
<span>Covid-19</span> India Trend
112-
</h1>
113-
<div className={classes.btnBox}>
114-
<FontAwesomeIcon
115-
icon={faSyncAlt}
116-
className={classes.button}
117-
onClick={this.fetchData}
118-
/>
119-
</div>
120-
<div className="darkModeButton">
121-
<label className="switch">
122-
<input
123-
type="checkbox"
124-
onChange={setDarkMode}
125-
checked={isDarkMode}
126-
/>
127-
<span className="slider round"></span>
128-
</label>
129-
</div>
130-
</div>
131-
<Overview
132-
isDarkMode={isDarkMode}
133-
data={this.state.data}
134-
loadingStatus={this.loadingStatus}
135-
/>
136-
{!this.state.isLoading && (
137-
<div className={classes.content}>
138-
<div className={classes.contentArea}>
139-
<div className={classes.mapArea}>
140-
{/* <Map mapData={mapData} /> */}
141-
<MapSection
142-
mapData={mapData}
143-
data={data}
144-
isDarkMode={isDarkMode}
145-
/>
146-
</div>
147-
</div>
148-
<div className={classes.chartArea}>
149-
<Charts data={this.state.data} isLoading={this.state.isLoading} />
150-
<div className={classes.tinyChartArea}>
151-
<div className={classes.tinyChart}>
152-
<div
153-
className={classes.tinych}
154-
style={{ background: "rgba(249, 52, 94,.1)" }}
155-
>
156-
<h3 style={{ color: colors.red }}>confirmed</h3>
157-
<Barchart
158-
data={this.state.data}
159-
isLoading={this.state.isLoading}
160-
dataKey="confirmed"
161-
stroke={colors.red}
162-
/>
163-
</div>
164-
</div>
165-
<div className={classes.tinyChart}>
166-
<div
167-
className={classes.tinych}
168-
style={{ background: "rgba(250, 100, 0,.1)" }}
169-
>
170-
<h3 style={{ color: colors.orange }}>active</h3>
171-
<Barchart
172-
data={this.state.data}
173-
isLoading={this.state.isLoading}
174-
dataKey="active"
175-
stroke={colors.orange}
176-
/>
177-
</div>
178-
</div>
179-
<div className={classes.tinyChart}>
180-
<div
181-
className={classes.tinych}
182-
style={{ background: "rgba(28, 177, 66,.1)" }}
183-
>
184-
<h3 style={{ color: colors.green }}>Recovered</h3>
185-
<Barchart
186-
data={this.state.data}
187-
isLoading={this.state.isLoading}
188-
dataKey="discharged"
189-
stroke={colors.green}
190-
/>
191-
</div>
192-
</div>
193-
<div className={classes.tinyChart}>
194-
<div
195-
className={classes.tinych}
196-
style={{ background: "rgba(98, 54, 255,.1)" }}
197-
>
198-
<h3 style={{ color: colors.purple }}>Deceased</h3>
199-
<Barchart
200-
data={this.state.data}
201-
isLoading={this.state.isLoading}
202-
dataKey="deaths"
203-
stroke={colors.purple}
204-
/>
205-
</div>
206-
</div>
207-
</div>
208-
</div>
209-
<div className={classes.tableContainer}>
210-
<h2 className={classes.tableHeading}>
211-
State/UT Wise Data (Sortable){" "}
212-
</h2>
213-
<DisplayTable tableData={tableData} isDarkMode={isDarkMode} />
214-
</div>
215-
</div>
216-
)}
217-
</>
218-
);
119+
return null;
120+
121+
// if (isLoading) {
122+
// return (
123+
// <div className={classes.loadingIcon}>
124+
// <FontAwesomeIcon icon={faSyncAlt} className={classes.refreshIcon} />
125+
// </div>
126+
// );
127+
// }
128+
// return (
129+
// <>
130+
// <div className={classes.header}>
131+
// <h1 className={classes.heading}>
132+
// <span>Covid-19</span> India Trend
133+
// </h1>
134+
// <div className={classes.btnBox}>
135+
// <FontAwesomeIcon
136+
// icon={faSyncAlt}
137+
// className={classes.button}
138+
// onClick={this.fetchData}
139+
// />
140+
// </div>
141+
// <div className="darkModeButton">
142+
// <label className="switch">
143+
// <input
144+
// type="checkbox"
145+
// onChange={setDarkMode}
146+
// checked={isDarkMode}
147+
// />
148+
// <span className="slider round"></span>
149+
// </label>
150+
// </div>
151+
// </div>
152+
// <Overview
153+
// isDarkMode={isDarkMode}
154+
// data={this.state.data}
155+
// loadingStatus={this.loadingStatus}
156+
// />
157+
// {!this.state.isLoading && (
158+
// <div className={classes.content}>
159+
// <div className={classes.contentArea}>
160+
// <div className={classes.mapArea}>
161+
// {/* <Map mapData={mapData} /> */}
162+
// <MapSection
163+
// mapData={mapData}
164+
// data={data}
165+
// isDarkMode={isDarkMode}
166+
// />
167+
// </div>
168+
// </div>
169+
// <div className={classes.chartArea}>
170+
// <Charts data={this.state.data} isLoading={this.state.isLoading} />
171+
// <div className={classes.tinyChartArea}>
172+
// <div className={classes.tinyChart}>
173+
// <div
174+
// className={classes.tinych}
175+
// style={{ background: "rgba(249, 52, 94,.1)" }}
176+
// >
177+
// <h3 style={{ color: colors.red }}>confirmed</h3>
178+
// <Barchart
179+
// data={this.state.data}
180+
// isLoading={this.state.isLoading}
181+
// dataKey="confirmed"
182+
// stroke={colors.red}
183+
// />
184+
// </div>
185+
// </div>
186+
// <div className={classes.tinyChart}>
187+
// <div
188+
// className={classes.tinych}
189+
// style={{ background: "rgba(250, 100, 0,.1)" }}
190+
// >
191+
// <h3 style={{ color: colors.orange }}>active</h3>
192+
// <Barchart
193+
// data={this.state.data}
194+
// isLoading={this.state.isLoading}
195+
// dataKey="active"
196+
// stroke={colors.orange}
197+
// />
198+
// </div>
199+
// </div>
200+
// <div className={classes.tinyChart}>
201+
// <div
202+
// className={classes.tinych}
203+
// style={{ background: "rgba(28, 177, 66,.1)" }}
204+
// >
205+
// <h3 style={{ color: colors.green }}>Recovered</h3>
206+
// <Barchart
207+
// data={this.state.data}
208+
// isLoading={this.state.isLoading}
209+
// dataKey="discharged"
210+
// stroke={colors.green}
211+
// />
212+
// </div>
213+
// </div>
214+
// <div className={classes.tinyChart}>
215+
// <div
216+
// className={classes.tinych}
217+
// style={{ background: "rgba(98, 54, 255,.1)" }}
218+
// >
219+
// <h3 style={{ color: colors.purple }}>Deceased</h3>
220+
// <Barchart
221+
// data={this.state.data}
222+
// isLoading={this.state.isLoading}
223+
// dataKey="deaths"
224+
// stroke={colors.purple}
225+
// />
226+
// </div>
227+
// </div>
228+
// </div>
229+
// </div>
230+
// <div className={classes.tableContainer}>
231+
// <h2 className={classes.tableHeading}>
232+
// State/UT Wise Data (Sortable){" "}
233+
// </h2>
234+
// <DisplayTable tableData={tableData} isDarkMode={isDarkMode} />
235+
// </div>
236+
// </div>
237+
// )}
238+
// </>
239+
// );
219240
}
220241
}
221242

‎src/components/DisplayTable.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,3 +144,4 @@ const DisplayTable = ({ tableData, isDarkMode }) => {
144144
};
145145

146146
export default DisplayTable;
147+

0 commit comments

Comments
 (0)