Adopt React Query and live updates across all UI pages

Replace custom useApi/useAgents hooks with @tanstack/react-query. Add LiveUpdatesProvider for WebSocket-driven cache invalidation. Add queryKeys module for centralized cache key management. Rework all pages and dialogs to use React Query mutations and queries. Improve CompanyContext with query-based data fetching. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-17 12:24:48 -06:00
parent c9c75bbc0a
commit 3dc3813266
30 changed files with 744 additions and 465 deletions
--- a/ui/src/components/CommandPalette.tsx
+++ b/ui/src/components/CommandPalette.tsx
@@ -1,10 +1,12 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import { useCompany } from "../context/CompanyContext";
 import { useDialog } from "../context/DialogContext";
 import { issuesApi } from "../api/issues";
 import { agentsApi } from "../api/agents";
 import { projectsApi } from "../api/projects";
+import { queryKeys } from "../lib/queryKeys";
 import {
  CommandDialog,
  CommandEmpty,
@@ -27,13 +29,9 @@ import {
  SquarePen,
  Plus,
 } from "lucide-react";
-import type { Issue, Agent, Project } from "@paperclip/shared";

 export function CommandPalette() {
  const [open, setOpen] = useState(false);
-  const [issues, setIssues] = useState<Issue[]>([]);
-  const [agents, setAgents] = useState<Agent[]>([]);
-  const [projects, setProjects] = useState<Project[]>([]);
  const navigate = useNavigate();
  const { selectedCompanyId } = useCompany();
  const { openNewIssue } = useDialog();
@@ -49,23 +47,23 @@ export function CommandPalette() {
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, []);

-  const loadData = useCallback(async () => {
-    if (!selectedCompanyId) return;
-    const [i, a, p] = await Promise.all([
-      issuesApi.list(selectedCompanyId).catch(() => []),
-      agentsApi.list(selectedCompanyId).catch(() => []),
-      projectsApi.list(selectedCompanyId).catch(() => []),
-    ]);
-    setIssues(i);
-    setAgents(a);
-    setProjects(p);
-  }, [selectedCompanyId]);
+  const { data: issues = [] } = useQuery({
+    queryKey: queryKeys.issues.list(selectedCompanyId!),
+    queryFn: () => issuesApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && open,
+  });

-  useEffect(() => {
-    if (open) {
-      void loadData();
-    }
-  }, [open, loadData]);
+  const { data: agents = [] } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && open,
+  });
+
+  const { data: projects = [] } = useQuery({
+    queryKey: queryKeys.projects.list(selectedCompanyId!),
+    queryFn: () => projectsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && open,
+  });

  function go(path: string) {
    setOpen(false);
--- a/ui/src/components/IssueProperties.tsx
+++ b/ui/src/components/IssueProperties.tsx
@@ -1,6 +1,8 @@
 import type { Issue } from "@paperclip/shared";
+import { useQuery } from "@tanstack/react-query";
+import { agentsApi } from "../api/agents";
 import { useCompany } from "../context/CompanyContext";
-import { useAgents } from "../hooks/useAgents";
+import { queryKeys } from "../lib/queryKeys";
 import { StatusIcon } from "./StatusIcon";
 import { PriorityIcon } from "./PriorityIcon";
 import { formatDate } from "../lib/utils";
@@ -31,7 +33,11 @@ function priorityLabel(priority: string): string {

 export function IssueProperties({ issue, onUpdate }: IssuePropertiesProps) {
  const { selectedCompanyId } = useCompany();
-  const { data: agents } = useAgents(selectedCompanyId);
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });

  const agentName = (id: string | null) => {
    if (!id || !agents) return null;
--- a/ui/src/components/NewIssueDialog.tsx
+++ b/ui/src/components/NewIssueDialog.tsx
@@ -1,10 +1,11 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useEffect } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
 import { issuesApi } from "../api/issues";
 import { projectsApi } from "../api/projects";
-import { useAgents } from "../hooks/useAgents";
-import { useApi } from "../hooks/useApi";
+import { agentsApi } from "../api/agents";
+import { queryKeys } from "../lib/queryKeys";
 import {
  Dialog,
  DialogContent,
@@ -47,13 +48,10 @@ const priorities = [
  { value: "low", label: "Low", icon: ArrowDown, color: "text-blue-400" },
 ];

-interface NewIssueDialogProps {
-  onCreated?: () => void;
-}
-
-export function NewIssueDialog({ onCreated }: NewIssueDialogProps) {
+export function NewIssueDialog() {
  const { newIssueOpen, newIssueDefaults, closeNewIssue } = useDialog();
  const { selectedCompanyId, selectedCompany } = useCompany();
+  const queryClient = useQueryClient();
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [status, setStatus] = useState("todo");
@@ -61,7 +59,6 @@ export function NewIssueDialog({ onCreated }: NewIssueDialogProps) {
  const [assigneeId, setAssigneeId] = useState("");
  const [projectId, setProjectId] = useState("");
  const [expanded, setExpanded] = useState(false);
-  const [submitting, setSubmitting] = useState(false);

  // Popover states
  const [statusOpen, setStatusOpen] = useState(false);
@@ -70,13 +67,27 @@ export function NewIssueDialog({ onCreated }: NewIssueDialogProps) {
  const [projectOpen, setProjectOpen] = useState(false);
  const [moreOpen, setMoreOpen] = useState(false);

-  const { data: agents } = useAgents(selectedCompanyId);
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && newIssueOpen,
+  });

-  const projectsFetcher = useCallback(() => {
-    if (!selectedCompanyId) return Promise.resolve([] as Project[]);
-    return projectsApi.list(selectedCompanyId);
-  }, [selectedCompanyId]);
-  const { data: projects } = useApi(projectsFetcher);
+  const { data: projects } = useQuery({
+    queryKey: queryKeys.projects.list(selectedCompanyId!),
+    queryFn: () => projectsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && newIssueOpen,
+  });
+
+  const createIssue = useMutation({
+    mutationFn: (data: Record<string, unknown>) =>
+      issuesApi.create(selectedCompanyId!, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId!) });
+      reset();
+      closeNewIssue();
+    },
+  });

  useEffect(() => {
    if (newIssueOpen) {
@@ -96,25 +107,16 @@ export function NewIssueDialog({ onCreated }: NewIssueDialogProps) {
    setExpanded(false);
  }

-  async function handleSubmit() {
+  function handleSubmit() {
    if (!selectedCompanyId || !title.trim()) return;
-
-    setSubmitting(true);
-    try {
-      await issuesApi.create(selectedCompanyId, {
-        title: title.trim(),
-        description: description.trim() || undefined,
-        status,
-        priority: priority || "medium",
-        ...(assigneeId ? { assigneeAgentId: assigneeId } : {}),
-        ...(projectId ? { projectId } : {}),
-      });
-      reset();
-      closeNewIssue();
-      onCreated?.();
-    } finally {
-      setSubmitting(false);
-    }
+    createIssue.mutate({
+      title: title.trim(),
+      description: description.trim() || undefined,
+      status,
+      priority: priority || "medium",
+      ...(assigneeId ? { assigneeAgentId: assigneeId } : {}),
+      ...(projectId ? { projectId } : {}),
+    });
  }

  function handleKeyDown(e: React.KeyboardEvent) {
@@ -359,10 +361,10 @@ export function NewIssueDialog({ onCreated }: NewIssueDialogProps) {
        <div className="flex items-center justify-end px-4 py-2.5 border-t border-border">
          <Button
            size="sm"
-            disabled={!title.trim() || submitting}
+            disabled={!title.trim() || createIssue.isPending}
            onClick={handleSubmit}
          >
-            {submitting ? "Creating..." : "Create issue"}
+            {createIssue.isPending ? "Creating..." : "Create issue"}
          </Button>
        </div>
      </DialogContent>
--- a/ui/src/components/NewProjectDialog.tsx
+++ b/ui/src/components/NewProjectDialog.tsx
@@ -1,9 +1,10 @@
-import { useState, useCallback } from "react";
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
 import { projectsApi } from "../api/projects";
 import { goalsApi } from "../api/goals";
-import { useApi } from "../hooks/useApi";
+import { queryKeys } from "../lib/queryKeys";
 import {
  Dialog,
  DialogContent,
@@ -32,29 +33,35 @@ const projectStatuses = [
  { value: "cancelled", label: "Cancelled" },
 ];

-interface NewProjectDialogProps {
-  onCreated?: () => void;
-}
-
-export function NewProjectDialog({ onCreated }: NewProjectDialogProps) {
+export function NewProjectDialog() {
  const { newProjectOpen, closeNewProject } = useDialog();
  const { selectedCompanyId, selectedCompany } = useCompany();
+  const queryClient = useQueryClient();
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [status, setStatus] = useState("planned");
  const [goalId, setGoalId] = useState("");
  const [targetDate, setTargetDate] = useState("");
  const [expanded, setExpanded] = useState(false);
-  const [submitting, setSubmitting] = useState(false);

  const [statusOpen, setStatusOpen] = useState(false);
  const [goalOpen, setGoalOpen] = useState(false);

-  const goalsFetcher = useCallback(() => {
-    if (!selectedCompanyId) return Promise.resolve([] as Goal[]);
-    return goalsApi.list(selectedCompanyId);
-  }, [selectedCompanyId]);
-  const { data: goals } = useApi(goalsFetcher);
+  const { data: goals } = useQuery({
+    queryKey: queryKeys.goals.list(selectedCompanyId!),
+    queryFn: () => goalsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && newProjectOpen,
+  });
+
+  const createProject = useMutation({
+    mutationFn: (data: Record<string, unknown>) =>
+      projectsApi.create(selectedCompanyId!, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.projects.list(selectedCompanyId!) });
+      reset();
+      closeNewProject();
+    },
+  });

  function reset() {
    setName("");
@@ -65,24 +72,15 @@ export function NewProjectDialog({ onCreated }: NewProjectDialogProps) {
    setExpanded(false);
  }

-  async function handleSubmit() {
+  function handleSubmit() {
    if (!selectedCompanyId || !name.trim()) return;
-
-    setSubmitting(true);
-    try {
-      await projectsApi.create(selectedCompanyId, {
-        name: name.trim(),
-        description: description.trim() || undefined,
-        status,
-        ...(goalId ? { goalId } : {}),
-        ...(targetDate ? { targetDate } : {}),
-      });
-      reset();
-      closeNewProject();
-      onCreated?.();
-    } finally {
-      setSubmitting(false);
-    }
+    createProject.mutate({
+      name: name.trim(),
+      description: description.trim() || undefined,
+      status,
+      ...(goalId ? { goalId } : {}),
+      ...(targetDate ? { targetDate } : {}),
+    });
  }

  function handleKeyDown(e: React.KeyboardEvent) {
@@ -239,10 +237,10 @@ export function NewProjectDialog({ onCreated }: NewProjectDialogProps) {
        <div className="flex items-center justify-end px-4 py-2.5 border-t border-border">
          <Button
            size="sm"
-            disabled={!name.trim() || submitting}
+            disabled={!name.trim() || createProject.isPending}
            onClick={handleSubmit}
          >
-            {submitting ? "Creating..." : "Create project"}
+            {createProject.isPending ? "Creating..." : "Create project"}
          </Button>
        </div>
      </DialogContent>