refactor Rankings tables

src/components/DailyRankings.jsx

@@ -1,43 +0,0 @@
-/*
- * Rankings Tabs
- */
-
-import React from 'react';
-import { useSelector } from 'react-redux';
-
-const DailyRankings = () => {
-  const totalDailyRanking = useSelector(
-    (state) => state.ranks.totalDailyRanking,
-  );
-
-  return (
-    <div style={{ overflowY: 'auto', display: 'inline-block' }}>
-      <table>
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>user</th>
-            <th>Pixels</th>
-            <th># Total</th>
-            <th>Total Pixels</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-          totalDailyRanking.map((rank) => (
-            <tr>
-              <td>{rank.dailyRanking}</td>
-              <td>{rank.name}</td>
-              <td>{rank.dailyTotalPixels}</td>
-              <td>{rank.ranking}</td>
-              <td>{rank.totalPixels}</td>
-            </tr>
-          ))
-        }
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default React.memo(DailyRankings);

src/components/Modtools.jsx

@@ -36,10 +36,9 @@ function Modtools() {
             <span
               role="button"
               tabIndex={-1}
-              className="modallink"
-              style={(selectedPart === part) ? {
-                fontWeight: 'bold',
-              } : undefined}
+              className={
+                (selectedPart === part) ? 'modallink selected' : 'modallink'
+              }
               onClick={() => selectPart(part)}
             >{part}</span>
             {(ind !== parts.length - 1)

src/components/Rankings.jsx

@@ -5,14 +5,18 @@
 /* eslint-disable max-len */
 
 import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import { t } from 'ttag';
 
-import TotalRankings from './TotalRankings';
-import DailyRankings from './DailyRankings';
-
 
 const Rankings = () => {
   const [orderDaily, setOrderDaily] = useState(false);
+  const totalRanking = useSelector(
+    (state) => state.ranks.totalRanking,
+  );
+  const totalDailyRanking = useSelector(
+    (state) => state.ranks.totalDailyRanking,
+  );
 
   return (
     <div>
@@ -21,20 +25,62 @@ const Rankings = () => {
           role="button"
           tabIndex={-1}
           className={
-            (!orderDaily) ? 'modallinkselected' : 'modallink'
+            (!orderDaily) ? 'modallink selected' : 'modallink'
           }
           onClick={() => setOrderDaily(false)}
-        >{t`Total`}</span> |
+        >{t`Total`}</span>
+        <span className="hdivider" />
         <span
           role="button"
           tabIndex={-1}
           className={
-            (orderDaily) ? 'modallinkselected' : 'modallink'
+            (orderDaily) ? 'modallink selected' : 'modallink'
           }
           onClick={() => setOrderDaily(true)}
         >{t`Daily`}</span>
       </div>
-      {(orderDaily) ? <DailyRankings /> : <TotalRankings />}
+      <table style={{ display: 'inline' }}>
+        <thead>
+          {(orderDaily) ? (
+            <tr>
+              <th>#</th>
+              <th>user</th>
+              <th>Pixels</th>
+              <th># Total</th>
+              <th>Total Pixels</th>
+            </tr>
+          ) : (
+            <tr>
+              <th>#</th>
+              <th>user</th>
+              <th>Pixels</th>
+              <th># Today</th>
+              <th>Pixels Today</th>
+            </tr>
+          )}
+        </thead>
+        <tbody>
+          {(orderDaily)
+            ? totalDailyRanking.map((rank) => (
+              <tr key={rank.name}>
+                <td>{rank.dailyRanking}</td>
+                <td>{rank.name}</td>
+                <td>{rank.dailyTotalPixels}</td>
+                <td>{rank.ranking}</td>
+                <td>{rank.totalPixels}</td>
+              </tr>
+            ))
+            : totalRanking.map((rank) => (
+              <tr key={rank.name}>
+                <td>{rank.ranking}</td>
+                <td>{rank.name}</td>
+                <td>{rank.totalPixels}</td>
+                <td>{rank.dailyRanking}</td>
+                <td>{rank.dailyTotalPixels}</td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
       <p className="modaltext">
         {t`Ranking updates every 5 min. Daily rankings get reset at midnight UTC.`}
       </p>

src/components/TotalRankings.jsx

@@ -1,41 +0,0 @@
-/*
- * Rankings Tabs
- */
-
-import React from 'react';
-import { useSelector } from 'react-redux';
-
-const TotalRankings = () => {
-  const totalRanking = useSelector((state) => state.ranks.totalRanking);
-
-  return (
-    <div style={{ overflowY: 'auto', display: 'inline-block' }}>
-      <table>
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>user</th>
-            <th>Pixels</th>
-            <th># Today</th>
-            <th>Pixels Today</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-          totalRanking.map((rank) => (
-            <tr>
-              <td>{rank.ranking}</td>
-              <td>{rank.name}</td>
-              <td>{rank.totalPixels}</td>
-              <td>{rank.dailyRanking}</td>
-              <td>{rank.dailyTotalPixels}</td>
-            </tr>
-          ))
-        }
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default React.memo(TotalRankings);

src/core/ChatProvider.js

@@ -416,7 +416,7 @@ export class ChatProvider {
     }
 
     const country = user.regUser.flag || 'xx';
-    let displayCountry = countr;
+    let displayCountry = country;
     if (name.endsWith('berg') || name.endsWith('stein')) {
       displayCountry = 'il';
     } else if (user.userlvl !== 0) {

src/styles/default.css

@@ -117,6 +117,10 @@ a:hover {
   color: #226baa;
 }
 
+.modallink.selected {
+  font-weight: bold;
+}
+
 .inarea {
   border-style: solid;
   border-color: #d5d5d5;