Function QueryView

packages/web/src/components/QueryView.tsx:12–97

({ id, onBack, onDeleted }: Props)

}

export function QueryView({ id, onBack, onDeleted }: Props) {
  const [query, setQuery] = useState<(Query & { members: Session[] }) | null>(null);

  useEffect(() => {
    api.getQuery(id).then(setQuery).catch(console.error);
  }, [id]);

  if (!query)
    return (
      <div className="work-body">
        <div className="empty">Loading...</div>
      </div>
    );

  const del = async () => {
    if (!confirm(`Delete query "${query.name}"?`)) return;
    await api.deleteQuery(id);
    onDeleted();
  };

  const run = async () => {
    await api.runQuery(id);
    setQuery(await api.getQuery(id));
  };

  return (
    <>
      <div className="work-header">
        <button className="back-btn" onClick={onBack}>
          Back
        </button>
        <div style={{ flex: 1 }}>
          <div className="work-title">{query.name}</div>
          <div className="work-sub">{query.members.length} sessions</div>
        </div>
        <button className="btn secondary" onClick={run}>
          Run
        </button>
        <button className="btn secondary" onClick={del}>
          Delete
        </button>
      </div>
      <div className="work-body">
        <h3
          style={{
            fontSize: 12,
            color: 'var(--text-muted)',
            margin: '0 0 10px',
            textTransform: 'uppercase',
            letterSpacing: '0.06em',
          }}
        >
          Query
        </h3>
        <pre
          className="mono"
          style={{
            fontSize: 12,