saving some updates

RaceTimer/racetimer_react/src/Player/Player.js

@@ -1,7 +1,24 @@
 import React from 'react';
 import Facade from '../Datafacade/datafacade';
 import { NavLink } from 'react-router-dom';
-
+import Loader from 'react-loader-spinner';
+import { usePromiseTracker } from "react-promise-tracker";
+import '../css/style.css';
+const LoadingIndicator = props => {
+    const { promiseInProgress } = usePromiseTracker();
+    return promiseInProgress &&
+        <div
+            style={{
+                width: "100%",
+                height: "100",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+            }}
+        >
+            <Loader type="Circles" color="#2BAD60" height="100" width="100" />
+        </div>
+};
 class Player extends React.Component {
     constructor(props) {
         super(props)
@@ -9,20 +26,68 @@ class Player extends React.Component {
             player: {},
             mapTimes: [],
             breakload: true,
+            scrollListener: {},
         };
+        this.scrollListener = this.handleScroll.bind(this);
     }
 
     componentWillMount = async () => {
+        window.addEventListener('scroll', this.scrollListener);
+        this.setState({ breakload: false })
         const steamid = this.props.match.params.steamid;
         const player = await Facade.getPlayerFromCache(steamid);
-        const mapTimes = await Facade.getPlayerTimesFromCache(steamid);
+        const mapTimes = await Facade.getPlayerTimesFromCache(steamid, 0);
         this.setState({ player });
         this.setState({ mapTimes });
+        this.setState({ breakload: true })
     };
 
+    componentWillUnmount() {
+        window.removeEventListener("scroll", this.scrollListener);
+    }
+
+    findSecondLast(array) {
+        return array[array.length - 2];
+    }
+
+    handleScroll = () => {
+        if (this.state.breakload && this.state.player.Times > this.state.mapTimes.length) {
+            const map = this.findSecondLast(this.state.mapTimes);
+            var lastLi = document.getElementById("playermaps/" + map.mapname + "/" + map.mapstage);
+            var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight;
+            var pageOffset = window.pageYOffset + window.innerHeight;
+            if (pageOffset > lastLiOffset) {
+                this.setState({ breakload: false })
+                this.loadMaps();
+            }
+        }
+    };
+
+    loadMaps = async () => {
+        const steamid = this.props.match.params.steamid;
+        const mapTimes = await Facade.getPlayerTimesFromCache(steamid, this.state.mapTimes.length + 1);
+        this.setState({ mapTimes });
+        this.setState({ breakload: true })
+    }
+
     render() {
         return (
             <React.Fragment>
+                <div className="alert alert-primary" >
+                    <div id='containerMaps'>
+                        <div>
+                            <NavLink to={'/leaderboard/'}>
+                                <h3> <strong className="col-lg-1 col-centered" /> leaderboard<br /> </h3>
+                            </NavLink>
+                        </div>
+                        <div>
+                            <NavLink to={'/mapboard/'}>
+                                <h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
+                            </NavLink>
+                        </div>
+                    </div>
+                </div>
+                
                 <div className="container mm" style={{ marginTop: "85px" }}>
                     <div style={{
                         position: 'absolute', left: '50%', top: '30%'
@@ -39,7 +104,7 @@ class Player extends React.Component {
                                 <br />
                             </a>
                             {this.state.mapTimes.map(e => (
-                                <div key={"mapkey/" + e.mapname + "/" + e.mapstage}>
+                                <li key={"mapkey/" + e.mapname + "/" + e.mapstage} id={"playermaps/" + e.mapname + "/" + e.mapstage}>
                                     <NavLink to={'/map/' + e.mapname + "/" + e.mapstage}>
                                         <strong className="col-lg-1 col-centered" /> Map: {e.mapname}<br />
                                         <strong className="col-lg-1 col-centered" /> Stage: {e.mapstage}<br />
@@ -49,8 +114,12 @@ class Player extends React.Component {
                                         <br />
                                         <br />
                                     </NavLink>
-                                </div>
+                                </li>
                             ))}
+                            {!this.state.breakload ? <h1>
+                                Loading Stats <br /> <br />  <LoadingIndicator />
+                            </h1> : ""}
+
                         </div>
                     </div>
                 </div>