diff --git a/src/app/(protected)/workorders/_components/media/media-uploader.tsx b/src/app/(protected)/workorders/_components/media/media-uploader.tsx index 11bbe349..4546c9da 100644 --- a/src/app/(protected)/workorders/_components/media/media-uploader.tsx +++ b/src/app/(protected)/workorders/_components/media/media-uploader.tsx @@ -25,7 +25,7 @@ type MediaUploaderProps = { onUpload?: (requests: MediaUploadRequest[]) => void; onRemove?: (id: string) => void; onCategorize?: (id: string, category: UploadableMediaCategory) => void; - onRetry?: (localId: string) => void; + onRetry?: (localId: string, signal: AbortSignal) => void; onCancel?: (localId: string) => void; /** Legacy local-only mode (table modal fallback). */ onChange?: (next: MediaFile[]) => void; @@ -103,6 +103,13 @@ export function MediaUploader({ onCancel?.(id); }; + const retry = (id: string) => { + controllers[id]?.abort(); + const controller = new AbortController(); + setControllers((prev) => ({ ...prev, [id]: controller })); + onRetry?.(id, controller.signal); + }; + return (
{!readOnly && ( @@ -114,7 +121,7 @@ export function MediaUploader({ pending={pending} onRemove={remove} onCategorize={onCategorize} - onRetry={onRetry} + onRetry={onRetry ? retry : undefined} onCancel={cancel} />
diff --git a/src/app/(protected)/workorders/_hooks/use-comp-doc-dialog.ts b/src/app/(protected)/workorders/_hooks/use-comp-doc-dialog.ts index 1223abd2..83cf6e69 100644 --- a/src/app/(protected)/workorders/_hooks/use-comp-doc-dialog.ts +++ b/src/app/(protected)/workorders/_hooks/use-comp-doc-dialog.ts @@ -139,9 +139,9 @@ export function useCompDocDialog({ async function handleSaveDraft() { try { - await persist({}, "No"); await syncCompletedDateIfChanged(); await syncAddressIfChanged(); + await persist({}, "No"); showCompDocDraftSavedToast(); } catch (error) { toast.error(error instanceof Error ? error.message : "Failed to save draft"); @@ -151,9 +151,10 @@ export function useCompDocDialog({ async function handleGenerate() { const ts = fmtDocNow(); try { - await persist({ generatedAt: ts }, "Yes"); + // Prerequisites first; only mark Generated after completedDate/address persist. await syncCompletedDateIfChanged(); await syncAddressIfChanged(); + await persist({ generatedAt: ts }, "Yes"); setGeneratedAt(ts); setDocState("generated"); } catch (error) { diff --git a/src/app/(protected)/workorders/_hooks/use-media-upload-session.ts b/src/app/(protected)/workorders/_hooks/use-media-upload-session.ts index aba709e2..69660f14 100644 --- a/src/app/(protected)/workorders/_hooks/use-media-upload-session.ts +++ b/src/app/(protected)/workorders/_hooks/use-media-upload-session.ts @@ -5,7 +5,7 @@ import type { MediaFile } from "@/domain/work-orders/types/work-order-media"; import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail"; import { classifyUpload } from "@/domain/work-orders/utils/work-order-media-utils"; -type LocalUpload = MediaFile & { sourceFile?: File }; +type LocalUpload = MediaFile & { sourceFile?: File; signal?: AbortSignal }; type UploadMutate = (input: { file: File; @@ -13,6 +13,26 @@ type UploadMutate = (input: { onProgress?: (percent: number) => void; }) => Promise; +function toLocalUpload(request: MediaUploadRequest): LocalUpload { + const classified = classifyUpload(request.file); + return { + id: request.localId, + name: request.file.name, + fileType: classified.fileType, + url: URL.createObjectURL(request.file), + category: classified.category, + purpose: null, + progress: 0, + uploadStatus: "uploading" as const, + sourceFile: request.file, + signal: request.signal, + }; +} + +function isSameAttempt(item: LocalUpload, request: MediaUploadRequest) { + return item.id === request.localId && item.signal === request.signal; +} + export function useMediaUploadSession( detail: WorkOrderBoardDetail | undefined, uploadMutateAsync: UploadMutate, @@ -33,23 +53,23 @@ export function useMediaUploadSession( }, [serverUploads, localUploads]); function startUploads(requests: MediaUploadRequest[]) { - setLocalUploads((prev) => [ - ...prev, - ...requests.map((request) => { - const classified = classifyUpload(request.file); - return { - id: request.localId, - name: request.file.name, - fileType: classified.fileType, - url: URL.createObjectURL(request.file), - category: classified.category, - purpose: null, - progress: 0, - uploadStatus: "uploading" as const, - sourceFile: request.file, - }; - }), - ]); + setLocalUploads((prev) => { + const next = [...prev]; + for (const request of requests) { + const entry = toLocalUpload(request); + const index = next.findIndex((item) => item.id === request.localId); + if (index >= 0) { + const previous = next[index]; + if (previous?.url.startsWith("blob:")) { + URL.revokeObjectURL(previous.url); + } + next[index] = entry; + } else { + next.push(entry); + } + } + return next; + }); for (const request of requests) { void uploadMutateAsync({ @@ -58,22 +78,22 @@ export function useMediaUploadSession( onProgress: (percent) => { setLocalUploads((prev) => prev.map((item) => - item.id === request.localId ? { ...item, progress: percent } : item, + isSameAttempt(item, request) ? { ...item, progress: percent } : item, ), ); }, }) .then(() => { - setLocalUploads((prev) => prev.filter((item) => item.id !== request.localId)); + setLocalUploads((prev) => prev.filter((item) => !isSameAttempt(item, request))); }) .catch((error: Error) => { if (error.name === "AbortError") { - setLocalUploads((prev) => prev.filter((item) => item.id !== request.localId)); + setLocalUploads((prev) => prev.filter((item) => !isSameAttempt(item, request))); return; } setLocalUploads((prev) => prev.map((item) => - item.id === request.localId + isSameAttempt(item, request) ? { ...item, uploadStatus: "failed", @@ -87,15 +107,14 @@ export function useMediaUploadSession( } } - function retryUpload(localId: string) { + function retryUpload(localId: string, signal: AbortSignal) { const target = localUploads.find((item) => item.id === localId); if (!target?.sourceFile) return; - const controller = new AbortController(); startUploads([ { localId, file: target.sourceFile, - signal: controller.signal, + signal, onProgress: () => undefined, }, ]); diff --git a/src/test/app/(protected)/workorders/use-media-upload-session.test.tsx b/src/test/app/(protected)/workorders/use-media-upload-session.test.tsx new file mode 100644 index 00000000..d0766fe7 --- /dev/null +++ b/src/test/app/(protected)/workorders/use-media-upload-session.test.tsx @@ -0,0 +1,129 @@ +import { act, renderHook, waitFor } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; +import { useMediaUploadSession } from "@/app/(protected)/workorders/_hooks/use-media-upload-session"; + +function makeFile(name = "photo.jpg") { + return new File(["bytes"], name, { type: "image/jpeg" }); +} + +describe("useMediaUploadSession retry / cancel", () => { + it("retry upserts the same localId instead of appending a duplicate", async () => { + let rejectFirst!: (error: Error) => void; + const uploadMutateAsync = vi + .fn() + .mockImplementationOnce( + () => + new Promise((_resolve, reject) => { + rejectFirst = reject; + }), + ) + .mockImplementation(() => new Promise(() => undefined)); + + const { result } = renderHook(() => useMediaUploadSession(undefined, uploadMutateAsync)); + const firstController = new AbortController(); + const localId = "local-1"; + const file = makeFile(); + + act(() => { + result.current.startUploads([ + { + localId, + file, + signal: firstController.signal, + onProgress: () => undefined, + }, + ]); + }); + + await waitFor(() => { + expect(result.current.uploads).toHaveLength(1); + }); + + act(() => { + rejectFirst(new Error("network")); + }); + + await waitFor(() => { + expect(result.current.uploads[0]?.uploadStatus).toBe("failed"); + }); + + const retryController = new AbortController(); + act(() => { + result.current.retryUpload(localId, retryController.signal); + }); + + await waitFor(() => { + expect(result.current.uploads).toHaveLength(1); + expect(result.current.uploads[0]?.id).toBe(localId); + expect(result.current.uploads[0]?.uploadStatus).toBe("uploading"); + }); + expect(uploadMutateAsync).toHaveBeenCalledTimes(2); + expect(uploadMutateAsync.mock.calls[1]?.[0]?.signal).toBe(retryController.signal); + }); + + it("cancel after retry aborts the replacement upload and removes the local row", async () => { + let rejectFirst!: (error: Error) => void; + const uploadMutateAsync = vi + .fn() + .mockImplementationOnce( + () => + new Promise((_resolve, reject) => { + rejectFirst = reject; + }), + ) + .mockImplementation( + ({ signal }: { signal?: AbortSignal }) => + new Promise((_resolve, reject) => { + signal?.addEventListener("abort", () => { + const error = new Error("aborted"); + error.name = "AbortError"; + reject(error); + }); + }), + ); + + const { result } = renderHook(() => useMediaUploadSession(undefined, uploadMutateAsync)); + const localId = "local-retry"; + const file = makeFile("retry.jpg"); + + act(() => { + result.current.startUploads([ + { + localId, + file, + signal: new AbortController().signal, + onProgress: () => undefined, + }, + ]); + }); + + act(() => { + rejectFirst(new Error("upload failed")); + }); + + await waitFor(() => { + expect(result.current.uploads[0]?.uploadStatus).toBe("failed"); + }); + + const retryController = new AbortController(); + act(() => { + result.current.retryUpload(localId, retryController.signal); + }); + + await waitFor(() => { + expect(result.current.uploads[0]?.uploadStatus).toBe("uploading"); + }); + + act(() => { + // Mirrors MediaUploader.cancel: abort the mapped controller, then removeLocal. + retryController.abort(); + result.current.removeLocal(localId); + }); + + await waitFor(() => { + expect(result.current.uploads).toHaveLength(0); + }); + expect(retryController.signal.aborted).toBe(true); + expect(uploadMutateAsync.mock.calls[1]?.[0]?.signal).toBe(retryController.signal); + }); +});