@weirdfingers/boards 0.6.2 → 0.7.0

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/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,
   };

package/src/hooks/useMultiUpload.ts

@@ -0,0 +1,309 @@
+/**
+ * Hook for uploading multiple artifacts concurrently with individual progress tracking.
+ */
+
+import { useCallback, useState, useRef } from "react";
+import { useMutation } from "urql";
+import { UPLOAD_ARTIFACT_FROM_URL, ArtifactType } from "../graphql/operations";
+import { useAuth } from "../auth/context";
+import { useApiConfig } from "../config/ApiConfigContext";
+
+export interface MultiUploadRequest {
+  boardId: string;
+  artifactType: ArtifactType;
+  source: File | string; // File object or URL string
+  userDescription?: string;
+  parentGenerationId?: string;
+}
+
+export interface MultiUploadResult {
+  id: string;
+  storageUrl: string;
+  thumbnailUrl?: string;
+  status: "completed" | "failed";
+  artifactType: ArtifactType;
+  generatorName: string;
+}
+
+export type UploadStatus = "pending" | "uploading" | "completed" | "failed";
+
+export interface UploadItem {
+  id: string;
+  file: File | string;
+  fileName: string;
+  status: UploadStatus;
+  progress: number;
+  result?: MultiUploadResult;
+  error?: Error;
+}
+
+export interface MultiUploadHook {
+  uploadMultiple: (requests: MultiUploadRequest[]) => Promise<MultiUploadResult[]>;
+  uploads: UploadItem[];
+  isUploading: boolean;
+  overallProgress: number;
+  clearUploads: () => void;
+  cancelUpload: (uploadId: string) => void;
+}
+
+let uploadIdCounter = 0;
+
+function generateUploadId(): string {
+  return `upload-${Date.now()}-${++uploadIdCounter}`;
+}
+
+function getFileName(source: File | string): string {
+  if (typeof source === "string") {
+    try {
+      const url = new URL(source);
+      const pathParts = url.pathname.split("/");
+      return pathParts[pathParts.length - 1] || source;
+    } catch {
+      return source;
+    }
+  }
+  return source.name;
+}
+
+export function useMultiUpload(): MultiUploadHook {
+  const [uploads, setUploads] = useState<UploadItem[]>([]);
+  const abortControllersRef = useRef<Map<string, () => void>>(new Map());
+
+  const { apiUrl } = useApiConfig();
+  const auth = useAuth();
+
+  const [, uploadFromUrlMutation] = useMutation(UPLOAD_ARTIFACT_FROM_URL);
+
+  const updateUpload = useCallback(
+    (uploadId: string, updates: Partial<UploadItem>) => {
+      setUploads((prev) =>
+        prev.map((item) =>
+          item.id === uploadId ? { ...item, ...updates } : item
+        )
+      );
+    },
+    []
+  );
+
+  const uploadSingle = useCallback(
+    async (
+      uploadId: string,
+      request: MultiUploadRequest
+    ): Promise<MultiUploadResult> => {
+      updateUpload(uploadId, { status: "uploading", progress: 0 });
+
+      try {
+        // Handle URL upload via GraphQL
+        if (typeof request.source === "string") {
+          const result = await uploadFromUrlMutation({
+            input: {
+              boardId: request.boardId,
+              artifactType: request.artifactType,
+              fileUrl: request.source,
+              userDescription: request.userDescription,
+              parentGenerationId: request.parentGenerationId,
+            },
+          });
+
+          if (result.error) {
+            throw new Error(result.error.message);
+          }
+
+          if (!result.data?.uploadArtifact) {
+            throw new Error("Upload failed");
+          }
+
+          const uploadResult: MultiUploadResult = {
+            id: result.data.uploadArtifact.id,
+            storageUrl: result.data.uploadArtifact.storageUrl,
+            thumbnailUrl: result.data.uploadArtifact.thumbnailUrl,
+            status: "completed",
+            artifactType: result.data.uploadArtifact.artifactType,
+            generatorName: result.data.uploadArtifact.generatorName,
+          };
+
+          updateUpload(uploadId, {
+            status: "completed",
+            progress: 100,
+            result: uploadResult,
+          });
+
+          return uploadResult;
+        }
+
+        // Handle file upload via REST API
+        const formData = new FormData();
+        formData.append("board_id", request.boardId);
+        formData.append("artifact_type", request.artifactType.toLowerCase());
+        formData.append("file", request.source);
+        if (request.userDescription) {
+          formData.append("user_description", request.userDescription);
+        }
+        if (request.parentGenerationId) {
+          formData.append("parent_generation_id", request.parentGenerationId);
+        }
+
+        const token = await auth.getToken();
+        const headers: Record<string, string> = {};
+        if (token) {
+          headers.Authorization = `Bearer ${token}`;
+        }
+
+        // Use XMLHttpRequest for progress tracking
+        const result = await new Promise<MultiUploadResult>(
+          (resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+
+            // Store abort function for cancellation
+            abortControllersRef.current.set(uploadId, () => xhr.abort());
+
+            // Cleanup function to ensure abort controller is always removed
+            const cleanup = () => {
+              abortControllersRef.current.delete(uploadId);
+            };
+
+            xhr.upload.addEventListener("progress", (e) => {
+              if (e.lengthComputable) {
+                const percentComplete = (e.loaded / e.total) * 100;
+                updateUpload(uploadId, { progress: percentComplete });
+              }
+            });
+
+            xhr.addEventListener("load", () => {
+              cleanup();
+              if (xhr.status === 200) {
+                try {
+                  const data = JSON.parse(xhr.responseText);
+                  resolve({
+                    id: data.id,
+                    storageUrl: data.storageUrl,
+                    thumbnailUrl: data.thumbnailUrl,
+                    status: "completed",
+                    artifactType: data.artifactType as ArtifactType,
+                    generatorName: data.generatorName,
+                  });
+                } catch (err) {
+                  reject(new Error("Failed to parse response"));
+                }
+              } else {
+                try {
+                  const errorData = JSON.parse(xhr.responseText);
+                  reject(
+                    new Error(
+                      errorData.detail || `Upload failed: ${xhr.statusText}`
+                    )
+                  );
+                } catch {
+                  reject(new Error(`Upload failed: ${xhr.statusText}`));
+                }
+              }
+            });
+
+            xhr.addEventListener("error", () => {
+              cleanup();
+              reject(new Error("Upload failed: Network error"));
+            });
+
+            xhr.addEventListener("abort", () => {
+              cleanup();
+              reject(new Error("Upload cancelled"));
+            });
+
+            xhr.addEventListener("loadend", () => {
+              // Ensure cleanup happens in all cases (additional safety net)
+              cleanup();
+            });
+
+            xhr.open("POST", `${apiUrl}/api/uploads/artifact`);
+            Object.entries(headers).forEach(([key, value]) => {
+              xhr.setRequestHeader(key, value);
+            });
+            xhr.send(formData);
+          }
+        );
+
+        updateUpload(uploadId, {
+          status: "completed",
+          progress: 100,
+          result,
+        });
+
+        return result;
+      } catch (err) {
+        const uploadError =
+          err instanceof Error ? err : new Error("Upload failed");
+
+        updateUpload(uploadId, {
+          status: "failed",
+          error: uploadError,
+        });
+
+        throw uploadError;
+      }
+    },
+    [uploadFromUrlMutation, apiUrl, auth, updateUpload]
+  );
+
+  const uploadMultiple = useCallback(
+    async (requests: MultiUploadRequest[]): Promise<MultiUploadResult[]> => {
+      // Create upload items for all requests
+      const newUploads: UploadItem[] = requests.map((request) => ({
+        id: generateUploadId(),
+        file: request.source,
+        fileName: getFileName(request.source),
+        status: "pending" as UploadStatus,
+        progress: 0,
+      }));
+
+      setUploads((prev) => [...prev, ...newUploads]);
+
+      // Upload all files concurrently
+      const results = await Promise.allSettled(
+        requests.map((request, index) =>
+          uploadSingle(newUploads[index].id, request)
+        )
+      );
+
+      // Extract successful results
+      const successfulResults: MultiUploadResult[] = [];
+      results.forEach((result) => {
+        if (result.status === "fulfilled") {
+          successfulResults.push(result.value);
+        }
+      });
+
+      return successfulResults;
+    },
+    [uploadSingle]
+  );
+
+  const clearUploads = useCallback(() => {
+    // Abort any in-progress uploads
+    abortControllersRef.current.forEach((abort) => abort());
+    abortControllersRef.current.clear();
+    setUploads([]);
+  }, []);
+
+  const cancelUpload = useCallback((uploadId: string) => {
+    const abort = abortControllersRef.current.get(uploadId);
+    if (abort) {
+      abort();
+    }
+  }, []);
+
+  // Calculate derived state
+  const isUploading = uploads.some((u) => u.status === "uploading");
+  const overallProgress =
+    uploads.length > 0
+      ? uploads.reduce((sum, u) => sum + u.progress, 0) / uploads.length
+      : 0;
+
+  return {
+    uploadMultiple,
+    uploads,
+    isUploading,
+    overallProgress,
+    clearUploads,
+    cancelUpload,
+  };
+}

package/src/index.ts

@@ -32,7 +32,7 @@ export { useBoards } from "./hooks/useBoards";
 export { useBoard } from "./hooks/useBoard";
 export { useGeneration } from "./hooks/useGeneration";
 export { useGenerators } from "./hooks/useGenerators";
-export { useUpload } from "./hooks/useUpload";
+export { useMultiUpload } from "./hooks/useMultiUpload";
 export type { Generator, JSONSchema7 } from "./hooks/useGenerators";
 export {
   useAncestry,
@@ -46,10 +46,12 @@ export type {
   DescendantNode,
 } from "./hooks/useLineage";
 export type {
-  UploadRequest,
-  UploadResult,
-  UploadHook,
-} from "./hooks/useUpload";
+  MultiUploadRequest,
+  MultiUploadResult,
+  MultiUploadHook,
+  UploadItem,
+  UploadStatus,
+} from "./hooks/useMultiUpload";
 
 // Generator schema utilities
 export * from "./types/generatorSchema";