diff --git a/src/components/SearchPlayer.tsx b/src/components/SearchPlayer.tsx index 3c4f097..85f189e 100644 --- a/src/components/SearchPlayer.tsx +++ b/src/components/SearchPlayer.tsx @@ -5,12 +5,15 @@ import { formatNumber } from "@/utils/numberUtils"; import { ScoreSaberAPI } from "@/utils/scoresaber/api"; import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; import clsx from "clsx"; +import Link from "next/link"; import { useEffect, useState } from "react"; import Avatar from "./Avatar"; export default function SearchPlayer() { const [search, setSearch] = useState(""); - const [players, setPlayers] = useState([] as ScoresaberPlayer[]); + const [players, setPlayers] = useState( + undefined as ScoresaberPlayer[] | undefined, + ); useEffect(() => { // Don't search if the query is too short @@ -28,14 +31,20 @@ export default function SearchPlayer() { if (id == undefined) return; const player = await ScoreSaberAPI.fetchPlayerData(id); - if (player == undefined) return; + if (player == undefined) { + setPlayers([]); + return; + } setPlayers([player]); } // Search by name const players = await ScoreSaberAPI.searchByName(search); - if (players == undefined) return; + if (players == undefined) { + setPlayers([]); + return; + } setPlayers(players); } @@ -44,7 +53,7 @@ export default function SearchPlayer() { e.preventDefault(); // Take the user to the first account - if (players.length > 0) { + if (players && players.length > 0) { window.location.href = `/player/${players[0].id}/top/1`; } } @@ -68,25 +77,29 @@ export default function SearchPlayer() {
- #{formatNumber(player.rank)} -
-{player.name}
-+ #{formatNumber(player.rank)} +
+{player.name}
+