Frontend/src/app/components/stats.tsx

"use client";

import { Stat } from "@/app/components/stat";
import { ArrowTrendingUpIcon, ServerIcon, UserIcon } from "@heroicons/react/16/solid";
import { ReactElement } from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";

type Stat = {
  /**
   * The metric ID from the websocket.
   */
  id: string;

  /**
   * The display name for this statistic.
   */
  displayName: string;

  /**
   * The tooltip to display for this statistic.
   */
  tooltip: string;

  /**
   * The icon to use for this statistic.
   */
  icon: ReactElement;
};

const stats: Stat[] = [
  {
    id: "totalRequests",
    displayName: "Total Requests",
    tooltip: "The total amount of requests to the API",
    icon: <ArrowTrendingUpIcon width={24} height={24} />,
  },
  {
    id: "uniquePlayerLookups",
    displayName: "Player Lookups",
    tooltip: "The unique amount of player lookups",
    icon: <UserIcon width={24} height={24} />,
  },
  {
    id: "uniqueServerLookups",
    displayName: "Server Lookups",
    tooltip: "The unique amount of server lookups",
    icon: <ServerIcon width={24} height={24} />,
  },
];

export function Stats(): ReactElement {
  const { lastMessage, readyState } = useWebSocket("wss://api.mcutils.xyz/websocket/metrics");
  const metrics = lastMessage !== null && readyState == ReadyState.OPEN ? JSON.parse(lastMessage.data) : undefined;

  return (
    <div className="flex gap-2 flex-wrap justify-center">
      {stats.map((stat, index) => {
        const value = metrics ? metrics[stat.id] : "???";

        return (
          <Tooltip key={index}>
            <TooltipTrigger className="cursor-default">
              <Stat title={stat.displayName} value={value} icon={stat.icon} />
            </TooltipTrigger>
            <TooltipContent>
              <p>{stat.tooltip}</p>
            </TooltipContent>
          </Tooltip>
        );
      })}
    </div>
  );
}