feat(ssr): add no players found msg on search page
This commit is contained in:
parent
5e4dcf1b37
commit
13b814700f
@ -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,11 +77,12 @@ 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) => (
|
||||||
|
<Link
|
||||||
key={player.id}
|
key={player.id}
|
||||||
className="flex min-w-[14rem] items-center gap-2 p-2 transition-all hover:bg-background"
|
className="flex min-w-[14rem] items-center gap-2 p-2 transition-all hover:bg-background"
|
||||||
href={`/player/${player.id}/top/1`}
|
href={`/player/${player.id}/top/1`}
|
||||||
@ -85,8 +95,11 @@ export default function SearchPlayer() {
|
|||||||
</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>
|
||||||
);
|
);
|
||||||
|
@ -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}
|
||||||
|
Loading…
Reference in New Issue
Block a user