@weirdfingers/boards 0.6.1 → 0.7.0

package/src/graphql/__tests__/operations.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { UPDATE_BOARD, type UpdateBoardInput } from "../operations";
+
+describe("UPDATE_BOARD mutation", () => {
+  it("should have correct signature with id inside input", () => {
+    const mutationString = UPDATE_BOARD.loc?.source.body || "";
+
+    // Should have single $input parameter
+    expect(mutationString).toContain(
+      "mutation UpdateBoard($input: UpdateBoardInput!)"
+    );
+
+    // Should call updateBoard with input only
+    expect(mutationString).toContain("updateBoard(input: $input)");
+
+    // Should NOT have separate $id parameter (the bug from issue #189)
+    expect(mutationString).not.toContain("$id: UUID!");
+    expect(mutationString).not.toContain("updateBoard(id: $id");
+  });
+});
+
+describe("UpdateBoardInput interface", () => {
+  it("should include id as a required field", () => {
+    // TypeScript compile-time check - if this compiles, the interface is correct
+    const validInput: UpdateBoardInput = {
+      id: "board-123",
+      title: "Test",
+    };
+
+    expect(validInput.id).toBe("board-123");
+  });
+
+  it("should allow optional fields", () => {
+    // Should compile with just id
+    const minimalInput: UpdateBoardInput = {
+      id: "board-123",
+    };
+
+    expect(minimalInput.id).toBe("board-123");
+
+    // Should compile with all fields
+    const fullInput: UpdateBoardInput = {
+      id: "board-123",
+      title: "Test Title",
+      description: "Test Description",
+      isPublic: true,
+      settings: { foo: "bar" },
+      metadata: { baz: "qux" },
+    };
+
+    expect(fullInput.title).toBe("Test Title");
+  });
+});

package/src/graphql/operations.ts

@@ -245,8 +245,8 @@ export const CREATE_BOARD = gql`
 
 export const UPDATE_BOARD = gql`
   ${BOARD_FRAGMENT}
-  mutation UpdateBoard($id: UUID!, $input: UpdateBoardInput!) {
-    updateBoard(id: $id, input: $input) {
+  mutation UpdateBoard($input: UpdateBoardInput!) {
+    updateBoard(input: $input) {
       ...BoardFragment
     }
   }
@@ -322,6 +322,12 @@ export const RETRY_GENERATION = gql`
   }
 `;
 
+export const DELETE_GENERATION = gql`
+  mutation DeleteGeneration($id: UUID!) {
+    deleteGeneration(id: $id)
+  }
+`;
+
 export const UPLOAD_ARTIFACT_FROM_URL = gql`
   ${GENERATION_FRAGMENT}
   mutation UploadArtifactFromUrl($input: UploadArtifactInput!) {
@@ -341,6 +347,7 @@ export interface CreateBoardInput {
 }
 
 export interface UpdateBoardInput {
+  id: string;
   title?: string;
   description?: string;
   isPublic?: boolean;

package/src/hooks/__tests__/useMultiUpload.test.ts

@@ -0,0 +1,238 @@
+/**
+ * Tests for useMultiUpload hook.
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { useMultiUpload } from "../useMultiUpload";
+import { ArtifactType } from "../../graphql/operations";
+
+// Mock dependencies
+vi.mock("urql", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("urql")>();
+  return {
+    ...actual,
+    useMutation: vi.fn(() => [
+      {},
+      vi.fn().mockResolvedValue({
+        data: {
+          uploadArtifact: {
+            id: "test-artifact-id",
+            storageUrl: "https://example.com/artifact.jpg",
+            thumbnailUrl: "https://example.com/thumb.jpg",
+            artifactType: "IMAGE",
+            generatorName: "user-upload-image",
+          },
+        },
+      }),
+    ]),
+  };
+});
+
+vi.mock("../../auth/context", () => ({
+  useAuth: vi.fn(() => ({
+    getToken: vi.fn().mockResolvedValue("test-token"),
+  })),
+}));
+
+vi.mock("../../config/ApiConfigContext", () => ({
+  useApiConfig: vi.fn(() => ({
+    apiUrl: "http://localhost:8088",
+  })),
+}));
+
+describe("useMultiUpload", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should initialize with empty uploads", () => {
+    const { result } = renderHook(() => useMultiUpload());
+
+    expect(result.current.uploads).toEqual([]);
+    expect(result.current.isUploading).toBe(false);
+    expect(result.current.overallProgress).toBe(0);
+  });
+
+  it("should handle URL upload via GraphQL", async () => {
+    const { result } = renderHook(() => useMultiUpload());
+
+    const uploadPromise = result.current.uploadMultiple([
+      {
+        boardId: "test-board-id",
+        artifactType: ArtifactType.IMAGE,
+        source: "https://example.com/image.jpg",
+      },
+    ]);
+
+    // Wait for the upload to start
+    await waitFor(() => {
+      expect(result.current.uploads.length).toBe(1);
+    });
+
+    expect(result.current.uploads[0].fileName).toBe("image.jpg");
+
+    // Wait for upload to complete
+    const results = await uploadPromise;
+
+    await waitFor(() => {
+      expect(result.current.uploads[0].status).toBe("completed");
+    });
+
+    expect(results).toHaveLength(1);
+    expect(results[0].id).toBe("test-artifact-id");
+  });
+
+  it("should handle multiple URL uploads", async () => {
+    const { result } = renderHook(() => useMultiUpload());
+
+    const uploadPromise = result.current.uploadMultiple([
+      {
+        boardId: "test-board-id",
+        artifactType: ArtifactType.IMAGE,
+        source: "https://example.com/image1.jpg",
+      },
+      {
+        boardId: "test-board-id",
+        artifactType: ArtifactType.IMAGE,
+        source: "https://example.com/image2.jpg",
+      },
+    ]);
+
+    await waitFor(() => {
+      expect(result.current.uploads.length).toBe(2);
+    });
+
+    const results = await uploadPromise;
+
+    await waitFor(() => {
+      expect(result.current.uploads.filter((u) => u.status === "completed")).toHaveLength(2);
+    });
+
+    expect(results).toHaveLength(2);
+  });
+
+  it("should track upload progress", async () => {
+    const { result } = renderHook(() => useMultiUpload());
+
+    result.current.uploadMultiple([
+      {
+        boardId: "test-board-id",
+        artifactType: ArtifactType.IMAGE,
+        source: "https://example.com/image.jpg",
+      },
+    ]);
+
+    await waitFor(() => {
+      expect(result.current.uploads.length).toBeGreaterThan(0);
+    });
+
+    // Initially progress should be 0
+    expect(result.current.overallProgress).toBeGreaterThanOrEqual(0);
+  });
+
+  it("should clear uploads", async () => {
+    const { result } = renderHook(() => useMultiUpload());
+
+    await result.current.uploadMultiple([
+      {
+        boardId: "test-board-id",
+        artifactType: ArtifactType.IMAGE,
+        source: "https://example.com/image.jpg",
+      },
+    ]);
+
+    await waitFor(() => {
+      expect(result.current.uploads.length).toBeGreaterThan(0);
+    });
+
+    result.current.clearUploads();
+
+    await waitFor(() => {
+      expect(result.current.uploads).toEqual([]);
+    });
+  });
+
+  it("should extract filename from URL", async () => {
+    const { result } = renderHook(() => useMultiUpload());
+
+    result.current.uploadMultiple([
+      {
+        boardId: "test-board-id",
+        artifactType: ArtifactType.IMAGE,
+        source: "https://example.com/path/to/my-image.jpg",
+      },
+    ]);
+
+    await waitFor(() => {
+      expect(result.current.uploads.length).toBe(1);
+    });
+
+    expect(result.current.uploads[0].fileName).toBe("my-image.jpg");
+  });
+
+  it("should handle upload failures gracefully", async () => {
+    // Mock a failed mutation
+    const { useMutation } = await import("urql");
+    vi.mocked(useMutation).mockReturnValueOnce([
+      {},
+      vi.fn().mockResolvedValue({
+        error: new Error("Upload failed"),
+      }),
+    ]);
+
+    const { result } = renderHook(() => useMultiUpload());
+
+    const uploadPromise = result.current.uploadMultiple([
+      {
+        boardId: "test-board-id",
+        artifactType: ArtifactType.IMAGE,
+        source: "https://example.com/image.jpg",
+      },
+    ]);
+
+    await waitFor(() => {
+      expect(result.current.uploads.length).toBe(1);
+    });
+
+    const results = await uploadPromise;
+
+    // Should return empty array when all uploads fail
+    expect(results).toEqual([]);
+
+    await waitFor(() => {
+      expect(result.current.uploads[0].status).toBe("failed");
+    });
+
+    expect(result.current.uploads[0].error).toBeDefined();
+  });
+
+  it("should calculate overall progress correctly", async () => {
+    const { result } = renderHook(() => useMultiUpload());
+
+    result.current.uploadMultiple([
+      {
+        boardId: "test-board-id",
+        artifactType: ArtifactType.IMAGE,
+        source: "https://example.com/image1.jpg",
+      },
+      {
+        boardId: "test-board-id",
+        artifactType: ArtifactType.IMAGE,
+        source: "https://example.com/image2.jpg",
+      },
+    ]);
+
+    await waitFor(() => {
+      expect(result.current.uploads.length).toBe(2);
+    });
+
+    // Wait for completion
+    await waitFor(() => {
+      expect(result.current.uploads.filter((u) => u.status === "completed")).toHaveLength(2);
+    });
+
+    // Overall progress should be 100 when all complete
+    expect(result.current.overallProgress).toBe(100);
+  });
+});

package/src/hooks/useBoard.ts

@@ -189,8 +189,10 @@ export function useBoard(
       }
 
       const result = await updateBoardMutation({
-        id: boardId,
-        input: updates,
+        input: {
+          id: boardId,
+          ...updates,
+        },
       });
 
       if (result.error) {

package/src/hooks/useGeneration.ts

@@ -9,6 +9,7 @@ import {
   CREATE_GENERATION,
   CANCEL_GENERATION,
   RETRY_GENERATION,
+  DELETE_GENERATION,
   CreateGenerationInput,
   ArtifactType,
 } from "../graphql/operations";
@@ -98,6 +99,7 @@ export interface GenerationHook {
   submit: (request: GenerationRequest) => Promise<string>;
   cancel: (jobId: string) => Promise<void>;
   retry: (jobId: string) => Promise<void>;
+  deleteGeneration: (jobId: string) => Promise<void>;
 
   // History
   history: GenerationResult[];
@@ -122,6 +124,7 @@ export function useGeneration(): GenerationHook {
   const [, createGenerationMutation] = useMutation(CREATE_GENERATION);
   const [, cancelGenerationMutation] = useMutation(CANCEL_GENERATION);
   const [, retryGenerationMutation] = useMutation(RETRY_GENERATION);
+  const [, deleteGenerationMutation] = useMutation(DELETE_GENERATION);
 
   // Clean up SSE connections on unmount
   useEffect(() => {
@@ -411,6 +414,46 @@ export function useGeneration(): GenerationHook {
     [retryGenerationMutation, connectToSSE]
   );
 
+  const deleteGeneration = useCallback(
+    async (jobId: string): Promise<void> => {
+      try {
+        // Delete via GraphQL
+        const result = await deleteGenerationMutation({ id: jobId });
+
+        if (result.error) {
+          throw new Error(result.error.message);
+        }
+
+        if (!result.data?.deleteGeneration) {
+          throw new Error("Failed to delete generation");
+        }
+
+        // Close SSE connection if any
+        const controller = abortControllers.current.get(jobId);
+        if (controller) {
+          controller.abort();
+          abortControllers.current.delete(jobId);
+        }
+
+        // Clear state if this was the current generation
+        if (progress?.jobId === jobId) {
+          setProgress(null);
+          setResult(null);
+          setIsGenerating(false);
+        }
+
+        // Remove from history
+        setHistory((prev) => prev.filter((item) => item.jobId !== jobId));
+      } catch (err) {
+        setError(
+          err instanceof Error ? err : new Error("Failed to delete generation")
+        );
+        throw err;
+      }
+    },
+    [deleteGenerationMutation, progress]
+  );
+
   const clearHistory = useCallback(() => {
     setHistory([]);
   }, []);
@@ -423,6 +466,7 @@ export function useGeneration(): GenerationHook {
     submit,
     cancel,
     retry,
+    deleteGeneration,
     history,
     clearHistory,
   };