The UI Coding Round: Three Builds, Done Right

import { useState, useEffect, useRef } from "react";

function Autocomplete({ fetchSuggestions }) {
  const [query, setQuery] = useState("");
  const [items, setItems] = useState([]);
  const [status, setStatus] = useState("idle"); // idle|loading|error|done
  const [active, setActive] = useState(-1);      // highlighted index
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (!query.trim()) { setItems([]); setStatus("idle"); return; }
    const controller = new AbortController();
    const id = setTimeout(async () => {          // debounce ~250ms
      setStatus("loading");
      try {
        const results = await fetchSuggestions(query, controller.signal);
        setItems(results);
        setStatus("done");
        setActive(-1);
      } catch (e) {
        if (e.name !== "AbortError") setStatus("error");
      }
    }, 250);
    return () => { clearTimeout(id); controller.abort(); }; // cancel stale
  }, [query, fetchSuggestions]);

  function onKeyDown(e) {
    if (!open) return;
    if (e.key === "ArrowDown") setActive(i => Math.min(i + 1, items.length - 1));
    else if (e.key === "ArrowUp") setActive(i => Math.max(i - 1, 0));
    else if (e.key === "Enter" && active >= 0) choose(items[active]);
    else if (e.key === "Escape") setOpen(false);
  }
  function choose(item) { setQuery(item.label); setOpen(false); }

  return (
    <div className="ac">
      <input
        role="combobox" aria-expanded={open} aria-controls="ac-list"
        aria-activedescendant={active >= 0 ? `ac-opt-${active}` : undefined}
        value={query} onChange={e => { setQuery(e.target.value); setOpen(true); }}
        onKeyDown={onKeyDown} aria-autocomplete="list"
      />
      {open && (
        <ul id="ac-list" role="listbox">
          {status === "loading" && <li aria-disabled>Loading…</li>}
          {status === "error" && <li aria-disabled>Something went wrong.</li>}
          {status === "done" && items.length === 0 && <li aria-disabled>No results</li>}
          {items.map((item, i) => (
            <li key={item.id} id={`ac-opt-${i}`} role="option"
                aria-selected={i === active}
                onMouseDown={() => choose(item)}>
              {item.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

import { useState, useRef } from "react";

function Tabs({ tabs }) {          // tabs: [{ id, label, content }]
  const [selected, setSelected] = useState(0);
  const refs = useRef([]);

  function onKeyDown(e) {
    let next = null;
    if (e.key === "ArrowRight") next = (selected + 1) % tabs.length;
    else if (e.key === "ArrowLeft") next = (selected - 1 + tabs.length) % tabs.length;
    else if (e.key === "Home") next = 0;
    else if (e.key === "End") next = tabs.length - 1;
    if (next !== null) {
      e.preventDefault();
      setSelected(next);
      refs.current[next]?.focus();   // roving tabindex: move focus with selection
    }
  }

  return (
    <div className="tabs">
      <div role="tablist" aria-label="Sections" onKeyDown={onKeyDown}>
        {tabs.map((t, i) => (
          <button
            key={t.id} role="tab" id={`tab-${t.id}`}
            aria-selected={i === selected} aria-controls={`panel-${t.id}`}
            tabIndex={i === selected ? 0 : -1}   // only the active tab is tab-focusable
            ref={el => (refs.current[i] = el)}
            onClick={() => setSelected(i)}
          >
            {t.label}
          </button>
        ))}
      </div>
      {tabs.map((t, i) => (
        <div
          key={t.id} role="tabpanel" id={`panel-${t.id}`}
          aria-labelledby={`tab-${t.id}`} hidden={i !== selected}
        >
          {t.content}
        </div>
      ))}
    </div>
  );
}

import { useState, useMemo } from "react";

function DataTable({ rows, columns, pageSize = 10 }) {
  const [sort, setSort] = useState({ key: null, dir: "asc" });
  const [filter, setFilter] = useState("");
  const [page, setPage] = useState(0);

  // Derive the visible rows from source state — never store a second copy.
  const view = useMemo(() => {
    let out = rows;
    if (filter) {
      const q = filter.toLowerCase();
      out = out.filter(r =>
        columns.some(c => String(r[c.key]).toLowerCase().includes(q)));
    }
    if (sort.key) {
      out = [...out].sort((a, b) => {
        const [x, y] = [a[sort.key], b[sort.key]];
        const cmp = x < y ? -1 : x > y ? 1 : 0;
        return sort.dir === "asc" ? cmp : -cmp;
      });
    }
    return out;
  }, [rows, columns, filter, sort]);

  const pageCount = Math.max(1, Math.ceil(view.length / pageSize));
  const clamped = Math.min(page, pageCount - 1);
  const pageRows = view.slice(clamped * pageSize, clamped * pageSize + pageSize);

  function toggleSort(key) {
    setSort(s => s.key === key
      ? { key, dir: s.dir === "asc" ? "desc" : "asc" }
      : { key, dir: "asc" });
    setPage(0);
  }

  return (
    <div>
      <input placeholder="Filter…" value={filter}
             onChange={e => { setFilter(e.target.value); setPage(0); }} />
      <table>
        <thead>
          <tr>{columns.map(c => (
            <th key={c.key} aria-sort={sort.key === c.key
                  ? (sort.dir === "asc" ? "ascending" : "descending") : "none"}>
              <button onClick={() => toggleSort(c.key)}>{c.label}</button>
            </th>
          ))}</tr>
        </thead>
        <tbody>
          {pageRows.length === 0
            ? <tr><td colSpan={columns.length}>No matching rows</td></tr>
            : pageRows.map(r => (
                <tr key={r.id}>{columns.map(c => <td key={c.key}>{r[c.key]}</td>)}</tr>
              ))}
        </tbody>
      </table>
      <nav aria-label="Pagination">
        <button disabled={clamped === 0} onClick={() => setPage(clamped - 1)}>Prev</button>
        <span>Page {clamped + 1} of {pageCount}</span>
        <button disabled={clamped >= pageCount - 1} onClick={() => setPage(clamped + 1)}>Next</button>
      </nav>
    </div>
  );
}