From 79d8186fa72c6502c1f87167411dc087aa6df2b7 Mon Sep 17 00:00:00 2001 From: Kautilya Date: Sun, 12 Apr 2020 19:05:20 -0400 Subject: [PATCH 1/4] (Bug) Total Tested cases - Got the number working but can't figure how to update the state with div class. - Printing the numbers in console. --- src/components/mapexplorer.js | 38 +++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/components/mapexplorer.js b/src/components/mapexplorer.js index 4ef33d7dbb..c729f6d066 100644 --- a/src/components/mapexplorer.js +++ b/src/components/mapexplorer.js @@ -380,12 +380,49 @@ function MapExplorer({ const {name, lastupdatedtime} = currentHoveredRegion; + function getCurrentDate() { + const date = new Date(); + let getMonth = String(date.getMonth() + 1); + if (getMonth.length === 1) { + getMonth = '0' + getMonth; + } + const dateComp = date.getDate() + '/' + getMonth + '/' + date.getFullYear(); + return dateComp; + } + + // var formatValue; + // function formatNumberInternal(formatValue) { + // let value = formatNumber(formatValue); + // console.log('VAlue of formatNumber', value); + // return value != '-' ? value : total; + // } + + const [total, setTotal] = useState({}); + let totalTemp = 0; + useEffect(() => { + const testDataFind = stateTestData.filter( + (obj) => obj.totaltested !== '' && obj.updatedon === getCurrentDate() + ); + + const totalTMap = testDataFind.map((value) => value.totaltested); + totalTMap.forEach((element) => { + // eslint-disable-next-line + totalTemp += Number(element); + }); + + console.log('Printing total value', total); + setTotal(totalTemp); + console.log('Printing total value after', total); setTestObj( stateTestData.find( (obj) => obj.state === panelRegion.name && obj.totaltested !== '' ) ); + console.log('total Indians tested ended', total); + + console.log('total Indians tested ended', totalTemp); + // testObj?['totaltested'] = total; }, [panelRegion, stateTestData, testObj]); return ( @@ -453,6 +490,7 @@ function MapExplorer({
{window.innerWidth <= 769 ? 'Tested' : 'Tested'}

{formatNumber(testObj?.totaltested)}

+ {/*

{total}

*/}
{!isNaN(new Date(testObj?.updatedon)) From 971cf1634b06e3e5cc2ef7f38db1d867d9f2b593 Mon Sep 17 00:00:00 2001 From: Kautilya Date: Sun, 12 Apr 2020 19:17:35 -0400 Subject: [PATCH 2/4] (chore) Removed unneccessary code comments. Still don't know how to display the calculated data dynamically when function formatNumber is being called & returned '-' to replace it with my generated total numbers. --- src/components/mapexplorer.js | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/src/components/mapexplorer.js b/src/components/mapexplorer.js index c729f6d066..0f7a1807b7 100644 --- a/src/components/mapexplorer.js +++ b/src/components/mapexplorer.js @@ -256,6 +256,8 @@ function MapExplorer({ onMapHighlightChange, }) { const [selectedRegion, setSelectedRegion] = useState({}); + const [total, setTotal] = useState({}); + let totalTemp = 0; const [panelRegion, setPanelRegion] = useState(getRegionFromState(states[0])); const [currentHoveredRegion, setCurrentHoveredRegion] = useState( getRegionFromState(states[0]) @@ -390,16 +392,6 @@ function MapExplorer({ return dateComp; } - // var formatValue; - // function formatNumberInternal(formatValue) { - // let value = formatNumber(formatValue); - // console.log('VAlue of formatNumber', value); - // return value != '-' ? value : total; - // } - - const [total, setTotal] = useState({}); - let totalTemp = 0; - useEffect(() => { const testDataFind = stateTestData.filter( (obj) => obj.totaltested !== '' && obj.updatedon === getCurrentDate() @@ -411,18 +403,13 @@ function MapExplorer({ totalTemp += Number(element); }); - console.log('Printing total value', total); setTotal(totalTemp); - console.log('Printing total value after', total); setTestObj( stateTestData.find( (obj) => obj.state === panelRegion.name && obj.totaltested !== '' ) ); - console.log('total Indians tested ended', total); - - console.log('total Indians tested ended', totalTemp); - // testObj?['totaltested'] = total; + console.log('total Indians tested', total); }, [panelRegion, stateTestData, testObj]); return ( From 65e3208799a1136126f5d400e000312289751795 Mon Sep 17 00:00:00 2001 From: Kautilya Date: Wed, 15 Apr 2020 16:20:13 -0400 Subject: [PATCH 3/4] (refactor)JS reduce: function --- src/components/mapexplorer.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/mapexplorer.js b/src/components/mapexplorer.js index dcb1a9e03c..90ef920edd 100644 --- a/src/components/mapexplorer.js +++ b/src/components/mapexplorer.js @@ -257,7 +257,7 @@ function MapExplorer({ }) { const [selectedRegion, setSelectedRegion] = useState({}); const [total, setTotal] = useState({}); - let totalTemp = 0; + const reducer = (accumulator, currentValue) => (accumulator += currentValue); const [panelRegion, setPanelRegion] = useState(getRegionFromState(states[0])); const [currentHoveredRegion, setCurrentHoveredRegion] = useState( getRegionFromState(states[0]) @@ -398,19 +398,15 @@ function MapExplorer({ ); const totalTMap = testDataFind.map((value) => value.totaltested); - totalTMap.forEach((element) => { - // eslint-disable-next-line - totalTemp += Number(element); - }); + setTotal(totalTMap.map(Number).reduce(reducer)); - setTotal(totalTemp); setTestObj( stateTestData.find( (obj) => obj.state === panelRegion.name && obj.totaltested !== '' ) ); - console.log('total Indians tested', total); - }, [panelRegion, stateTestData, testObj]); + console.log('Total Indians Tested:', total); + }, [panelRegion, stateTestData, testObj, total]); return (
{window.innerWidth <= 769 ? 'Tested' : 'Tested'}

{formatNumber(testObj?.totaltested)}

- {/*

{total}

*/} + {/*

{formatNumber(total)}

*/}
{!isNaN(new Date(testObj?.updatedon)) From 6674d89b4e86e05a78b7ed5cddb625c23a57d281 Mon Sep 17 00:00:00 2001 From: Kautilya Date: Thu, 16 Apr 2020 13:14:28 -0400 Subject: [PATCH 4/4] (refactor)Padding: function --- src/components/mapexplorer.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/mapexplorer.js b/src/components/mapexplorer.js index 90ef920edd..d86b2c61be 100644 --- a/src/components/mapexplorer.js +++ b/src/components/mapexplorer.js @@ -384,11 +384,14 @@ function MapExplorer({ function getCurrentDate() { const date = new Date(); - let getMonth = String(date.getMonth() + 1); - if (getMonth.length === 1) { - getMonth = '0' + getMonth; - } - const dateComp = date.getDate() + '/' + getMonth + '/' + date.getFullYear(); + const getMonth = String(date.getMonth() + 1); + + const dateComp = + date.getDate() + + '/' + + getMonth.padStart(2, '0') + + '/' + + date.getFullYear(); return dateComp; }