From 35c16b133446d0d58be15a725f7b39c696c1e9ec Mon Sep 17 00:00:00 2001
From: HF <hf@pixelplanet.fun>
Date: Sat, 9 Jul 2022 14:49:08 +0200
Subject: [PATCH] fetch ranking only when needed

---
 src/client.js                       |  6 ------
 src/components/hooks/interval.js    |  1 +
 src/components/windows/UserArea.jsx | 12 +++++++++++-
 src/data/redis/RedisCanvas.js       |  5 ++---
 src/reducers/index.js               |  1 -
 src/reducers/ranks.js               |  7 +++++--
 src/socket/SocketServer.js          |  5 ++++-
 src/ui/ChunkLoader2D.js             |  2 +-
 8 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/client.js b/src/client.js
index 6d5c5a2f..49fa72e0 100644
--- a/src/client.js
+++ b/src/client.js
@@ -8,7 +8,6 @@ import fetch from 'isomorphic-fetch'; // TODO put in the beggining with webpack!
 import onKeyPress from './controls/keypress';
 import {
   fetchMe,
-  fetchStats,
   initTimer,
   urlChange,
   receiveOnline,
@@ -118,11 +117,6 @@ function init() {
 
   store.dispatch(fetchMe());
   SocketClient.connect();
-
-  store.dispatch(fetchStats());
-  // TODO: We don't have to do this this often
-  // the client might not even look at it
-  setInterval(() => { store.dispatch(fetchStats()); }, 300000);
 }
 init();
 
diff --git a/src/components/hooks/interval.js b/src/components/hooks/interval.js
index 6fe50f63..4a0cac35 100644
--- a/src/components/hooks/interval.js
+++ b/src/components/hooks/interval.js
@@ -15,6 +15,7 @@ function useInterval(callback, delay) {
       savedCallback.current();
     }
     if (delay !== null) {
+      tick();
       const id = setInterval(tick, delay);
       return () => clearInterval(id);
     }
diff --git a/src/components/windows/UserArea.jsx b/src/components/windows/UserArea.jsx
index 0bf41262..67dee37e 100644
--- a/src/components/windows/UserArea.jsx
+++ b/src/components/windows/UserArea.jsx
@@ -4,9 +4,11 @@
  */
 
 import React, { Suspense } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { t } from 'ttag';
 
+import { fetchStats } from '../../actions';
+import useInterval from '../hooks/interval';
 import LogInArea from '../LogInArea';
 import Tabs from '../Tabs';
 import UserAreaContent from '../UserAreaContent';
@@ -20,6 +22,14 @@ const Modtools = React.lazy(() => import(/* webpackChunkName: "modtools" */ '../
 const UserArea = ({ windowId }) => {
   const name = useSelector((state) => state.user.name);
   const userlvl = useSelector((state) => state.user.userlvl);
+  const lastStatsFetch = useSelector((state) => state.ranks.lastFetch);
+  const dispatch = useDispatch();
+
+  useInterval(() => {
+    if (Date.now() - 300000 > lastStatsFetch) {
+      dispatch(fetchStats());
+    }
+  }, 300000);
 
   return (
     <div style={{ textAlign: 'center' }}>
diff --git a/src/data/redis/RedisCanvas.js b/src/data/redis/RedisCanvas.js
index d6d835f9..7f99cc4e 100644
--- a/src/data/redis/RedisCanvas.js
+++ b/src/data/redis/RedisCanvas.js
@@ -76,13 +76,11 @@ class RedisCanvas {
     j,
     offset,
   ) {
-    /*
-     * TODO what if chunk does not exist?
-     */
     if (!RedisCanvas.multi) {
       RedisCanvas.multi = client.multi();
       setTimeout(RedisCanvas.flushPixels, 100);
     }
+
     RedisCanvas.multi.addCommand(
       /*
        * NOTE:
@@ -99,6 +97,7 @@ class RedisCanvas {
         String(color),
       ],
     );
+
     RedisCanvas.execChunkChangeCallback(canvasId, [i, j]);
   }
 
diff --git a/src/reducers/index.js b/src/reducers/index.js
index c1152f78..1e7357c4 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -19,7 +19,6 @@ const config = {
   storage: localForage,
   blacklist: [
     'user',
-    'ranks',
     'canvas',
     'alert',
     'chat',
diff --git a/src/reducers/ranks.js b/src/reducers/ranks.js
index e4d23cf1..acfb79ac 100644
--- a/src/reducers/ranks.js
+++ b/src/reducers/ranks.js
@@ -1,5 +1,6 @@
 
 const initialState = {
+  lastFetch: 0,
   totalPixels: 0,
   dailyTotalPixels: 0,
   ranking: 1488,
@@ -14,8 +15,8 @@ const initialState = {
   online: {
     total: 0,
   },
-  totalRanking: {},
-  totalDailyRanking: {},
+  totalRanking: [],
+  totalDailyRanking: [],
 };
 
 export default function ranks(
@@ -62,8 +63,10 @@ export default function ranks(
 
     case 'RECEIVE_STATS': {
       const { totalRanking, totalDailyRanking } = action;
+      const lastFetch = Date.now();
       return {
         ...state,
+        lastFetch,
         totalRanking,
         totalDailyRanking,
       };
diff --git a/src/socket/SocketServer.js b/src/socket/SocketServer.js
index e2a883df..b5b476f7 100644
--- a/src/socket/SocketServer.js
+++ b/src/socket/SocketServer.js
@@ -246,7 +246,10 @@ class SocketServer {
         // eslint-disable-next-line no-underscore-dangle
         ws._sender.sendFrame(frames, (err) => {
           if (err) {
-            logger.error(`WebSocket broadcast error: ${err.message}`);
+            logger.error(
+              // eslint-disable-next-line max-len
+              `WebSocket broadcast error on ${ws.user && ws.user.ip} : ${err.message}`,
+            );
           }
         });
       }
diff --git a/src/ui/ChunkLoader2D.js b/src/ui/ChunkLoader2D.js
index 3fa14f1a..4fcc0abb 100644
--- a/src/ui/ChunkLoader2D.js
+++ b/src/ui/ChunkLoader2D.js
@@ -103,7 +103,7 @@ class ChunkLoader {
     const px = getCellInsideChunk(historicalCanvasSize, [x, y]);
     const curTime = Date.now();
 
-    if (!historicalTime || historicalTime !== '0000') {
+    if (historicalTime && historicalTime !== '0000') {
       // eslint-disable-next-line max-len
       const incrementialChunkKey = `${historicalDate}${historicalTime}:${cx}:${cy}`;
       const incrementialChunk = this.chunks.get(incrementialChunkKey);