Improv: Add intersection observer in Home.

swarad07 · May 3, 2020 · 129aeba · 129aeba
1 parent 062ebac
commit 129aeba
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@juggle/resize-observer": "^3.1.3",
     "@material-ui/core": "^4.9.12",
     "@primer/components": "^18.1.1",
+    "@researchgate/react-intersection-observer": "^1.1.3",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^10.0.4",
     "animejs": "^3.2.0",
@@ -19,7 +20,6 @@
     "date-fns-tz": "^1.0.10",
     "deepmerge": "^4.2.2",
     "fast-deep-equal": "^3.1.1",
-    "immer": "^6.0.3",
     "node-sass": "^4.14.0",
     "react": "^16.13.1",
     "react-chartjs-2": "^2.9.0",
@@ -36,8 +36,7 @@
     "react-use": "^14.2.0",
     "source-map-explorer": "^2.4.2",
     "styled-components": "^5.1.0",
-    "topojson": "^3.0.2",
-    "underscore": "^1.10.2"
+    "topojson": "^3.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -25,10 +25,18 @@
       content="A volunteer-driven crowdsourced effort to track the coronavirus in India. A detailed country map shows the extent of the coronavirus outbreak, with tables of the number of cases by state and district."
     />
 
-    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
-    <link rel="preconnect" href="https://api.covid19india.org/">
-    <link rel="preconnect" href="https://www.googletagmanager.com/" crossorigin>
-
+    <link
+      rel="preconnect"
+      href="https://www.google-analytics.com"
+      crossorigin
+    />
+    <link rel="preconnect" href="https://api.covid19india.org/" />
+    <link
+      rel="preconnect"
+      href="https://www.googletagmanager.com/"
+      crossorigin
+    />
+
     <!-- Font Preloading -->
     <link
       rel="preload"
@@ -111,7 +119,10 @@
       property="og:description"
       content="A volunteer-driven crowdsourced effort to track the coronavirus in India. A detailed country map shows the extent of the coronavirus outbreak, with tables of the number of cases by state and district."
     />
-    <meta property="og:image" content="https://www.covid19india.org/thumbnail.png" />
+    <meta
+      property="og:image"
+      content="https://www.covid19india.org/thumbnail.png"
+    />
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:width" content="512" />
     <meta property="og:image:height" content="512" />
@@ -128,7 +139,10 @@
       property="twitter:description"
       content="A volunteer-driven crowdsourced effort to track the coronavirus in India. A detailed country map shows the extent of the coronavirus outbreak, with tables of the number of cases by state and district."
     />
-    <meta property="twitter:image" content="https://www.covid19india.org/thumbnail.png" />
+    <meta
+      property="twitter:image"
+      content="https://www.covid19india.org/thumbnail.png"
+    />
   </head>
 
   <body>

diff --git a/src/App.scss b/src/App.scss
@@ -260,6 +260,7 @@ h6 {
   .home-right {
     margin-left: 2.5rem;
     margin-right: 2.5rem;
+    min-height: 10rem;
   }
 }
 

diff --git a/src/components/home.js b/src/components/home.js
@@ -18,23 +18,25 @@ import {
   parseTotalTestTimeseries,
 } from '../utils/commonfunctions';
 
+import Observer from '@researchgate/react-intersection-observer';
 import axios from 'axios';
 import React, {useState, useCallback, useMemo} from 'react';
 import * as Icon from 'react-feather';
 import {Helmet} from 'react-helmet';
 import {useEffectOnce, useLocalStorage} from 'react-use';
 
 function Home(props) {
-  const [states, setStates] = useState([]);
-  const [stateDistrictWiseData, setStateDistrictWiseData] = useState({});
-  const [stateTestData, setStateTestData] = useState({});
+  const [states, setStates] = useState(null);
+  const [stateDistrictWiseData, setStateDistrictWiseData] = useState(null);
+  const [stateTestData, setStateTestData] = useState(null);
   const [lastUpdated, setLastUpdated] = useState('');
-  const [timeseries, setTimeseries] = useState({});
+  const [timeseries, setTimeseries] = useState(null);
   const [fetched, setFetched] = useState(false);
   const [regionHighlighted, setRegionHighlighted] = useState(undefined);
   const [showUpdates, setShowUpdates] = useState(false);
   const [anchor, setAnchor] = useState(null);
   const [mapOption, setMapOption] = useState('confirmed');
+  const [isIntersecting, setIsIntersecting] = useState(false);
 
   const [lastViewedLog, setLastViewedLog] = useLocalStorage(
     'lastViewedLog',
@@ -89,15 +91,17 @@ function Home(props) {
 
   const getStates = async () => {
     try {
+      const [{data: statesDailyResponse}] = await Promise.all([
+        axios.get('https://api.covid19india.org/states_daily.json'),
+      ]);
+
       const [
         {data},
         stateDistrictWiseResponse,
-        {data: statesDailyResponse},
         {data: stateTestData},
       ] = await Promise.all([
         axios.get('https://api.covid19india.org/data.json'),
         axios.get('https://api.covid19india.org/state_district_wise.json'),
-        axios.get('https://api.covid19india.org/states_daily.json'),
         axios.get('https://api.covid19india.org/state_test_data.json'),
       ]);
 
@@ -142,6 +146,14 @@ function Home(props) {
     setRegionHighlighted({district, state});
   }, []);
 
+  const handleIntersection = ({isIntersecting}) => {
+    setIsIntersecting(isIntersecting);
+  };
+
+  const options = {
+    rootMargin: '0px 0px 0px 0px',
+  };
+
   return (
     <React.Fragment>
       <div className="Home">
@@ -175,9 +187,9 @@ function Home(props) {
 
           {showUpdates && <Updates />}
 
-          {fetched && <Level data={states[0]} />}
-          {fetched && <Minigraph timeseries={timeseries['TT']} />}
-          {fetched && (
+          {states && <Level data={states[0]} />}
+          {timeseries && <Minigraph timeseries={timeseries['TT']} />}
+          {stateDistrictWiseData && (
             <Table
               states={states}
               summary={false}
@@ -189,23 +201,25 @@ function Home(props) {
           )}
         </div>
 
-        <div className="home-right">
-          {fetched && (
+        <Observer options={options} onChange={handleIntersection}>
+          <div className="home-right">
             <React.Fragment>
-              <MapExplorer
-                mapMeta={MAP_META.India}
-                states={states}
-                districts={stateDistrictWiseData}
-                stateTestData={stateTestData}
-                regionHighlighted={regionHighlighted}
-                isCountryLoaded={true}
-                anchor={anchor}
-                setAnchor={setAnchor}
-                mapOption={mapOption}
-                setMapOption={setMapOption}
-              />
-
-              {fetched && (
+              {stateTestData && isIntersecting && (
+                <MapExplorer
+                  mapMeta={MAP_META.India}
+                  states={states}
+                  districts={stateDistrictWiseData}
+                  stateTestData={stateTestData}
+                  regionHighlighted={regionHighlighted}
+                  isCountryLoaded={true}
+                  anchor={anchor}
+                  setAnchor={setAnchor}
+                  mapOption={mapOption}
+                  setMapOption={setMapOption}
+                />
+              )}
+
+              {timeseries && isIntersecting && (
                 <TimeSeriesExplorer
                   timeseries={timeseries[regionHighlighted?.state.code || 'TT']}
                   activeStateCode={regionHighlighted?.state.code || 'TT'}
@@ -216,8 +230,8 @@ function Home(props) {
                 />
               )}
             </React.Fragment>
-          )}
-        </div>
+          </div>
+        </Observer>
       </div>
       {fetched && <Footer />}
     </React.Fragment>