Indicate deleted account in search result

Author: SAPikachu

src/components/gameRecords/playerSearch.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { useEffect, useState, useMemo } from "react";
 
-import { PlayerMetadataLite, LevelWithDelta, Level } from "../../data/types";
-import { searchPlayer } from "../../data/source/misc";
+import { LevelWithDelta, Level } from "../../data/types";
+import { searchPlayer, PlayerSearchResult } from "../../data/source/misc";
 import { Redirect } from "react-router-dom";
 import { generatePlayerPathById } from "./routeUtils";
 import { useTranslation } from "react-i18next";
@@ -11,12 +11,16 @@ import { networkError } from "../../utils/notify";
 import Conf, { CONFIGURATIONS } from "../../utils/conf";
 import Loading from "../misc/loading";
 
-const playerSearchCache = new Map<string, PlayerMetadataLite[] | Promise<PlayerMetadataLite[]>>();
+type PlayerSearchResultExt = PlayerSearchResult & {
+  isDeleted?: boolean;
+};
+
+const playerSearchCache = new Map<string, PlayerSearchResultExt[] | Promise<PlayerSearchResultExt[]>>();
 const NUM_FETCH = 20;
 
 const normalizeName = (s: string) => s.toLowerCase().trim();
 
-function findRawResultFromCache(prefix: string): { result: PlayerMetadataLite[]; isExactMatch: boolean } | null {
+function findRawResultFromCache(prefix: string): { result: PlayerSearchResultExt[]; isExactMatch: boolean } | null {
   const normalizedPrefix = normalizeName(prefix);
   prefix = normalizedPrefix;
   while (prefix) {
@@ -33,7 +37,7 @@ function findRawResultFromCache(prefix: string): { result: PlayerMetadataLite[];
   return null;
 }
 
-function getCrossSiteConf(x: PlayerMetadataLite) {
+function getCrossSiteConf(x: PlayerSearchResultExt) {
   if (Conf.availableModes.length > 1) {
     const level = new Level(x.level.id);
     if (!Conf.availableModes.some((mode) => level.isAllowedMode(mode))) {
@@ -42,7 +46,7 @@ function getCrossSiteConf(x: PlayerMetadataLite) {
   }
   return null;
 }
-function getOptionLabel(x: PlayerMetadataLite, t: (x: string) => string): string {
+function getOptionLabel(x: PlayerSearchResultExt, t: (x: string) => string): string {
   let ret = `[${LevelWithDelta.getTag(x.level)}] ${x.nickname}`;
   const conf = getCrossSiteConf(x);
   if (conf) {
@@ -52,7 +56,7 @@ function getOptionLabel(x: PlayerMetadataLite, t: (x: string) => string): string
 }
 export function PlayerSearch() {
   const { t } = useTranslation("form");
-  const [selectedItem, setSelectedItem] = useState(null as PlayerMetadataLite | null);
+  const [selectedItem, setSelectedItem] = useState(null as PlayerSearchResultExt | null);
   const [version, setVersion] = useState(0);
   const [searchText, setSearchText] = useState("");
   const [open, setOpen] = React.useState(false);
@@ -69,7 +73,7 @@ export function PlayerSearch() {
     }
     const normalizedPrefix = normalizeName(searchText);
     let mayHaveMore = cachedResult.result.length >= NUM_FETCH;
-    const filteredPlayers = [] as PlayerMetadataLite[];
+    const filteredPlayers = [] as PlayerSearchResultExt[];
     cachedResult.result.forEach((player) => {
       if (normalizeName(player.nickname).startsWith(normalizedPrefix)) {
         filteredPlayers.push(player);
@@ -100,7 +104,10 @@ export function PlayerSearch() {
       if (playerSearchCache.has(prefix)) {
         return;
       }
-      const promise = searchPlayer(prefix, NUM_FETCH).then(function (players) {
+      const promise = searchPlayer(prefix, NUM_FETCH).then(function (players: PlayerSearchResultExt[]) {
+        players.forEach((x) => {
+          x.isDeleted = players.some((y) => x.nickname === y.nickname && x.latest_timestamp < y.latest_timestamp);
+        });
         playerSearchCache.set(prefix, players);
         if (!cancelled) {
           setVersion(new Date().getTime());
@@ -145,6 +152,17 @@ export function PlayerSearch() {
       onChange={(_, value, reason) => reason === "selectOption" && setSelectedItem(value)}
       options={players}
       getOptionLabel={(x) => getOptionLabel(x, t)}
+      renderOption={(props, option) => {
+        const { key, ...otherProps } = props as typeof props & { key: string };
+        return (
+          <li key={key} {...otherProps}>
+            <span style={option.isDeleted ? { textDecoration: "line-through", color: "#888" } : {}}>
+              {" "}
+              {getOptionLabel(option, t)}
+            </span>
+          </li>
+        );
+      }}
       isOptionEqualToValue={(option, value) => option.id === value.id}
       loading={isLoading}
       filterOptions={(x) => x}

src/data/source/misc.ts

@@ -9,12 +9,16 @@ import { RankRateBySeat } from "../types";
 import { CareerRankingItem, CareerRankingType } from "../types/ranking";
 import { GlobalStatistics, FanStats, GlobalHistogram, LevelStatistics } from "../types/statistics";
 
-export async function searchPlayer(prefix: string, limit = 20): Promise<PlayerMetadataLite[]> {
+
+export type PlayerSearchResult = Pick<PlayerMetadataLite, "id" | "nickname" | "level"> & {
+  latest_timestamp: number;
+};
+export async function searchPlayer(prefix: string, limit = 20): Promise<PlayerSearchResult[]> {
   prefix = prefix.trim();
   if (!prefix) {
     return [];
   }
-  const result = await apiGet<PlayerMetadataLite[]>(
+  const result = await apiGet<PlayerSearchResult[]>(
     `search_player/${encodeURIComponent(prefix)}?limit=${limit}&tag=all`
   );
   return result || [];