projects-jenz/RaceTimer/racetimer_react/src/Player/Player.js

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)
        this.state = {
            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, 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%'
                    }}>
                        <div>
                            <a href={"http://steamcommunity.com/profiles/" + this.state.player.steamID64}>
                                <strong className="col-lg-1 col-centered" /> {this.state.player.steamID}<br />
                                <strong className="col-lg-1 col-centered" />{this.state.player.name}<br />
                                <img src={this.state.player.Avatar} alt="" /> <br />
                                <strong className="col-lg-1 col-centered" />Rank: {this.state.player.Rank}<br />
                                <strong className="col-lg-1 col-centered" />Points: {this.state.player.PlayerPoints}<br />
                                <strong className="col-lg-1 col-centered" />Times: {this.state.player.Times}<br />
                                <br />
                                <br />
                            </a>
                            {this.state.mapTimes.map(e => (
                                <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 />
                                        <strong className="col-lg-1 col-centered" /> Position: {e.position}<br />
                                        <strong className="col-lg-1 col-centered" /> Time: 0{e.mapTimeMinutes}:{e.mapTimeSeconds}<br />
                                        <strong className="col-lg-1 col-centered" /> MapPoints: {e.mapPoint}<br />
                                        <br />
                                        <br />
                                    </NavLink>
                                </li>
                            ))}
                            {!this.state.breakload ? <h1>
                                Loading Stats <br /> <br />  <LoadingIndicator />
                            </h1> : ""}

                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}


export default Player;