Merge branch 'master' of https://github.com/covid19india/covid19india…

…-react into feat/theme-overhaul
covid19india · Jul 6, 2020 · 226ae45 · 226ae45
2 parents 09b75f0 + 820a523
commit 226ae45
Show file tree

Hide file tree

Showing 14 changed files with 298 additions and 232 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -2660,6 +2660,8 @@ abbr {
     max-width: calc(100% - 0.6rem);
 
     .dropdown {
+      min-width: calc(60%);
+
       select {
         appearance: none;
         background-color: #eee;
@@ -2685,6 +2687,7 @@ abbr {
     }
 
     .reset-icon {
+      margin: auto;
       margin-left: 0.75rem;
       margin-top: 0.5rem;
 

diff --git a/src/components/About.js b/src/components/About.js
@@ -1,3 +1,5 @@
+import Footer from './Footer';
+
 import React, {useState, useEffect} from 'react';
 import {Helmet} from 'react-helmet';
 
@@ -29,30 +31,35 @@ function About(props) {
   };
 
   return (
-    <div className="About">
+    <React.Fragment>
       <Helmet>
         <title>FAQ - covid19india.org</title>
         <meta
           name="title"
           content="Coronavirus Outbreak in India: Latest Map and Case Count"
         />
       </Helmet>
-      {faq.map((faq, index) => {
-        return (
-          <div
-            key={index}
-            className="faq fadeInUp"
-            style={{animationDelay: `${0.5 + index * 0.1}s`}}
-          >
-            <h2 className="question">{faq.question}</h2>
-            <h2
-              className="answer"
-              dangerouslySetInnerHTML={{__html: faq.answer}}
-            ></h2>
-          </div>
-        );
-      })}
-    </div>
+
+      <div className="About">
+        {faq.map((faq, index) => {
+          return (
+            <div
+              key={index}
+              className="faq fadeInUp"
+              style={{animationDelay: `${0.5 + index * 0.1}s`}}
+            >
+              <h2 className="question">{faq.question}</h2>
+              <h2
+                className="answer"
+                dangerouslySetInnerHTML={{__html: faq.answer}}
+              ></h2>
+            </div>
+          );
+        })}
+      </div>
+
+      <Footer />
+    </React.Fragment>
   );
 }
 

diff --git a/src/components/Cell.js b/src/components/Cell.js
@@ -6,7 +6,11 @@ import React from 'react';
 import {Spring, animated} from 'react-spring/renderprops.cjs';
 
 const Cell = ({statistic, data, isPerMillion}) => {
-  const total = getStatistic(data, 'total', statistic, isPerMillion);
+  let total = getStatistic(data, 'total', statistic, isPerMillion);
+  // TODO: Maybe move inside getStatistic
+  if (!total && statistic === 'tested') {
+    total = NaN;
+  }
   const delta = getStatistic(data, 'delta', statistic, isPerMillion);
 
   return (

diff --git a/src/components/DeltaBarGraph.js b/src/components/DeltaBarGraph.js
@@ -48,11 +48,11 @@ function DeltaBarGraph({timeseries, statistic, lookback}) {
       .domain([
         Math.min(
           0,
-          min(dates, (date) => getDeltaStatistic(timeseries[date], statistic))
+          min(dates, (date) => getDeltaStatistic(timeseries?.[date], statistic))
         ),
         Math.max(
           1,
-          max(dates, (date) => getDeltaStatistic(timeseries[date], statistic))
+          max(dates, (date) => getDeltaStatistic(timeseries?.[date], statistic))
         ),
       ])
       .range([chartBottom, margin.top]);
@@ -72,7 +72,7 @@ function DeltaBarGraph({timeseries, statistic, lookback}) {
       .selectAll('text')
       .attr('y', 0)
       .attr('dy', (date, i) =>
-        getDeltaStatistic(timeseries[date], statistic) < 0 ? '-1em' : '1.5em'
+        getDeltaStatistic(timeseries?.[date], statistic) < 0 ? '-1em' : '1.5em'
       )
       .style('text-anchor', 'middle')
       .attr('fill', COLORS[statistic]);
@@ -94,7 +94,7 @@ function DeltaBarGraph({timeseries, statistic, lookback}) {
           xScale(date),
           yScale(0),
           xScale.bandwidth(),
-          yScale(0) - yScale(getDeltaStatistic(timeseries[date], statistic)),
+          yScale(0) - yScale(getDeltaStatistic(timeseries?.[date], statistic)),
           r
         )
       )
@@ -111,14 +111,14 @@ function DeltaBarGraph({timeseries, statistic, lookback}) {
       .attr('class', 'label')
       .attr('x', (date) => xScale(date) + xScale.bandwidth() / 2)
       .text((date) =>
-        formatNumber(getDeltaStatistic(timeseries[date], statistic))
+        formatNumber(getDeltaStatistic(timeseries?.[date], statistic))
       );
 
     textSelection
       .transition(t)
       .attr('fill', COLORS[statistic])
       .attr('y', (date) => {
-        const val = getDeltaStatistic(timeseries[date], statistic);
+        const val = getDeltaStatistic(timeseries?.[date], statistic);
         return yScale(val) + (val < 0 ? 15 : -6);
       });
 
@@ -127,14 +127,20 @@ function DeltaBarGraph({timeseries, statistic, lookback}) {
       .attr(
         'dy',
         (date) =>
-          `${getDeltaStatistic(timeseries[date], statistic) < 0 ? 1.2 : -1.2}em`
+          `${
+            getDeltaStatistic(timeseries?.[date], statistic) < 0 ? 1.2 : -1.2
+          }em`
       )
       .attr('x', (date) => xScale(date) + xScale.bandwidth() / 2)
       .text((date, i) => {
         if (i === 0) return '';
-        const prevVal = getDeltaStatistic(timeseries[dates[i - 1]], statistic);
+        const prevVal = getDeltaStatistic(
+          timeseries?.[dates[i - 1]],
+          statistic
+        );
         if (!prevVal) return '';
-        const delta = getDeltaStatistic(timeseries[date], statistic) - prevVal;
+        const delta =
+          getDeltaStatistic(timeseries?.[date], statistic) - prevVal;
         return `${delta > 0 ? '+' : ''}${formatNumber(
           (100 * delta) / Math.abs(prevVal)
         )}%`;
@@ -160,15 +166,19 @@ function DeltaBarGraph({timeseries, statistic, lookback}) {
 }
 
 const isEqual = (prevProps, currProps) => {
-  if (!equal(prevProps.stateCode, currProps.stateCode)) {
+  if (currProps.forceRender) {
     return false;
-  }
-  if (!equal(prevProps.lookback, currProps.lookback)) {
+  } else if (!currProps.timeseries && prevProps.timeseries) {
+    return true;
+  } else if (currProps.timeseries && !prevProps.timeseries) {
+    return false;
+  } else if (!equal(prevProps.stateCode, currProps.stateCode)) {
+    return false;
+  } else if (!equal(prevProps.lookback, currProps.lookback)) {
     return false;
   } else if (!equal(prevProps.statistic, currProps.statistic)) {
     return false;
   }
-
   return true;
 };
 

diff --git a/src/components/Home.js b/src/components/Home.js
@@ -1,4 +1,4 @@
-import {MAP_META} from '../constants';
+import {API_ROOT_URL} from '../constants';
 import useIsVisible from '../hooks/useIsVisible';
 import useStickySWR from '../hooks/useStickySWR';
 import {fetcher} from '../utils/commonFunctions';
@@ -34,7 +34,7 @@ function Home(props) {
   const location = useLocation();
 
   const {data: timeseries} = useStickySWR(
-    'https://api.covid19india.org/v3/min/timeseries.min.json',
+    `${API_ROOT_URL}/timeseries.min.json`,
     fetcher,
     {
       revalidateOnMount: true,
@@ -43,9 +43,7 @@ function Home(props) {
   );
 
   const {data} = useStickySWR(
-    `https://api.covid19india.org/v3/min/data${
-      date ? `-${date}` : ''
-    }.min.json`,
+    `${API_ROOT_URL}/data${date ? `-${date}` : ''}.min.json`,
     fetcher,
     {
       revalidateOnMount: true,
@@ -57,16 +55,6 @@ function Home(props) {
   const isVisible = useIsVisible(homeRightElement);
   const {width} = useWindowSize();
 
-  const stateCodes = [
-    'TT',
-    ...[
-      ...new Set([
-        ...Object.keys(MAP_META).filter((stateCode) => stateCode !== 'TT'),
-        ...Object.keys(data || {}).filter((stateCode) => stateCode !== 'TT'),
-      ]),
-    ].sort(),
-  ];
-
   return (
     <React.Fragment>
       <Helmet>
@@ -89,7 +77,7 @@ function Home(props) {
                 <Actions
                   {...{
                     setDate,
-                    dates: Object.keys(timeseries['TT']).reverse(),
+                    dates: Object.keys(timeseries['TT']?.dates).reverse(),
                     date,
                   }}
                 />
@@ -109,7 +97,7 @@ function Home(props) {
 
             {timeseries && (
               <Suspense fallback={<div style={{height: '50rem'}} />}>
-                <Minigraphs timeseries={timeseries['TT']} {...{date}} />
+                <Minigraphs timeseries={timeseries['TT']?.dates} {...{date}} />
               </Suspense>
             )}
           </div>
@@ -140,10 +128,15 @@ function Home(props) {
               {timeseries && (
                 <Suspense fallback={<div />}>
                   <TimeseriesExplorer
-                    timeseries={timeseries[regionHighlighted.stateCode]}
-                    {...{date, stateCodes}}
-                    {...{regionHighlighted, setRegionHighlighted}}
-                    {...{anchor, setAnchor}}
+                    stateCode="TT"
+                    {...{
+                      timeseries,
+                      date,
+                      regionHighlighted,
+                      setRegionHighlighted,
+                      anchor,
+                      setAnchor,
+                    }}
                   />
                 </Suspense>
               )}

diff --git a/src/components/Minigraphs.js b/src/components/Minigraphs.js
@@ -171,7 +171,13 @@ function Minigraphs({timeseries, date: timelineDate}) {
 }
 
 const isEqual = (prevProps, currProps) => {
-  if (!equal(currProps.stateCode, prevProps.stateCode)) {
+  if (currProps.forceRender) {
+    return false;
+  } else if (!currProps.timeseries && prevProps.timeseries) {
+    return true;
+  } else if (currProps.timeseries && !prevProps.timeseries) {
+    return false;
+  } else if (!equal(currProps.stateCode, prevProps.stateCode)) {
     return false;
   } else if (!equal(currProps.date, prevProps.date)) {
     return false;

diff --git a/src/components/Row.js b/src/components/Row.js
@@ -27,7 +27,7 @@ import React, {useState, useCallback, useRef} from 'react';
 import {Info} from 'react-feather';
 import {useTranslation} from 'react-i18next';
 import {useHistory} from 'react-router-dom';
-import {useLocalStorage} from 'react-use';
+import {useSessionStorage} from 'react-use';
 
 function Row({
   data,
@@ -38,7 +38,7 @@ function Row({
   setRegionHighlighted,
 }) {
   const [showDistricts, setShowDistricts] = useState(false);
-  const [sortData, setSortData] = useLocalStorage('districtSortData', {
+  const [sortData, setSortData] = useSessionStorage('districtSortData', {
     sortColumn: 'confirmed',
     isAscending: false,
     delta: false,
@@ -64,31 +64,21 @@ function Row({
   const sortingFunction = useCallback(
     (districtNameA, districtNameB) => {
       if (sortData.sortColumn !== 'districtName') {
+        const statisticA = getStatistic(
+          data.districts[districtNameA],
+          sortData.delta ? 'delta' : 'total',
+          sortData.sortColumn,
+          isPerMillion
+        );
+        const statisticB = getStatistic(
+          data.districts[districtNameB],
+          sortData.delta ? 'delta' : 'total',
+          sortData.sortColumn,
+          isPerMillion
+        );
         return sortData.isAscending
-          ? getStatistic(
-              data.districts[districtNameA],
-              'total',
-              sortData.sortColumn,
-              isPerMillion
-            ) -
-              getStatistic(
-                data.districts[districtNameB],
-                'total',
-                sortData.sortColumn,
-                isPerMillion
-              )
-          : getStatistic(
-              data.districts[districtNameB],
-              'total',
-              sortData.sortColumn,
-              isPerMillion
-            ) -
-              getStatistic(
-                data.districts[districtNameA],
-                'total',
-                sortData.sortColumn,
-                isPerMillion
-              );
+          ? statisticA - statisticB
+          : statisticB - statisticA;
       } else {
         return sortData.isAscending
           ? districtNameA.localeCompare(districtNameB)