use type for tracked status

src/app/(pages)/api/player/isbeingtracked/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { connectMongo } from "@/common/mongo";
 import { IPlayer, PlayerModel } from "@/common/schema/player-schema";
+import { PlayerTrackedSince } from "@/common/player/player-tracked-since";
 
 export async function GET(request: NextRequest) {
   const id = request.nextUrl.searchParams.get("id");
@@ -13,7 +14,7 @@ export async function GET(request: NextRequest) {
   await connectMongo(); // Connect to Mongo
 
   const foundPlayer: IPlayer | null = await PlayerModel.findById(id);
-  const response: { tracked: boolean; trackedSince?: string } = {
+  const response: PlayerTrackedSince = {
     tracked: foundPlayer != null,
   };
   if (foundPlayer != null) {

src/common/player/player-tracked-since.ts

@@ -0,0 +1,11 @@
+export interface PlayerTrackedSince {
+  /**
+   * Whether the player statistics are being tracked
+   */
+  tracked: boolean;
+
+  /**
+   * The date the player was first tracked
+   */
+  trackedSince?: string;
+}

src/components/player/player-tracked-status.tsx

@@ -7,6 +7,7 @@ import { config } from "../../../config";
 import Tooltip from "@/components/tooltip";
 import { InformationCircleIcon } from "@heroicons/react/16/solid";
 import { format } from "@formkit/tempo";
+import { PlayerTrackedSince } from "@/common/player/player-tracked-since";
 
 type Props = {
   player: ScoreSaberPlayer;
@@ -17,10 +18,9 @@ export default function PlayerTrackedStatus({ player }: Props) {
     queryKey: ["playerIsBeingTracked", player.id],
     queryFn: () =>
       ky
-        .get<{
+        .get<PlayerTrackedSince>(
-          tracked: boolean;
+          `${config.siteUrl}/api/player/isbeingtracked?id=${player.id}`,
-          trackedSince: string;
+        )
-        }>(`${config.siteUrl}/api/player/isbeingtracked?id=${player.id}`)
         .json(),
   });
 
@@ -34,7 +34,7 @@ export default function PlayerTrackedStatus({ player }: Props) {
         display={
           <div className="flex flex-col justify-center items-center">
             <p>This player is having their statistics tracked!</p>
-            <p>Tracked Since: {format(data.trackedSince)}</p>
+            <p>Tracked Since: {format(data.trackedSince!)}</p>
           </div>
         }
         side="bottom"