From 929fd04e5434542516a703835baf49b09a835da8 Mon Sep 17 00:00:00 2001
From: Reverie-PC <reverie-pc@Reverie-IT-ka-MacBook-Pro.local>
Date: Sun, 9 May 2021 19:32:44 +0530
Subject: [PATCH 1/4] Solved the Lang Button dbl click issue
---
src/components/LanguageSwitcher.js | 8 ++++----
src/components/Navbar.js | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/components/LanguageSwitcher.js b/src/components/LanguageSwitcher.js
index c21e054390..0594a88264 100644
--- a/src/components/LanguageSwitcher.js
+++ b/src/components/LanguageSwitcher.js
@@ -6,7 +6,7 @@ import {memo, useRef, useCallback} from 'react';
import {ArrowUp} from 'react-feather';
import {useTranslation} from 'react-i18next';
import {useTransition, animated} from 'react-spring';
-import {useClickAway} from 'react-use';
+// import {useClickAway} from 'react-use';
function LanguageSwitcher({showLanguageSwitcher, setShowLanguageSwitcher}) {
const {t, i18n} = useTranslation();
@@ -27,9 +27,9 @@ function LanguageSwitcher({showLanguageSwitcher, setShowLanguageSwitcher}) {
});
const languageSwitcherRef = useRef();
- useClickAway(languageSwitcherRef, () => {
- setShowLanguageSwitcher(false);
- });
+ // useClickAway(languageSwitcherRef, () => {
+ // setShowLanguageSwitcher(false);
+ // });
const switchLanguage = useCallback(
(languageKey) => {
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index e471c47304..ee148857bc 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -54,7 +54,7 @@ function Navbar({
return navbarTransition((style, item) => (
<animated.div className="Navbar" {...{style}}>
- <div className="navbar-left" onClick={handleLangaugeSwitcher.bind(this)}>
+ <div className="navbar-left" onClick={handleLangaugeSwitcher}>
{locales[currentLanguage]}
</div>
From 15e2941e5e5688a42ec909b88ec5e8d69c30fc6e Mon Sep 17 00:00:00 2001
From: Reverie-PC <reverie-pc@Reverie-IT-ka-MacBook-Pro.local>
Date: Sun, 9 May 2021 19:59:20 +0530
Subject: [PATCH 2/4] solved the dbl setstate call issue
---
src/components/LanguageSwitcher.js | 10 ++++++----
src/components/Navbar.js | 6 +++++-
2 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/src/components/LanguageSwitcher.js b/src/components/LanguageSwitcher.js
index 0594a88264..174a429a72 100644
--- a/src/components/LanguageSwitcher.js
+++ b/src/components/LanguageSwitcher.js
@@ -6,7 +6,7 @@ import {memo, useRef, useCallback} from 'react';
import {ArrowUp} from 'react-feather';
import {useTranslation} from 'react-i18next';
import {useTransition, animated} from 'react-spring';
-// import {useClickAway} from 'react-use';
+import {useClickAway} from 'react-use';
function LanguageSwitcher({showLanguageSwitcher, setShowLanguageSwitcher}) {
const {t, i18n} = useTranslation();
@@ -27,9 +27,11 @@ function LanguageSwitcher({showLanguageSwitcher, setShowLanguageSwitcher}) {
});
const languageSwitcherRef = useRef();
- // useClickAway(languageSwitcherRef, () => {
- // setShowLanguageSwitcher(false);
- // });
+ useClickAway(languageSwitcherRef, (e) => {
+ if (e.target.id !== 'language-btn') {
+ setShowLanguageSwitcher(false);
+ }
+ });
const switchLanguage = useCallback(
(languageKey) => {
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index ee148857bc..4b1c3b3d95 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -54,7 +54,11 @@ function Navbar({
return navbarTransition((style, item) => (
<animated.div className="Navbar" {...{style}}>
- <div className="navbar-left" onClick={handleLangaugeSwitcher}>
+ <div
+ className="navbar-left"
+ id="language-btn"
+ onClick={handleLangaugeSwitcher}
+ >
{locales[currentLanguage]}
</div>
From 17874a4db6884aec53a84f0bce5c834775799f3e Mon Sep 17 00:00:00 2001
From: Reverie-PC <reverie-pc@Reverie-IT-ka-MacBook-Pro.local>
Date: Sun, 9 May 2021 23:47:25 +0530
Subject: [PATCH 3/4] solved the negative cases issue and refactored code
---
src/components/MapVisualizer.js | 10 ++++-----
src/components/StateHeader.js | 4 ++--
src/components/StateMeta.js | 36 ++++++++++++++++++++++++---------
src/utils/commonFunctions.js | 16 ++++++++-------
4 files changed, 42 insertions(+), 24 deletions(-)
diff --git a/src/components/MapVisualizer.js b/src/components/MapVisualizer.js
index 167c342a62..68d4fe82f3 100644
--- a/src/components/MapVisualizer.js
+++ b/src/components/MapVisualizer.js
@@ -38,15 +38,15 @@ const [width, height] = [432, 488];
const colorInterpolator = (statistic) => {
switch (statistic) {
- case 'confirmed':
+ case STATISTIC_CONFIGS.confirmed.displayName:
return (t) => interpolateReds(t * 0.85);
- case 'active':
+ case STATISTIC_CONFIGS.active.displayName:
return (t) => interpolateBlues(t * 0.85);
- case 'recovered':
+ case STATISTIC_CONFIGS.recovered.displayName:
return (t) => interpolateGreens(t * 0.85);
- case 'deceased':
+ case STATISTIC_CONFIGS.deceased.displayName:
return (t) => interpolateGreys(t * 0.85);
- case 'tested':
+ case STATISTIC_CONFIGS.tested.displayName:
return (t) => interpolatePurples(t * 0.85);
default:
return (t) => interpolateOranges(t * 0.85);
diff --git a/src/components/StateHeader.js b/src/components/StateHeader.js
index 8393f626a4..6ae96dcf8d 100644
--- a/src/components/StateHeader.js
+++ b/src/components/StateHeader.js
@@ -1,6 +1,6 @@
import StateDropdown from './StateDropdown';
-import {SPRING_CONFIG_NUMBERS} from '../constants.js';
+import {SPRING_CONFIG_NUMBERS, STATISTIC_CONFIGS} from '../constants.js';
import {formatDate, formatNumber, getStatistic} from '../utils/commonFunctions';
import {memo, useMemo} from 'react';
@@ -24,7 +24,7 @@ function StateHeader({data, stateCode}) {
}, []);
const spring = useSpring({
- total: getStatistic(data, 'total', 'tested'),
+ total: getStatistic(data, 'total', STATISTIC_CONFIGS.tested.displayName),
config: SPRING_CONFIG_NUMBERS,
});
diff --git a/src/components/StateMeta.js b/src/components/StateMeta.js
index ef21a8d56d..cce2f548cb 100644
--- a/src/components/StateMeta.js
+++ b/src/components/StateMeta.js
@@ -1,6 +1,6 @@
import StateMetaCard from './StateMetaCard';
-import {STATE_NAMES} from '../constants';
+import {STATE_NAMES, STATISTIC_CONFIGS} from '../constants';
import {
formatDate,
formatNumber,
@@ -25,10 +25,15 @@ function StateMeta({stateCode, data, timeseries}) {
const lastConfirmed = getStatistic(
timeseries?.[lastDate],
'total',
- 'confirmed'
+ STATISTIC_CONFIGS.confirmed.displayName
);
const prevWeekConfirmed =
- lastConfirmed - getStatistic(timeseries?.[lastDate], 'delta7', 'confirmed');
+ lastConfirmed -
+ getStatistic(
+ timeseries?.[lastDate],
+ 'delta7',
+ STATISTIC_CONFIGS.confirmed.displayName
+ );
const prevWeekDate = formatISO(subDays(parseIndiaDate(lastDate), 7));
@@ -38,23 +43,34 @@ function StateMeta({stateCode, data, timeseries}) {
'confirmed',
{perMillion: true}
);
- const testPerMillion = getStatistic(data[stateCode], 'total', 'tested', {
- perMillion: true,
- });
+ const testPerMillion = getStatistic(
+ data[stateCode],
+ 'total',
+ STATISTIC_CONFIGS.tested.displayName,
+ {perMillion: true}
+ );
const totalConfirmedPerMillion = getStatistic(
data['TT'],
'total',
- 'confirmed',
+ STATISTIC_CONFIGS.confirmed.displayName,
{perMillion: true}
);
- const activePercent = getStatistic(data[stateCode], 'total', 'activeRatio');
+ const activePercent = getStatistic(
+ data[stateCode],
+ 'total',
+ STATISTIC_CONFIGS.activeRatio.displayName
+ );
const recoveryPercent = getStatistic(
data[stateCode],
'total',
- 'recoveryRatio'
+ STATISTIC_CONFIGS.recoveryRatio.displayName
+ );
+ const deathPercent = getStatistic(
+ data[stateCode],
+ 'total',
+ STATISTIC_CONFIGS.cfr.displayName
);
- const deathPercent = getStatistic(data[stateCode], 'total', 'cfr');
const growthRate =
(Math.pow(lastConfirmed / prevWeekConfirmed, 1 / 7) - 1) * 100;
diff --git a/src/utils/commonFunctions.js b/src/utils/commonFunctions.js
index 54e9df6ff7..fcce8b387b 100644
--- a/src/utils/commonFunctions.js
+++ b/src/utils/commonFunctions.js
@@ -148,24 +148,25 @@ export const getStatistic = (
}
let count;
- if (key === 'population') {
+ if (key === STATISTIC_CONFIGS.population.displayName) {
count = type === 'total' ? data?.meta?.population : 0;
- } else if (key === 'tested') {
+ } else if (key === STATISTIC_CONFIGS.tested.displayName) {
count = data?.[type]?.tested;
- } else if (key === 'active') {
+ } else if (key === STATISTIC_CONFIGS.active.displayName) {
const confirmed = data?.[type]?.confirmed || 0;
const deceased = data?.[type]?.deceased || 0;
const recovered = data?.[type]?.recovered || 0;
const other = data?.[type]?.other || 0;
count = confirmed - deceased - recovered - other;
+ count = count > 0 ? count : 0;
} else {
- count = data?.[type]?.[key];
+ count = data?.[type]?.[key] > 0 ? data?.[type]?.[key] : 0;
}
if (normalizeBy) {
count /= getStatistic(
data,
- normalizeBy === 'population' ? 'total' : type,
+ normalizeBy === STATISTIC_CONFIGS.population.displayName ? 'total' : type,
normalizeBy
);
}
@@ -177,8 +178,9 @@ export const getTableStatistic = (data, statistic, args, lastUpdatedTT) => {
const statisticDefinition = STATISTIC_CONFIGS[statistic]?.definition;
const expired =
- (statisticDefinition?.key === 'tested' ||
- statisticDefinition?.normalizeByKey === 'tested') &&
+ (statisticDefinition?.key === STATISTIC_CONFIGS.tested.displayName ||
+ statisticDefinition?.normalizeByKey ===
+ STATISTIC_CONFIGS.tested.displayName) &&
differenceInDays(
lastUpdatedTT,
parseIndiaDate(data.meta?.tested?.['last_updated'])
From d6a004391c0af309cfa08703dd0760e8de6c0d3b Mon Sep 17 00:00:00 2001
From: Reverie-PC <reverie-pc@Reverie-IT-ka-MacBook-Pro.local>
Date: Mon, 10 May 2021 00:10:17 +0530
Subject: [PATCH 4/4] solved the negative active cases issue and refactored
code
---
src/components/MapVisualizer.js | 10 ++++-----
src/components/StateHeader.js | 4 ++--
src/components/StateMeta.js | 36 ++++++++++++++++++++++++---------
src/utils/commonFunctions.js | 16 ++++++++-------
4 files changed, 42 insertions(+), 24 deletions(-)
diff --git a/src/components/MapVisualizer.js b/src/components/MapVisualizer.js
index 167c342a62..68d4fe82f3 100644
--- a/src/components/MapVisualizer.js
+++ b/src/components/MapVisualizer.js
@@ -38,15 +38,15 @@ const [width, height] = [432, 488];
const colorInterpolator = (statistic) => {
switch (statistic) {
- case 'confirmed':
+ case STATISTIC_CONFIGS.confirmed.displayName:
return (t) => interpolateReds(t * 0.85);
- case 'active':
+ case STATISTIC_CONFIGS.active.displayName:
return (t) => interpolateBlues(t * 0.85);
- case 'recovered':
+ case STATISTIC_CONFIGS.recovered.displayName:
return (t) => interpolateGreens(t * 0.85);
- case 'deceased':
+ case STATISTIC_CONFIGS.deceased.displayName:
return (t) => interpolateGreys(t * 0.85);
- case 'tested':
+ case STATISTIC_CONFIGS.tested.displayName:
return (t) => interpolatePurples(t * 0.85);
default:
return (t) => interpolateOranges(t * 0.85);
diff --git a/src/components/StateHeader.js b/src/components/StateHeader.js
index 8393f626a4..6ae96dcf8d 100644
--- a/src/components/StateHeader.js
+++ b/src/components/StateHeader.js
@@ -1,6 +1,6 @@
import StateDropdown from './StateDropdown';
-import {SPRING_CONFIG_NUMBERS} from '../constants.js';
+import {SPRING_CONFIG_NUMBERS, STATISTIC_CONFIGS} from '../constants.js';
import {formatDate, formatNumber, getStatistic} from '../utils/commonFunctions';
import {memo, useMemo} from 'react';
@@ -24,7 +24,7 @@ function StateHeader({data, stateCode}) {
}, []);
const spring = useSpring({
- total: getStatistic(data, 'total', 'tested'),
+ total: getStatistic(data, 'total', STATISTIC_CONFIGS.tested.displayName),
config: SPRING_CONFIG_NUMBERS,
});
diff --git a/src/components/StateMeta.js b/src/components/StateMeta.js
index ef21a8d56d..cce2f548cb 100644
--- a/src/components/StateMeta.js
+++ b/src/components/StateMeta.js
@@ -1,6 +1,6 @@
import StateMetaCard from './StateMetaCard';
-import {STATE_NAMES} from '../constants';
+import {STATE_NAMES, STATISTIC_CONFIGS} from '../constants';
import {
formatDate,
formatNumber,
@@ -25,10 +25,15 @@ function StateMeta({stateCode, data, timeseries}) {
const lastConfirmed = getStatistic(
timeseries?.[lastDate],
'total',
- 'confirmed'
+ STATISTIC_CONFIGS.confirmed.displayName
);
const prevWeekConfirmed =
- lastConfirmed - getStatistic(timeseries?.[lastDate], 'delta7', 'confirmed');
+ lastConfirmed -
+ getStatistic(
+ timeseries?.[lastDate],
+ 'delta7',
+ STATISTIC_CONFIGS.confirmed.displayName
+ );
const prevWeekDate = formatISO(subDays(parseIndiaDate(lastDate), 7));
@@ -38,23 +43,34 @@ function StateMeta({stateCode, data, timeseries}) {
'confirmed',
{perMillion: true}
);
- const testPerMillion = getStatistic(data[stateCode], 'total', 'tested', {
- perMillion: true,
- });
+ const testPerMillion = getStatistic(
+ data[stateCode],
+ 'total',
+ STATISTIC_CONFIGS.tested.displayName,
+ {perMillion: true}
+ );
const totalConfirmedPerMillion = getStatistic(
data['TT'],
'total',
- 'confirmed',
+ STATISTIC_CONFIGS.confirmed.displayName,
{perMillion: true}
);
- const activePercent = getStatistic(data[stateCode], 'total', 'activeRatio');
+ const activePercent = getStatistic(
+ data[stateCode],
+ 'total',
+ STATISTIC_CONFIGS.activeRatio.displayName
+ );
const recoveryPercent = getStatistic(
data[stateCode],
'total',
- 'recoveryRatio'
+ STATISTIC_CONFIGS.recoveryRatio.displayName
+ );
+ const deathPercent = getStatistic(
+ data[stateCode],
+ 'total',
+ STATISTIC_CONFIGS.cfr.displayName
);
- const deathPercent = getStatistic(data[stateCode], 'total', 'cfr');
const growthRate =
(Math.pow(lastConfirmed / prevWeekConfirmed, 1 / 7) - 1) * 100;
diff --git a/src/utils/commonFunctions.js b/src/utils/commonFunctions.js
index 54e9df6ff7..fcce8b387b 100644
--- a/src/utils/commonFunctions.js
+++ b/src/utils/commonFunctions.js
@@ -148,24 +148,25 @@ export const getStatistic = (
}
let count;
- if (key === 'population') {
+ if (key === STATISTIC_CONFIGS.population.displayName) {
count = type === 'total' ? data?.meta?.population : 0;
- } else if (key === 'tested') {
+ } else if (key === STATISTIC_CONFIGS.tested.displayName) {
count = data?.[type]?.tested;
- } else if (key === 'active') {
+ } else if (key === STATISTIC_CONFIGS.active.displayName) {
const confirmed = data?.[type]?.confirmed || 0;
const deceased = data?.[type]?.deceased || 0;
const recovered = data?.[type]?.recovered || 0;
const other = data?.[type]?.other || 0;
count = confirmed - deceased - recovered - other;
+ count = count > 0 ? count : 0;
} else {
- count = data?.[type]?.[key];
+ count = data?.[type]?.[key] > 0 ? data?.[type]?.[key] : 0;
}
if (normalizeBy) {
count /= getStatistic(
data,
- normalizeBy === 'population' ? 'total' : type,
+ normalizeBy === STATISTIC_CONFIGS.population.displayName ? 'total' : type,
normalizeBy
);
}
@@ -177,8 +178,9 @@ export const getTableStatistic = (data, statistic, args, lastUpdatedTT) => {
const statisticDefinition = STATISTIC_CONFIGS[statistic]?.definition;
const expired =
- (statisticDefinition?.key === 'tested' ||
- statisticDefinition?.normalizeByKey === 'tested') &&
+ (statisticDefinition?.key === STATISTIC_CONFIGS.tested.displayName ||
+ statisticDefinition?.normalizeByKey ===
+ STATISTIC_CONFIGS.tested.displayName) &&
differenceInDays(
lastUpdatedTT,
parseIndiaDate(data.meta?.tested?.['last_updated'])