add tracked stats indicator
Some checks failed
Deploy / deploy (push) Failing after 1m8s

This commit is contained in:
Lee 2024-09-28 14:38:02 +01:00
parent 891b910686
commit a3392ca468
3 changed files with 64 additions and 1 deletions

@ -0,0 +1,20 @@
import { NextRequest, NextResponse } from "next/server";
import { connectMongo } from "@/common/mongo";
import { IPlayer, PlayerModel } from "@/common/schema/player-schema";
export async function GET(request: NextRequest) {
const id = request.nextUrl.searchParams.get("id");
if (id == null) {
return NextResponse.json(
{ error: "Unknown player. Missing: ?id=" },
{ status: 400 },
);
}
await connectMongo(); // Connect to Mongo
// Fetch the player and return their statistic history
let foundPlayer: IPlayer | null = await PlayerModel.findById(id);
return NextResponse.json({
tracked: foundPlayer != null,
});
}

@ -8,6 +8,7 @@ import PlayerStats from "./player-stats";
import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player"; import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
import Tooltip from "@/components/tooltip"; import Tooltip from "@/components/tooltip";
import { ReactElement } from "react"; import { ReactElement } from "react";
import PlayerTrackedStatus from "@/components/player/player-tracked-status";
/** /**
* Renders the change for a stat. * Renders the change for a stat.
@ -114,7 +115,10 @@ export default function PlayerHeader({ player }: Props) {
</Avatar> </Avatar>
<div className="w-full flex gap-2 flex-col justify-center items-center lg:justify-start lg:items-start"> <div className="w-full flex gap-2 flex-col justify-center items-center lg:justify-start lg:items-start">
<div> <div>
<p className="font-bold text-2xl">{player.name}</p> <div className="flex gap-2 items-center">
<p className="font-bold text-2xl">{player.name}</p>
<PlayerTrackedStatus player={player} />
</div>
<div className="flex flex-col"> <div className="flex flex-col">
<div> <div>
{player.inactive && ( {player.inactive && (

@ -0,0 +1,39 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
import ky from "ky";
import { config } from "../../../config";
import Tooltip from "@/components/tooltip";
import { InformationCircleIcon } from "@heroicons/react/16/solid";
type Props = {
player: ScoreSaberPlayer;
};
export default function PlayerTrackedStatus({ player }: Props) {
const { data, isLoading, isError } = useQuery({
queryKey: ["playerIsBeingTracked", player.id],
queryFn: () =>
ky
.get<{
tracked: boolean;
}>(`${config.siteUrl}/api/player/isbeingtracked?id=${player.id}`)
.json(),
});
if (isLoading || isError || !data?.tracked) {
return undefined;
}
return (
<div className="flex gap-2">
<Tooltip
display={<p>This player is having their statistics tracked!</p>}
side="bottom"
>
<InformationCircleIcon className="w-6 h-6 text-neutral-200" />
</Tooltip>
</div>
);
}