Function SearchUsers

web/src/app/SearchUsers.tsx:13–173

({
  accessToken,
  selected,
  onChange,
}: {
  accessToken: string | null;
  selected: DirectoryItem[];
  onChange: (v: DirectoryItem[]) => void;
})

};

export function SearchUsers({
  accessToken,
  selected,
  onChange,
}: {
  accessToken: string | null;
  selected: DirectoryItem[];
  onChange: (v: DirectoryItem[]) => void;
}) {
  const [q, setQ] = useState("");
  const [debouncedQ, setDebouncedQ] = useState("");
  const [includeGroups, setIncludeGroups] = useState(true);
  const [results, setResults] = useState<DirectoryItem[]>([]);
  const [loading, setLoading] = useState(false);

  // Debounce the query to avoid excessive API calls while typing
  useEffect(() => {
    const handle = setTimeout(() => setDebouncedQ(q), 300);
    return () => clearTimeout(handle);
  }, [q]);

  useEffect(() => {
    const ctrl = new AbortController();
    let canceled = false;
    const run = async () => {
      if (!accessToken || debouncedQ.trim().length < 2) {
        setResults([]);
        return;
      }
      const url = new URL("/api/search", import.meta.env.VITE_API_URL);
      url.searchParams.set("q", debouncedQ);
      url.searchParams.set("includeGroups", String(includeGroups));
      try {
        setLoading(true);
        const res = await fetch(url, {
          headers: { Authorization: `Bearer ${accessToken}` },
          signal: ctrl.signal,
        });
        if (!res.ok) return;
        const data = await res.json();
        if (!canceled) setResults(data);
      } finally {
        if (!canceled) setLoading(false);
      }
    };
    run();
    return () => {
      canceled = true;
      ctrl.abort();
    };
  }, [debouncedQ, includeGroups, accessToken]);

  const add = (item: DirectoryItem) => {
    if (selected.some((s) => s.id === item.id && s.type === item.type)) return;
    onChange([...selected, item]);
  };
  const remove = (id: string, type: "user" | "group") =>
    onChange(selected.filter((s) => !(s.id === id && s.type === type)));