gitfor/platform

import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { adminApproveWaitlist, getAdminWaitlist } from "~/fns/admin";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { EmptyState } from "~/ui/EmptyState";
import { compactInputClass } from "~/ui/Field";
import { RelativeTime } from "~/ui/RelativeTime";

const STATUSES = [
  { value: "all", label: "Everyone" },
  { value: "waiting", label: "Waiting" },
  { value: "invited", label: "Invited" },
  { value: "approved", label: "Approved" },
] as const;
type Status = (typeof STATUSES)[number]["value"];

const SEARCH_DEBOUNCE_MS = 250;
export const WAITLIST_KEY = ["admin", "waitlist"] as const;

/** The waitlist in line order, searchable by email and filterable by status, with "Let in" per person. */
export function WaitlistTable() {
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("");
  const [status, setStatus] = useState<Status>("all");
  const [page, setPage] = useState(1);
  const queryClient = useQueryClient();
  const approve = useAction(adminApproveWaitlist);

  useEffect(() => {
    const timer = setTimeout(() => {
      setQuery(search.trim());
      setPage(1);
    }, SEARCH_DEBOUNCE_MS);
    return () => clearTimeout(timer);
  }, [search]);

  const list = useQuery({
    queryKey: [...WAITLIST_KEY, query, status, page],