fix online counter parsing

change styling of OnlineBox and CanvasSwitchButton

src/components/OnlineBox.jsx

@@ -31,36 +31,35 @@ const OnlineBox = () => {
   const onlineUsers = (onlineCanvas) ? online[canvasId] : online.total;
 
   return (
-    <div>
-      {(onlineUsers || name)
+    <div
+      className="onlinebox"
+      role="button"
+      tabIndex="0"
+      onClick={() => dispatch(toggleOnlineCanvas())}
+    >
+      {(onlineCanvas)
         ? (
-          <div
-            className="onlinebox"
-            role="button"
-            tabIndex="0"
-            onClick={() => dispatch(toggleOnlineCanvas())}
+          <span
+            title={t`Online Users on Canvas`}
           >
-            {(onlineUsers)
-              && (
-              <span
-                title={(onlineCanvas)
-                  ? t`Online Users on Canvas`
-                  : t`Total Online Users`}
-              >
-                {onlineUsers}
-                <FaUser />
-                {(onlineCanvas) && <FaFlipboard />}
-                 &nbsp;
-              </span>
-              )}
-            {(name != null)
-                && (
-                <span title={t`Pixels placed`}>
-                  {numberToString(totalPixels)} <FaPaintBrush />
-                </span>
-                )}
-          </div>
-        ) : null}
+            {online[canvasId] || 0}<FaUser /><FaFlipboard />
+          </span>
+        )
+        : (
+          <span
+            title={t`Total Online Users`}
+          >
+            {online.total}<FaUser />
+          </span>
+        )
+      }
+       &nbsp;
+      {(name != null)
+          && (
+          <span title={t`Pixels placed`}>
+            {numberToString(totalPixels)} <FaPaintBrush />
+          </span>
+      )}
     </div>
   );
 };

src/components/buttons/CanvasSwitchButton.jsx

@@ -1,11 +1,10 @@
 /**
  *
- * @flow
  */
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { FaGlobe } from 'react-icons/fa';
+import { FaFlipboard } from 'react-icons/fa';
 import { t } from 'ttag';
 
 import { showCanvasSelectionModal } from '../../actions';
@@ -23,7 +22,7 @@ const CanvasSwitchButton = () => {
       title={t`Canvas Selection`}
       tabIndex={-1}
     >
-      <FaGlobe />
+      <FaFlipboard />
     </div>
   );
 };

src/socket/packets/OnlineCounter.js

@@ -31,7 +31,7 @@ export default {
   dehydrate(online) {
     // SERVER (sender)
     if (!process.env.BROWSER) {
-      const canvasIds = Object.keys(online);
+      const canvasIds = Object.keys(online).filter((id) => id !== 'total');
 
       const buffer = Buffer.allocUnsafe(3 + canvasIds.length * (1 + 2));
       buffer.writeUInt8(OP_CODE, 0);