search for new players

Author: hry-gh

src/components/homePage.tsx

@@ -45,6 +45,12 @@ export default function HomePage(): React.ReactElement {
         >
           Whitelist Menu
         </Link>
+        <Link
+          to={"/new_players"}
+          className="border border-[#555555] rounded p-3 cursor-pointer grow clicky"
+        >
+          New Players
+        </Link>
 
         <RoundData />
       </div>

src/components/newPlayers.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from "react";
+import { Player } from "./userLookup";
+import { callApi } from "../helpers/api";
+import { NameExpand } from "./nameExpand";
+import { DetailedCid } from "./detailedCid";
+import { DetailedIp } from "./detailedIp";
+
+export const NewPlayers: React.FC = () => {
+  const [newPlayers, setNewPlayers] = useState<Player[]>();
+  const [searchedTime, setSearchedTime] = useState<number | undefined>();
+
+  const [timeAgo, setTimeAgo] = useState(240);
+
+  useEffect(() => {
+    if (newPlayers && searchedTime === timeAgo) return;
+
+    callApi(`/NewPlayers/${timeAgo}`).then((value) => {
+      value.json().then((json: Player[]) => {
+        setNewPlayers(json);
+        setSearchedTime(timeAgo);
+      });
+    });
+  }, [newPlayers, timeAgo, searchedTime]);
+
+  if (!newPlayers) {
+    return "Loading...";
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-row gap-3 justify-end">
+        <label>Joins since (minutes ago):</label>
+        <input
+          onKeyDown={(ev) => {
+            if (ev.key === "Enter") {
+              console.log("doing it");
+              setTimeAgo(Number.parseInt(ev.currentTarget.value));
+            }
+          }}
+          defaultValue={240}
+          type="number"
+        />
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>CKEY</th>
+            <th>Time Connected</th>
+            <th>CID</th>
+            <th>IP</th>
+          </tr>
+        </thead>
+        <tbody>
+          {newPlayers.map((player) => (
+            <tr key={player.ckey}>
+              <td>
+                <NameExpand name={player.ckey} />
+              </td>
+              <td>
+                {new Date(
+                  Date.parse(player.firstJoinDate!.replace(" ", "T"))
+                ).toLocaleString()}
+              </td>
+              <td>
+                <DetailedCid cid={player.lastKnownCid} />
+              </td>
+              <td>
+                <DetailedIp ip={player.lastKnownIp} />{" "}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

src/components/userLookup.tsx

@@ -134,7 +134,7 @@ export const LookupMenu: React.FC<LookupMenuProps> = (
   );
 };
 
-interface Player {
+export interface Player {
   id: number;
   ckey: string;
   lastLogin: string;

src/main.tsx

@@ -8,6 +8,7 @@ import { Tickets } from "./components/tickets";
 import HomePage from "./components/homePage";
 import { createHashRouter, RouterProvider } from "react-router-dom";
 import { WhitelistMenu } from "./components/whitelistPanel";
+import { NewPlayers } from "./components/newPlayers";
 
 const router = createHashRouter([
   {
@@ -43,6 +44,10 @@ const router = createHashRouter([
         path: "/whitelists",
         element: <WhitelistMenu />,
       },
+      {
+        path: "/new_players",
+        element: <NewPlayers />,
+      },
     ],
   },
 ]);