Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

feat(ssr): add no players found msg on search page

Browse Source
This commit is contained in:
Lee 2023-11-09 19:58:17 +00:00
parent 5e4dcf1b37
commit 13b814700f
2 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/SearchPlayer.tsx
View File

@ -5,12 +5,15 @@ import { formatNumber } from "@/utils/numberUtils";
import { ScoreSaberAPI } from "@/utils/scoresaber/api"; import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
import clsx from "clsx"; import clsx from "clsx";
import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Avatar from "./Avatar"; import Avatar from "./Avatar";
export default function SearchPlayer() { export default function SearchPlayer() {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [players, setPlayers] = useState([] as ScoresaberPlayer[]); const [players, setPlayers] = useState(
undefined as ScoresaberPlayer[] | undefined,
);
useEffect(() => { useEffect(() => {
// Don't search if the query is too short // Don't search if the query is too short
@ -28,14 +31,20 @@ export default function SearchPlayer() {
if (id == undefined) return; if (id == undefined) return;
const player = await ScoreSaberAPI.fetchPlayerData(id); const player = await ScoreSaberAPI.fetchPlayerData(id);
if (player == undefined) return; if (player == undefined) {
setPlayers([]);
return;
}
setPlayers([player]); setPlayers([player]);
} }
// Search by name // Search by name
const players = await ScoreSaberAPI.searchByName(search); const players = await ScoreSaberAPI.searchByName(search);
if (players == undefined) return; if (players == undefined) {
setPlayers([]);
return;
}
setPlayers(players); setPlayers(players);
} }
@ -44,7 +53,7 @@ export default function SearchPlayer() {
e.preventDefault(); e.preventDefault();
// Take the user to the first account // 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`; window.location.href = `/player/${players[0].id}/top/1`;
} }
} }
@ -68,25 +77,29 @@ export default function SearchPlayer() {
<div <div
className={clsx( className={clsx(
"absolute z-20 mt-7 flex max-h-[200px] min-w-[14rem] flex-col divide-y overflow-y-auto rounded-md bg-popover shadow-sm md:max-h-[300px]", "absolute z-20 mt-7 flex max-h-[200px] min-w-[14rem] flex-col divide-y overflow-y-auto rounded-md bg-popover shadow-sm md:max-h-[300px]",
players.length > 0 ? "flex" : "hidden", players ? "flex" : "hidden",
)} )}
> >
{players.map((player: ScoresaberPlayer) => ( {players && players.length > 0 ? (
<a players.map((player: ScoresaberPlayer) => (
key={player.id} <Link
className="flex min-w-[14rem] items-center gap-2 p-2 transition-all hover:bg-background" key={player.id}
href={`/player/${player.id}/top/1`} className="flex min-w-[14rem] items-center gap-2 p-2 transition-all hover:bg-background"
> href={`/player/${player.id}/top/1`}
<Avatar label="Account" size={40} url={player.profilePicture} /> >
<Avatar label="Account" size={40} url={player.profilePicture} />
<div> <div>
<p className="text-xs text-gray-400"> <p className="text-xs text-gray-400">
#{formatNumber(player.rank)} #{formatNumber(player.rank)}
</p> </p>
<p className="text-sm">{player.name}</p> <p className="text-sm">{player.name}</p>
</div> </div>
</a> </Link>
))} ))
) : (
<div className="p-2">No players found</div>
)}
</div> </div>
</form> </form>
); );

2
src/components/leaderboard/Leaderboard.tsx
View File

@ -98,7 +98,7 @@ export default function Leaderboard({ id, page }: LeaderboardProps) {
<Container> <Container>
<div className="mt-2 flex flex-col gap-2 xl:flex-row"> <div className="mt-2 flex flex-col gap-2 xl:flex-row">
<Card outerClassName="h-fit pt-3" className="flex"> <Card outerClassName="h-fit pt-3" className="flex">
<div className="flex min-w-[320px] flex-wrap justify-between gap-2 md:justify-start"> <div className="flex min-w-[300px] flex-wrap justify-between gap-2 md:justify-start">
<div className="flex gap-2"> <div className="flex gap-2">
<Image <Image
src={coverImage} src={coverImage}