stop ddossing me lol

package.json

@@ -18,6 +18,7 @@
     "react-dom": "^16.11.0",
     "react-extras": "^1.0.1",
     "react-ga": "^2.7.0",
+    "react-intersection-observer": "^9.13.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
     "short-time-ago": "^2.0.0",

src/components/auth.js

@@ -25,6 +25,7 @@ function decodeToken(store, data) {
       json: true
     }
   });
+
   console.log('Logged in successfuly', token);
 
   store.setState({

src/components/pages/match-history/match.jsx

@@ -16,12 +16,20 @@ import HelpIcon from "@material-ui/icons/Help";
 
 import { timeAgo } from "short-time-ago";
 
+import { useInView } from 'react-intersection-observer';
+
 import { useUserState } from "../../auth";
 import HeroIcon, {heroName} from '../../hero-icon';
 import { getMatch } from "../../../api/match";
 import { CloudDownload } from "@material-ui/icons";
 
 export default function Match({ matchId }) {
+  const { ref, inView, entry } = useInView({
+    triggerOnce: true,
+    delay: 500,
+    threshold: 1
+  });
+  const [shouldLoad, setShouldLoad] = useState(inView);
   const [matchData, setMatchData] = useState(null);
   const [{ user }] = useUserState();
 
@@ -31,12 +39,20 @@ export default function Match({ matchId }) {
 
       setMatchData(await userData);
     }
-    fetchData();
-  }, []);
+    if (shouldLoad) {
+      fetchData();
+    }
+  }, [shouldLoad]);
+
+  useEffect(() => {
+    if (!shouldLoad && inView) {
+      setShouldLoad(true);
+    }
+  }, [inView]);
 
   if (!matchData) {
     return (
-      <Grid container>
+      <Grid container ref={ref}>
         <Grid item xs={1}>
           <CloudDownloadIcon />
         </Grid>
@@ -51,15 +67,13 @@ export default function Match({ matchId }) {
 
   const startDate = matchData.startTime.substr(0, 8);
   const startTime = matchData.startTime.substr(8);
-  console.log(startDate, startTime);
 
   const wasOnDire = matchData.teams.dire.indexOf(user.steamid) >= 0;
   const teamName = wasOnDire ? "dire" : "radiant";
   const didWin = matchData.outcome === teamName;
 
   const myHeroPick = matchData.heroPicks[user.steamid];
   const myHeroName = myHeroPick ? myHeroPick.hero.substr(14) : null;
-  console.log(myHeroPick);
   // https://cdn.akamai.steamstatic.com/apps/dota2/images/dota_react/heroes/abaddon.png
 
   const randomText = myHeroPick && (myHeroPick.rerandom ? "Rerandomed" : (myHeroPick.random ? "Randomed" : ""));
@@ -77,7 +91,7 @@ export default function Match({ matchId }) {
   }
 
   return (
-    <Grid container>
+    <Grid container ref={ref}>
       <Grid item xs={2} sm={2} md={1}>
         {(new Date(startDate)).toLocaleDateString()}
       </Grid>
@@ -101,14 +115,14 @@ export default function Match({ matchId }) {
           </>
         )}
       </Grid>
-      <Grid item xs={12} md={7}>
+      <Grid item xs={12} md={7} style={{  }}>
         {Object.keys(matchData.heroPicks).length > 0 && (
-          <div style={{ display: 'flex', wordWrap: 'no-wrap', }}>
+          <div style={{ display: 'flex', wordWrap: 'no-wrap', flexGrow: 1, justifyContent: 'center' }}>
             <div style={{ textAlign: 'center' }}>
             {matchData.teams.radiant.map((steamid) => {
               const pick = matchData.heroPicks[steamid];
               if (pick) {
-                return <HeroIcon height={24} hero={pick.hero} />
+                return <HeroIcon key={steamid} height={24} hero={pick.hero} />
               }
               return null;
             })}
@@ -120,7 +134,7 @@ export default function Match({ matchId }) {
             {matchData.teams.dire.map((steamid) => {
               const pick = matchData.heroPicks[steamid];
               if (pick) {
-                return <HeroIcon height={24} hero={pick.hero} />
+                return <HeroIcon key={steamid} height={24} hero={pick.hero} />
               }
               return null;
             })}

yarn.lock

@@ -8699,6 +8699,11 @@ react-ga@^2.7.0:
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.7.0.tgz#24328f157f31e8cffbf4de74a3396536679d8d7c"
   integrity sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==
 
+react-intersection-observer@^9.13.0:
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.13.0.tgz#ee10827954cf6ccc204d027f8400a6ddb8df163a"
+  integrity sha512-y0UvBfjDiXqC8h0EWccyaj4dVBWMxgEx0t5RGNzQsvkfvZwugnKwxpu70StY4ivzYuMajavwUDjH4LJyIki9Lw==
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.6:
   version "16.11.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"