From 0b9db21c10f4be76ec3b5b5dc7a62bff5b16ef0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 7 Nov 2023 11:13:30 -0600
Subject: [PATCH] feat: deleted user handling

---
 src/app/tools/ratings/page.tsx                | 21 +++++++++++++------
 .../Leaderboard/components/Item.tsx           |  5 ++++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/app/tools/ratings/page.tsx b/src/app/tools/ratings/page.tsx
index de8a16854..e5f9d510b 100644
--- a/src/app/tools/ratings/page.tsx
+++ b/src/app/tools/ratings/page.tsx
@@ -29,7 +29,9 @@ import { noArrows } from './page.css';
 
 const ROWS_OPTIONS = [5, 10, 25, 50, 100];
 
-const useUsernameCache = create<Record<Region, Record<number, string>>>(() => ({
+type UsernameCache = Record<Region, Record<number, string | null>>;
+
+const useUsernameCache = create<UsernameCache>(() => ({
   asia: {},
   com: {},
   eu: {},
@@ -124,10 +126,14 @@ export default function Page() {
 
     if (ids && ids.length > 0) {
       getAccountInfo(region, ids).then((data) => {
-        data.map((player) => {
+        data.map((player, index) => {
           useUsernameCache.setState(
-            produce((draft) => {
-              draft[region][player.account_id] = player.nickname;
+            produce((draft: UsernameCache) => {
+              if (player) {
+                draft[region][ids[index]] = player.nickname;
+              } else {
+                draft[region][ids[index]] = null;
+              }
             }),
           );
         });
@@ -432,8 +438,11 @@ export default function Page() {
           playerSlice?.map((player, index) => (
             <Leaderboard.Item
               nickname={
-                usernameCache[region][player.id] ??
-                `Loading player ${player.id}...`
+                usernameCache[region][player.id] === null
+                  ? `Deleted player ${player.id}`
+                  : usernameCache[region][player.id]
+                  ? usernameCache[region][player.id]!
+                  : `Loading player ${player.id}...`
               }
               position={page * rowsPerPage + index + 1}
               score={player.score}
diff --git a/src/components/Leaderboard/components/Item.tsx b/src/components/Leaderboard/components/Item.tsx
index e2c33f3b3..3fcdea807 100644
--- a/src/components/Leaderboard/components/Item.tsx
+++ b/src/components/Leaderboard/components/Item.tsx
@@ -1,7 +1,8 @@
+import { ComponentProps } from 'react';
 import { RatingsReward } from '../../../commands/ratings';
 import { theme } from '../../../stitches.config';
 
-export interface ItemProps {
+export interface ItemProps extends ComponentProps<'div'> {
   position: number;
   deltaPosition?: number;
   score: number;
@@ -25,9 +26,11 @@ export function Item({
   nickname,
   clan,
   highlight,
+  ...props
 }: ItemProps) {
   return (
     <div
+      {...props}
       style={{
         display: 'flex',
         padding: 8,