just making sure to have a backup online

RaceTimer/racetimer_react/src/App.js

@@ -4,6 +4,7 @@ import { HashRouter as Router, Route } from "react-router-dom";
 import Leaderboard from "./Leaderboard/Leaderboard";
 import Player from "./Player/Player";
 import Maps from "./Maps/Maps";
+import MapBoard from "./MapBoard/MapBoard";
 
 class App extends Component {
     constructor(props) {
@@ -30,6 +31,9 @@ class App extends Component {
                     <Route path={`/map/:mapname/:stage`} render={(props) => {
                         return (<Maps {...props} />)
                     }} />
+                    <Route path={`/mapboard`} render={(props) => {
+                        return (<MapBoard {...props} />)
+                    }} />
                 </Router>
             </React.Fragment>
         )

RaceTimer/racetimer_react/src/Datafacade/datafacade.js

@@ -1,19 +1,9 @@
+import React from 'react';
 const URLleaderboard = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/leaderboard";
 const URLPlayer = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/player/";
 const URLPlayerMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/player/maps/";
 const URLMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/map/";
-function makeOptions(method, body) {
-  var opts = {
-    method: method,
-    headers: {
-      "Content-type": "application/json"
-    }
-  };
-  if (body) {
-    opts.body = JSON.stringify(body);
-  }
-  return opts;
-}
+const URLAllMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/allmaps";
 
 function handleHttpErrors(res) {
   if (!res.ok) {
@@ -22,22 +12,123 @@ function handleHttpErrors(res) {
   return res.json();
 }
 
-class DataFacade {
-  getLeaderBoard = () => {
-    return fetch(URLleaderboard).then(handleHttpErrors);
+class DataFacade extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+
+    };
+  }
+
+  
+
+  getLeaderBoardFromCache = async (incrementer) => {
+    const CachedTime = JSON.parse(localStorage.getItem("leaderboardTimer"));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("leaderboardTimer", JSON.stringify(Date.now()));
+      localStorage.removeItem("leaderboard");
+      incrementer = 0;
+    }
+    var leaderBoardData = localStorage.getItem("leaderboard");
+    if (incrementer === 0 && leaderBoardData) {
+      const cachedLeaderBoard = JSON.parse(leaderBoardData);
+      return cachedLeaderBoard;
+    } else {
+      const players = await fetch(URLleaderboard + "/" + incrementer).then(handleHttpErrors);
+      if (leaderBoardData !== null) {
+        const cachedLeaderBoard = JSON.parse(leaderBoardData);
+        players.map(e => (
+          cachedLeaderBoard.push(e)
+        ))
+        localStorage.setItem("leaderboard", JSON.stringify(cachedLeaderBoard));
+        return cachedLeaderBoard;
+      } else {
+        localStorage.setItem("leaderboard", JSON.stringify(players));
+        return players;
+      }
+    }
   };
 
-  getPlayer = steamID => {
-    return fetch(URLPlayer + steamID).then(handleHttpErrors);
+  getAllMapsFromCache = async () => {
+    const CachedTime = JSON.parse(localStorage.getItem("allmapsTimer"));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("allmapsTimer", JSON.stringify(Date.now()));
+      localStorage.removeItem("allmaps");
+    }
+    var allMapsData = localStorage.getItem("allmaps");
+    if (allMapsData) {
+      const cachedAllMaps = JSON.parse(allMapsData);
+      return cachedAllMaps;
+    } else {
+      const allMaps = await fetch(URLAllMaps).then(handleHttpErrors);
+      localStorage.setItem("allmaps", JSON.stringify(allMaps));
+      return allMaps;
+    }
+  };
+
+  getPlayerFromCache = async (steamID) => {
+    const CachedTime = JSON.parse(localStorage.getItem("initialCachedplayers" + steamID));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("initialCachedplayers" + steamID, JSON.stringify(Date.now()));
+      localStorage.removeItem("player/" + steamID)
+    }
+    var storageString = "player/" + steamID;
+    const playerData = localStorage.getItem(storageString);
+    if (playerData) {
+      const player = JSON.parse(playerData);
+      return player;
+    } else {
+      const player = await fetch(URLPlayer + steamID).then(handleHttpErrors);
+      localStorage.setItem(storageString, JSON.stringify(player));
+      return player;
+    }
   }
 
-  getPlayerTimes = steamID => {
-    return fetch(URLPlayerMaps + steamID).then(handleHttpErrors);
+  getPlayerTimesFromCache = async (steamID) => {
+    const CachedTime = JSON.parse(localStorage.getItem("initialCachedplayersTimes" + steamID));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("initialCachedplayersTimes" + steamID, JSON.stringify(Date.now()));
+      localStorage.removeItem("playertimes/" + steamID)
+    }
+    var storageString = "playertimes/" + steamID;
+    var playerTimesData = localStorage.getItem(storageString);
+    if (playerTimesData) {
+      const cachedPlayerTimes = JSON.parse(playerTimesData)
+      return cachedPlayerTimes;
+    } else {
+      const playertimes = await fetch(URLPlayerMaps + steamID).then(handleHttpErrors);
+      localStorage.setItem(storageString, JSON.stringify(playertimes));
+      return playertimes;
+    }
   }
 
-  getMapTimes = (mapname, stage) => {
-    return fetch(URLMaps + mapname + "/" + stage).then(handleHttpErrors);
+  getMapTimesFromCache = async (mapname, stage) => {
+    const CachedTime = JSON.parse(localStorage.getItem("maptimescached" + mapname + stage));
+    const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
+    //30 mins
+    if (!CachedTime || timeExpired > 30 * 60000) {
+      localStorage.setItem("maptimescached" + mapname + stage, JSON.stringify(Date.now()));
+      localStorage.removeItem("map/" + mapname + stage);
+    }
+    var mapTimesData = localStorage.getItem("map/" + mapname + stage);
+    if (mapTimesData) {
+      const cachedMapTimes = JSON.parse(mapTimesData);
+      return cachedMapTimes;
+    } else {
+      const mapTimes = await fetch(URLMaps + mapname + "/" + stage).then(handleHttpErrors);
+      localStorage.setItem("map/" + mapname + stage, JSON.stringify(mapTimes));
+      return mapTimes;
+    }
   }
+
 }
 
 export default new DataFacade();

RaceTimer/racetimer_react/src/Leaderboard/Leaderboard.js

@@ -1,48 +1,87 @@
 import React from 'react';
 import Facade from '../Datafacade/datafacade';
-import { NavLink } from 'react-router-dom'
+import { NavLink } from 'react-router-dom';
 
 class Leaderboard extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-            players: []
+            players: [],
+            breakload: true,
         };
     }
+
+    componentWillMount() {
+        this.scrollListener = window.addEventListener("scroll", e => {
+            this.handleScroll(e);
+        });
+    }
+
     componentDidMount = async () => {
-        const players = await Facade.getLeaderBoard();
+        this.setState({ breakload: false })
+        const players = await Facade.getLeaderBoardFromCache(0);
+        this.setState({ breakload: true })
         this.setState({ players });
-        this.props.setLeaderboard(players);
     };
 
+    findSecondLast(array) {
+        return array[array.length - 2];
+    }
+
+    handleScroll = () => {
+        const player = this.findSecondLast(this.state.players);
+        var lastLi = document.getElementById('leaderboard/' + player.steamID);
+        var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight;
+        var pageOffset = window.pageYOffset + window.innerHeight;
+        if (pageOffset > lastLiOffset && this.state.breakload) {
+            this.setState({ breakload: false })
+            this.loadPlayers();
+        }
+    };
+
+    loadPlayers = async () => {
+        const players = await Facade.getLeaderBoardFromCache(this.state.players.length + 1);
+        this.setState({ players });
+        this.setState({ breakload: true })
+    }
+
 
     render() {
         return (
             <React.Fragment>
-                <div className="container mm" style={{ marginTop: "85px" }}>
-                    <div style={{
-                        position: 'absolute', left: '50%', top: '30%'
-                    }}>
-                        {this.state.players.map(e => (
-                            <div>
-                                <NavLink to={'/player/' + e.steamID}>
-                                    <strong class="col-lg-1 col-centered" /> {e.steamID}<br />
-                                    <strong class="col-lg-1 col-centered" />{e.name}<br />
-                                    <img src={e.Avatar} /> <br />
-                                    <strong class="col-lg-1 col-centered" />Rank: {e.Rank}<br />
-                                    <strong class="col-lg-1 col-centered" />Points: {e.PlayerPoints}<br />
-                                    <strong class="col-lg-1 col-centered" />Times: {e.Times}<br />
-                                    <br />
-                                    <br />
-                                </NavLink>
-                            </div>
-                        ))}
+                <ul>
+                    <div className="container mm" style={{ marginTop: "85px" }}>
+                        <div style={{
+                            position: 'absolute', left: '50%', top: '30%'
+                        }}>
+                            <NavLink to={'/mapboard/'}>
+                                <h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
+                            </NavLink>
+                            <br />
+                            <br />
+                            {this.state.players.map(e => (
+                                <li key={e.steamID} id={"leaderboard/" + e.steamID}>
+                                    <NavLink to={'/player/' + e.steamID}>
+                                        <strong className="col-lg-1 col-centered" /> {e.steamID}<br />
+                                        <strong className="col-lg-1 col-centered" />{e.name}<br />
+                                        <img src={e.Avatar} alt="" /> <br />
+                                        <strong className="col-lg-1 col-centered" />Rank: {e.Rank}<br />
+                                        <strong className="col-lg-1 col-centered" />Points: {e.PlayerPoints}<br />
+                                        <strong className="col-lg-1 col-centered" />Times: {e.Times}<br />
+                                        <br />
+                                        <br />
+                                    </NavLink>
+                                </li>
+                            ))}
+                            {!this.state.breakload ? <h1> <br /> <br /><p className="loading"> 
+                            Loading More Players...
+                            </p> </h1> : ""}
+                        </div>
                     </div>
-                </div>
+                </ul>
             </React.Fragment>
         );
     }
 }
 
-
 export default Leaderboard;

RaceTimer/racetimer_react/src/MapBoard/MapBoard.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Facade from '../Datafacade/datafacade';
+import { NavLink } from 'react-router-dom';
+
+class MapBoards extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            maps: []
+        };
+    }
+
+    componentWillMount = async () => {
+        const maps = await Facade.getAllMapsFromCache();
+        this.setState({ maps });
+    };
+
+    render() {
+        return (
+            <React.Fragment>
+                <div className="container mm" style={{ marginTop: "85px" }}>
+                    <div style={{
+                        position: 'absolute', left: '50%', top: '30%'
+                    }}>
+                        <NavLink to={'/leaderboard/'}>
+                          <h3> <strong class="col-lg-1 col-centered" /> leaderboard<br /> </h3> 
+                        </NavLink>
+                        <br />
+                        <br />
+                        {this.state.maps.map(e => (
+                            <div>
+                                <NavLink to={'/map/' + e.mapname + "/" + e.mapstage}>
+                                    <strong class="col-lg-1 col-centered" /> Map: {e.mapname}<br />
+                                    <strong class="col-lg-1 col-centered" /> Stage: {e.mapstage}<br />
+                                    <br />
+                                    <br />
+                                </NavLink>
+                            </div>
+                        ))}
+                        /</div>
+                </div>
+            </React.Fragment>
+        );
+    }
+
+}
+export default MapBoards;

RaceTimer/racetimer_react/src/Maps/Maps.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Facade from '../Datafacade/datafacade';
+import { NavLink } from 'react-router-dom';
 
 class Maps extends React.Component {
 
@@ -14,7 +15,7 @@ class Maps extends React.Component {
     componentWillMount = async () => {
         const mapname = this.props.match.params.mapname;
         const stage = this.props.match.params.stage;
-        const mapTimes = await Facade.getMapTimes(mapname, stage);
+        const mapTimes = await Facade.getMapTimesFromCache(mapname, stage);
         this.setState({ mapTimes });
         this.setState({ mapName: mapname })
     };
@@ -22,24 +23,39 @@ class Maps extends React.Component {
     render() {
         return (
             <React.Fragment>
+                <div className="alert alert-primary" >
+                    <NavLink to={'/leaderboard/'}>
+                        <h3> <strong className="col-lg-1 col-centered" /> leaderboard<br /> </h3>
+                    </NavLink>
+                    <NavLink to={'/mapboard/'}>
+                        <h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
+                    </NavLink>
+                </div>
                 <div className="container mm" style={{ marginTop: "85px" }}>
                     <div style={{
                         position: 'absolute', left: '50%', top: '30%'
                     }}>
 
+                        <br />
+                        <br />
                         <div>
-                            <strong class="col-lg-1 col-centered" />{this.state.mapName}<br />
+                            <strong className="col-lg-1 col-centered" />{this.state.mapName}<br />
                             <br />
                             <br />
                             {this.state.mapTimes.map(e => (
-                                <div>
-                                    <strong class="col-lg-1 col-centered" /> Position: {e.position}<br />
-                                    <strong class="col-lg-1 col-centered" /> SteamID: {e.steamID}<br />
-                                    <strong class="col-lg-1 col-centered" /> Name: {e.name}<br />
-                                    <strong class="col-lg-1 col-centered" /> Mappoints: {e.mapPoint}<br />
-                                    <strong class="col-lg-1 col-centered" /> Time: 0{e.mapTimeMinutes}:{e.mapTimeSeconds}<br />
-                                    <br />
-                                    <br />
+                                <div className="item" key={e.steamID}>
+                                    <div className="box_grid">
+                                        <NavLink to={'/player/' + e.steamID}>
+                                            <strong className="col-lg-1 col-centered" /> SteamID: {e.steamID}<br />
+                                            <strong className="col-lg-1 col-centered" /> Name: {e.name}<br />
+                                            <img src={e.avatar} alt=""/> <br />
+                                        </NavLink>
+                                        <strong className="col-lg-1 col-centered" /> Position: {e.position}<br />
+                                        <strong className="col-lg-1 col-centered" /> Mappoints: {e.mapPoint}<br />
+                                        <strong className="col-lg-1 col-centered" /> Time: 0{e.mapTimeMinutes}:{e.mapTimeSeconds}<br />
+                                        <br />
+                                        <br />
+                                    </div>
                                 </div>
                             ))}
 

RaceTimer/racetimer_react/src/Player/Player.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import Facade from '../Datafacade/datafacade';
-import { NavLink } from 'react-router-dom'
+import { NavLink } from 'react-router-dom';
 
 class Player extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
             player: {},
-            mapTimes: []
+            mapTimes: [],
+            breakload: true,
         };
     }
 
     componentWillMount = async () => {
         const steamid = this.props.match.params.steamid;
-        const player = await Facade.getPlayer(steamid);
-        const mapTimes = await Facade.getPlayerTimes(steamid);
+        const player = await Facade.getPlayerFromCache(steamid);
+        const mapTimes = await Facade.getPlayerTimesFromCache(steamid);
         this.setState({ player });
         this.setState({ mapTimes });
     };
@@ -28,25 +29,25 @@ class Player extends React.Component {
                     }}>
                         <div>
                             <a href={"http://steamcommunity.com/profiles/" + this.state.player.steamID64}>
-                                <strong class="col-lg-1 col-centered" /> {this.state.player.steamID}<br />
-                                <strong class="col-lg-1 col-centered" />{this.state.player.name}<br />
-                                <img src={this.state.player.Avatar} /> <br />
-                                <strong class="col-lg-1 col-centered" />Rank: {this.state.player.Rank}<br />
-                                <strong class="col-lg-1 col-centered" />Points: {this.state.player.PlayerPoints}<br />
-                                <strong class="col-lg-1 col-centered" />Times: {this.state.player.Times}<br />
+                                <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 => (
-                                <div>
+                                <div key={"mapkey/" + e.mapname + "/" + e.mapstage}>
                                     <NavLink to={'/map/' + e.mapname + "/" + e.mapstage}>
-                                    <strong class="col-lg-1 col-centered" /> Map: {e.mapname}<br />
-                                    <strong class="col-lg-1 col-centered" /> Stage: {e.mapstage}<br />
-                                    <strong class="col-lg-1 col-centered" /> Position: {e.position}<br />
-                                    <strong class="col-lg-1 col-centered" /> Time: 0{e.mapTimeMinutes}:{e.mapTimeSeconds}<br />
-                                    <strong class="col-lg-1 col-centered" /> MapPoints: {e.mapPoint}<br />
-                                    <br />
-                                    <br />
+                                        <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>
                                 </div>
                             ))}