Skip to content

Commit 9c768fb

Browse files
ank1trajank1traj
authored
Update CovidApp.js
1 parent df1b60e commit 9c768fb

File tree

1 file changed

+48
-51
lines changed

1 file changed

+48
-51
lines changed

‎src/components/CovidApp.js‎

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
1-
import React, { Component } from 'react';
2-
import axios from 'axios';
3-
import Lottie from 'react-lottie';
4-
import { formatDistance } from 'date-fns';
5-
import { withStyles } from '@material-ui/styles';
6-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
1+
import React, { Component } from "react";
2+
import axios from "axios";
3+
import Lottie from "react-lottie";
4+
import { formatDistance } from "date-fns";
5+
import { withStyles } from "@material-ui/styles";
6+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
77
import {
88
faBell,
99
faBellSlash,
1010
faSyncAlt,
11-
} from '@fortawesome/free-solid-svg-icons';
11+
} from "@fortawesome/free-solid-svg-icons";
1212

13-
import Barchart from './Barchart';
14-
import Charts from './Charts';
15-
import DisplayTable from './DisplayTable';
16-
import Footer from './Footer';
17-
import MapSection from './MapSection';
18-
import Overview from './Overview';
13+
import Barchart from "./Barchart";
14+
import Charts from "./Charts";
15+
import DisplayTable from "./DisplayTable";
16+
import Footer from "./Footer";
17+
import MapSection from "./MapSection";
18+
import Overview from "./Overview";
1919

20-
import colors from '../constants/colors';
21-
import stateCodes from '../constants/stateCodes';
22-
import * as animationData from '../assets/loading.json';
20+
import colors from "../constants/colors";
21+
import stateCodes from "../constants/stateCodes";
22+
import * as animationData from "../assets/loading.json";
2323

24-
import styles from '../styles/CovidAppStyles';
25-
import '../styles/DarkModeButton.css';
24+
import styles from "../styles/CovidAppStyles";
25+
import "../styles/DarkModeButton.css";
2626

2727
const defaultOptions = {
2828
loop: true,
2929
autoplay: true,
3030
animationData: animationData.default,
3131
rendererSettings: {
32-
preserveAspectRatio: 'xMidYMid slice',
32+
preserveAspectRatio: "xMidYMid slice",
3333
},
3434
};
3535

3636
const months = {
37-
1: 'Jan',
38-
2: 'Feb',
39-
3: 'Mar',
40-
4: 'Apr',
41-
5: 'May',
42-
6: 'Jun',
43-
7: 'Jul',
44-
8: 'Aug',
45-
9: 'Sep',
46-
10: 'Oct',
47-
11: 'Nov',
48-
12: 'Dec',
37+
"1": "Jan",
38+
"2": "Feb",
39+
"3": "Mar",
40+
"4": "Apr",
41+
"5": "May",
42+
"6": "Jun",
43+
"7": "Jul",
44+
"8": "Aug",
45+
"9": "Sep",
46+
"10": "Oct",
47+
"11": "Nov",
48+
"12": "Dec",
4949
};
5050

5151
class CovidApp extends Component {
@@ -73,15 +73,15 @@ class CovidApp extends Component {
7373

7474
async fetchData() {
7575
this.setState({ isLoading: !this.state.isLoading });
76-
const countryData = axios.get('https://api.covid19india.org/data.json');
76+
const countryData = axios.get("https://api.covid19india.org/data.json");
7777
const districtLevel = axios.get(
78-
'https://api.covid19india.org/v2/state_district_wise.json'
78+
"https://api.covid19india.org/v2/state_district_wise.json"
7979
);
8080
const stateChanges = axios.get(
81-
'https://api.covid19india.org/states_daily.json'
81+
"https://api.covid19india.org/states_daily.json"
8282
);
8383
const updates = axios.get(
84-
'https://api.covid19india.org/updatelog/log.json'
84+
"https://api.covid19india.org/updatelog/log.json"
8585
);
8686

8787
axios.all([countryData, districtLevel, stateChanges, updates]).then(
@@ -114,7 +114,7 @@ class CovidApp extends Component {
114114
const formatedData = data.map((state, i) => {
115115
return {
116116
id: this.findId(state.state),
117-
state: state.state.replace(' and ', ' & '),
117+
state: state.state.replace(" and ", " & "),
118118
value: state.confirmed,
119119
};
120120
});
@@ -141,15 +141,12 @@ class CovidApp extends Component {
141141
this.setState({ expanded: !this.state.expanded });
142142
}
143143

144-
formatDate(timestamp) {
144+
formatDate(date) {
145145
try {
146-
const [date, time] = timestamp.split(' ');
147-
const formattedDate = date.split('/');
148-
console.log(time);
149-
return `${formattedDate[0]} ${months[formattedDate[1]]}, ${time.slice(
150-
0,
151-
5
152-
)} IST`;
146+
const day = date.slice(0, 2);
147+
const month = date.slice(3, 4);
148+
const time = date.slice(10);
149+
return `${day}th ${months[month]}, ${time.slice(0, 5)} IST`;
153150
} catch (err) {}
154151
}
155152

@@ -177,7 +174,7 @@ class CovidApp extends Component {
177174
.slice(-5)
178175
.reverse()
179176
.map(({ update, timestamp }, i) => {
180-
update = update.replace('\n', '<br/>');
177+
update = update.replace("\n", "<br/>");
181178
return (
182179
<div className={classes.updateBox} key={i}>
183180
<h5 className={classes.updateHeading}>
@@ -211,7 +208,7 @@ class CovidApp extends Component {
211208
/>
212209
</div>
213210
<div className={classes.lastUpdatedTime}>
214-
Last Updated:{' '}
211+
Last Updated:{" "}
215212
{this.formatDate(this.state.todayData.lastupdatedtime)}
216213
</div>
217214
<div className={classes.updates}>
@@ -271,7 +268,7 @@ class CovidApp extends Component {
271268
<div className={classes.tinyChart}>
272269
<div
273270
className={classes.tinych}
274-
style={{ background: 'rgba(249, 52, 94,.1)' }}
271+
style={{ background: "rgba(249, 52, 94,.1)" }}
275272
>
276273
<h3 style={{ color: colors.red }}>confirmed</h3>
277274
<Barchart
@@ -285,7 +282,7 @@ class CovidApp extends Component {
285282
<div className={classes.tinyChart}>
286283
<div
287284
className={classes.tinych}
288-
style={{ background: 'rgba(250, 100, 0,.1)' }}
285+
style={{ background: "rgba(250, 100, 0,.1)" }}
289286
>
290287
<h3 style={{ color: colors.orange }}>active</h3>
291288
<Barchart
@@ -299,7 +296,7 @@ class CovidApp extends Component {
299296
<div className={classes.tinyChart}>
300297
<div
301298
className={classes.tinych}
302-
style={{ background: 'rgba(28, 177, 66,.1)' }}
299+
style={{ background: "rgba(28, 177, 66,.1)" }}
303300
>
304301
<h3 style={{ color: colors.green }}>Recovered</h3>
305302
<Barchart
@@ -313,7 +310,7 @@ class CovidApp extends Component {
313310
<div className={classes.tinyChart}>
314311
<div
315312
className={classes.tinych}
316-
style={{ background: 'rgba(98, 54, 255,.1)' }}
313+
style={{ background: "rgba(98, 54, 255,.1)" }}
317314
>
318315
<h3 style={{ color: colors.purple }}>Deceased</h3>
319316
<Barchart
@@ -328,7 +325,7 @@ class CovidApp extends Component {
328325
</div>
329326
<div className={classes.tableContainer}>
330327
<h2 className={classes.tableHeading}>
331-
State/UT Wise Data (Sortable){' '}
328+
State/UT Wise Data (Sortable){" "}
332329
</h2>
333330
<DisplayTable
334331
tableData={data}

0 commit comments

Comments
 (0)