From 27f77ec9b5b9511df680948b460f5119431b84eb Mon Sep 17 00:00:00 2001
From: Paulsenik <mail@paulsenik.de>
Date: Sat, 28 Dec 2024 17:08:10 +0100
Subject: [PATCH] remove anonymous in user-leaderboards

---
 .../Components/StatisticsTab/Leaderboard.tsx  | 316 +++++++++---------
 1 file changed, 161 insertions(+), 155 deletions(-)

diff --git a/frontend/src/Components/StatisticsTab/Leaderboard.tsx b/frontend/src/Components/StatisticsTab/Leaderboard.tsx
index 83826aa..98f39c1 100644
--- a/frontend/src/Components/StatisticsTab/Leaderboard.tsx
+++ b/frontend/src/Components/StatisticsTab/Leaderboard.tsx
@@ -1,19 +1,24 @@
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
 import {
-  UserMetricType,
-  UserMetricEntry,
-  TimeSpan,
-  ItemMetricType,
-  ItemMetricEntry,
+  CompositeMetricEntry,
+  CompositeMetricType,
   convertUsersBalance,
   convertUsersSpent,
-  CompositeMetricType,
-  CompositeMetricEntry,
+  ItemMetricEntry,
+  ItemMetricType,
+  TimeSpan,
+  UserMetricEntry,
+  UserMetricType,
 } from "../../Types/Statistics";
-import { useEffect, useState } from "react";
-import { getAllUsers, getCompositeMetric, getItemMetric, getUserMetric } from "../../Queries";
-import { ScrollArea, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "@radix-ui/react-scroll-area";
-import { formatMoney } from "../../Format";
+import {useEffect, useState} from "react";
+import {getAllUsers, getCompositeMetric, getItemMetric, getUserMetric} from "../../Queries";
+import {
+  ScrollArea,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport
+} from "@radix-ui/react-scroll-area";
+import {formatMoney} from "../../Format";
 
 export function CompositeLeaderboard(props: {
   type: CompositeMetricType;
@@ -22,7 +27,7 @@ export function CompositeLeaderboard(props: {
   desc: string;
   isMoney: boolean;
 }) {
-  const { type, timeSpan, title, desc, isMoney } = props;
+  const {type, timeSpan, title, desc, isMoney} = props;
   const [stats, setStats] = useState<CompositeMetricEntry[]>([]);
   const [options, setOptions] = useState<[string, string][]>([]);
   const [selected, setSelected] = useState<[string, string]>();
@@ -45,66 +50,66 @@ export function CompositeLeaderboard(props: {
 
   useEffect(() => {
     const uniqueKeys = Array.from(
-      new Set(stats.map((entry) => JSON.stringify([entry.key1, entry.key1DisplayName])))
+        new Set(stats.map((entry) => JSON.stringify([entry.key1, entry.key1DisplayName])))
     ).map((key) => JSON.parse(key));
     setOptions(uniqueKeys.sort((a: string, b: string) => a[0].localeCompare(b[0])));
     setSelected(uniqueKeys[0]);
   }, [stats]);
 
   return (
-    <ScrollArea className="DisplayCard">
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
-        <h3>{title}</h3>
-        <select
-          onChange={(a) => select(a.target.value)}
-          style={{ margin: "0.5rem" }}
-          value={selected ? selected[0] : options[0]?.[0] || ""}
+      <ScrollArea className="DisplayCard">
+        <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+            }}
         >
-          {options.map((option) => (
-            <option value={option[0]} key={option[0]}>
-              {option[1]}
-            </option>
-          ))}
-        </select>
-        <p>{desc}</p>
-      </div>
+          <h3>{title}</h3>
+          <select
+              onChange={(a) => select(a.target.value)}
+              style={{margin: "0.5rem"}}
+              value={selected ? selected[0] : options[0]?.[0] || ""}
+          >
+            {options.map((option) => (
+                <option value={option[0]} key={option[0]}>
+                  {option[1]}
+                </option>
+            ))}
+          </select>
+          <p>{desc}</p>
+        </div>
 
-      <ScrollAreaViewport style={{ maxHeight: "20rem" }}>
-        <table className="Table">
-          <tbody>
+        <ScrollAreaViewport style={{maxHeight: "20rem"}}>
+          <table className="Table">
+            <tbody>
             {stats
-              .filter((a) => {
-                return selected && a.key1 == selected[0];
-              })
-              .map((entry, index) => {
-                return (
+            .filter((a) => {
+              return selected && a.key1 == selected[0];
+            })
+            .map((entry, index) => {
+              return (
                   <LeaderboardEntry
-                    entryDisplayName={entry.key2DisplayName}
-                    entryId={entry.key2}
-                    entryValue={entry.value}
-                    position={index + 1}
-                    isUser={true}
-                    key={index}
-                    isMoney={isMoney}
-                    anonymize={entry.key2.length == 0}
+                      entryDisplayName={entry.key2DisplayName}
+                      entryId={entry.key2}
+                      entryValue={entry.value}
+                      position={index + 1}
+                      isUser={true}
+                      key={index}
+                      isMoney={isMoney}
+                      anonymize={entry.key2.length == 0}
                   />
-                );
-              })}
-          </tbody>
-        </table>
-      </ScrollAreaViewport>
-      <ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
-        <ScrollAreaThumb className="ScrollbarThumb" />
-      </ScrollAreaScrollbar>
-      <ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
-        <ScrollAreaThumb className="ScrollbarThumb" />
-      </ScrollAreaScrollbar>
-    </ScrollArea>
+              );
+            })}
+            </tbody>
+          </table>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
+          <ScrollAreaThumb className="ScrollbarThumb"/>
+        </ScrollAreaScrollbar>
+        <ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
+          <ScrollAreaThumb className="ScrollbarThumb"/>
+        </ScrollAreaScrollbar>
+      </ScrollArea>
   );
 }
 
@@ -115,59 +120,59 @@ export function ItemLeaderboard(props: {
   desc: string;
   isMoney: boolean;
 }) {
-  const { type, timeSpan, title, desc, isMoney } = props;
+  const {type, timeSpan, title, desc, isMoney} = props;
   const [stats, setStats] = useState<ItemMetricEntry[]>([]);
 
   useEffect(() => {
     getItemMetric(type, timeSpan)
-      .then((l) => {
-        if (l) {
-          setStats(l);
-        }
-      })
-      .catch(() => {
-        setStats([]);
-      });
+    .then((l) => {
+      if (l) {
+        setStats(l);
+      }
+    })
+    .catch(() => {
+      setStats([]);
+    });
   }, [timeSpan]);
 
   return (
-    <ScrollArea className="DisplayCard">
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
-        <h3>{title}</h3>
-        <p>{desc}</p>
-      </div>
-      <ScrollAreaViewport style={{ maxHeight: "20rem" }}>
-        <table className="Table">
-          <tbody>
+      <ScrollArea className="DisplayCard">
+        <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+            }}
+        >
+          <h3>{title}</h3>
+          <p>{desc}</p>
+        </div>
+        <ScrollAreaViewport style={{maxHeight: "20rem"}}>
+          <table className="Table">
+            <tbody>
             {stats.map((entry, index) => {
               return (
-                <LeaderboardEntry
-                  entryDisplayName={entry.entity.displayName}
-                  entryId={entry.entity.id}
-                  entryValue={entry.value}
-                  position={index + 1}
-                  isUser={false}
-                  key={index}
-                  isMoney={isMoney}
-                  anonymize={false}
-                />
+                  <LeaderboardEntry
+                      entryDisplayName={entry.entity.displayName}
+                      entryId={entry.entity.id}
+                      entryValue={entry.value}
+                      position={index + 1}
+                      isUser={false}
+                      key={index}
+                      isMoney={isMoney}
+                      anonymize={false}
+                  />
               );
             })}
-          </tbody>
-        </table>
-      </ScrollAreaViewport>
-      <ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
-        <ScrollAreaThumb className="ScrollbarThumb" />
-      </ScrollAreaScrollbar>
-      <ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
-        <ScrollAreaThumb className="ScrollbarThumb" />
-      </ScrollAreaScrollbar>
-    </ScrollArea>
+            </tbody>
+          </table>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
+          <ScrollAreaThumb className="ScrollbarThumb"/>
+        </ScrollAreaScrollbar>
+        <ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
+          <ScrollAreaThumb className="ScrollbarThumb"/>
+        </ScrollAreaScrollbar>
+      </ScrollArea>
   );
 }
 
@@ -178,7 +183,7 @@ export function UserLeaderboard(props: {
   desc: string;
   isMoney: boolean;
 }) {
-  const { type, timeSpan, title, desc, isMoney } = props;
+  const {type, timeSpan, title, desc, isMoney} = props;
   const [stats, setStats] = useState<UserMetricEntry[]>([]);
 
   useEffect(() => {
@@ -204,43 +209,43 @@ export function UserLeaderboard(props: {
   }, [timeSpan]);
 
   return (
-    <ScrollArea className="DisplayCard">
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
-        <h3>{title}</h3>
-        <p>{desc}</p>
-      </div>
-      <ScrollAreaViewport style={{ maxHeight: "20rem" }}>
-        <table className="Table">
-          <tbody>
-            {stats.map((entry, index) => {
+      <ScrollArea className="DisplayCard">
+        <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+            }}
+        >
+          <h3>{title}</h3>
+          <p>{desc}</p>
+        </div>
+        <ScrollAreaViewport style={{maxHeight: "20rem"}}>
+          <table className="Table">
+            <tbody>
+            {stats.filter((e) => (!e.entity.hidden)).map((entry, index) => {
               return (
-                <LeaderboardEntry
-                  entryDisplayName={entry.entity.displayName}
-                  entryId={entry.entity.id}
-                  entryValue={entry.value}
-                  position={index + 1}
-                  isUser={true}
-                  key={index}
-                  isMoney={isMoney}
-                  anonymize={entry.entity.hidden}
-                />
+                  <LeaderboardEntry
+                      entryDisplayName={entry.entity.displayName}
+                      entryId={entry.entity.id}
+                      entryValue={entry.value}
+                      position={index + 1}
+                      isUser={true}
+                      key={index}
+                      isMoney={isMoney}
+                      anonymize={entry.entity.hidden}
+                  />
               );
             })}
-          </tbody>
-        </table>
-      </ScrollAreaViewport>
-      <ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
-        <ScrollAreaThumb className="ScrollbarThumb" />
-      </ScrollAreaScrollbar>
-      <ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
-        <ScrollAreaThumb className="ScrollbarThumb" />
-      </ScrollAreaScrollbar>
-    </ScrollArea>
+            </tbody>
+          </table>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
+          <ScrollAreaThumb className="ScrollbarThumb"/>
+        </ScrollAreaScrollbar>
+        <ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
+          <ScrollAreaThumb className="ScrollbarThumb"/>
+        </ScrollAreaScrollbar>
+      </ScrollArea>
   );
 }
 
@@ -253,23 +258,24 @@ export function LeaderboardEntry(props: {
   isMoney: boolean;
   anonymize: boolean;
 }) {
-  const { entryDisplayName, entryId, entryValue, position, isUser, isMoney, anonymize } = props;
+  const {entryDisplayName, entryId, entryValue, position, isUser, isMoney, anonymize} = props;
 
   return (
-    <tr className="table-entry">
-      <th className="left">{position}</th>
-      <th className="name left">
-        {isUser && anonymize ? (
-          <>Anonyme 🍍</>
-        ) : isUser ? (
-          <Link to={`/stats/users/${entryId}`} className="bold">
-            {entryDisplayName}
-          </Link>
-        ) : (
-          <>{entryDisplayName}</>
-        )}
-      </th>
-      {isMoney ? <th className="right">{formatMoney(entryValue)}</th> : <th className="right">{entryValue}</th>}
-    </tr>
+      <tr className="table-entry">
+        <th className="left">{position}</th>
+        <th className="name left">
+          {isUser && anonymize ? (
+              <>Anonyme 🍍</>
+          ) : isUser ? (
+              <Link to={`/stats/users/${entryId}`} className="bold">
+                {entryDisplayName}
+              </Link>
+          ) : (
+              <>{entryDisplayName}</>
+          )}
+        </th>
+        {isMoney ? <th className="right">{formatMoney(entryValue)}</th> :
+            <th className="right">{entryValue}</th>}
+      </tr>
   );
 }