fetch ranking only when needed

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();
 

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);
     }

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' }}>

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]);
   }
 

src/reducers/index.js

@@ -19,7 +19,6 @@ const config = {
   storage: localForage,
   blacklist: [
     'user',
-    'ranks',
     'canvas',
     'alert',
     'chat',

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: {},
+  totalRanking: [],
-  totalDailyRanking: {},
+  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,
       };

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}`,
+            );
           }
         });
       }

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);