Polish invitation resend and upload recovery

2026-09-10 11:53:59 -04:00
parent 361e14ec1d
commit d44ef7348c
15 changed files with 208 additions and 23 deletions
@@ -1,6 +1,6 @@
 "use client";

-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { ChevronDownIcon, SendIcon, UploadIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -19,6 +19,9 @@ import { Progress } from "@/components/ui/progress";
 import { Spinner } from "@/components/ui/spinner";

 type QueueItem = {
+  file?: File;
+  created?: { photoId: string; eventId: string; uploadUrl: string };
+  uploaded?: boolean;
  id: string;
  name: string;
  progress: number;
@@ -53,6 +56,8 @@ export function GuestUpload({
  const startSubmission = api.guest.startSubmission.useMutation();
  const createPhoto = api.photos.create.useMutation();
  const completePhoto = api.photos.complete.useMutation();
+  const retryUpload = api.photos.retryUpload.useMutation();
+  const uploading = useRef(false);
  const utils = api.useUtils();

  useEffect(() => {
@@ -70,6 +75,12 @@ export function GuestUpload({
    () => queue.some((item) => item.status === "queued" || item.status === "uploading"),
    [queue],
  );
+  useEffect(() => {
+    if (!busy) return;
+    const warn = (event: BeforeUnloadEvent) => { event.preventDefault(); event.returnValue = ""; };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [busy]);

  async function sendNote(detailsOnly = false) {
    try {
@@ -84,29 +95,32 @@ export function GuestUpload({
    } catch (error) { toast.error(error instanceof Error ? error.message : "Could not send note"); }
  }

-  async function uploadFiles(files: File[]) {
+  async function uploadFiles(files: File[], retryItems?: QueueItem[]) {
    const accepted = files.filter(isAllowedPhoto);
-    if (!uploadEnabled || busy) return;
+    if (!uploadEnabled || uploading.current) return;
    if (accepted.length !== files.length) {
      toast.error("Some files were skipped. Use JPEG, PNG, WebP, or HEIC under 25 MB.");
    }
    if (!accepted.length) return;
-    const items: QueueItem[] = accepted.map((file) => ({
+    uploading.current = true;
+    const items: QueueItem[] = retryItems ?? accepted.map((file) => ({
+      file,
      id: crypto.randomUUID(),
      name: file.name,
      progress: 0,
      status: "queued",
    }));
-    setQueue((current) => [...items, ...current]);
+    for (const item of items) { item.status = "queued"; item.error = undefined; }
+    setQueue((current) => retryItems ? current.map(entry => items.find(item => item.id === entry.id) ?? entry) : [...items, ...current]);
    const trimmedName = name.trim();
    const trimmedEmail = email.trim();
    const trimmedNote = note.trim();
+    try {
    localStorage.setItem(guestKey(slug, "name"), trimmedName);
    localStorage.setItem(guestKey(slug, "email"), trimmedEmail);
    localStorage.setItem(guestKey(slug, "note"), trimmedNote);
    localStorage.setItem(guestKey(slug, "notify"), String(notify));

-    try {
      await ensureGuest.mutateAsync({
        eventSlug: slug,
        displayName: trimmedName || undefined,
@@ -127,25 +141,29 @@ export function GuestUpload({
          ),
        );
        try {
-          const created = await createPhoto.mutateAsync({
+          const created = item.created ?? await createPhoto.mutateAsync({
            eventSlug: slug,
            submissionId: submission.submissionId,
            contentType,
            fileName: file.name,
            byteSize: file.size,
          });
-          await putWithProgress(created.uploadUrl, file, contentType, (progress) => {
+          const previous = item.created;
+          item.created = created;
+          const uploadUrl = previous && !item.uploaded ? (await retryUpload.mutateAsync({ photoId: created.photoId, eventId: created.eventId })).uploadUrl : created.uploadUrl;
+          if (!item.uploaded && uploadUrl) await putWithProgress(uploadUrl, file, contentType, (progress) => {
            setQueue((current) =>
              current.map((entry) =>
                entry.id === item.id ? { ...entry, progress } : entry,
              ),
            );
          });
+          item.uploaded = true;
          await completePhoto.mutateAsync({ photoId: created.photoId });
          setQueue((current) =>
            current.map((entry) =>
              entry.id === item.id
-                ? { ...entry, status: "done", progress: 100 }
+                ? { ...entry, status: "done", progress: 100, file: undefined }
                : entry,
            ),
          );
@@ -155,7 +173,7 @@ export function GuestUpload({
          setQueue((current) =>
            current.map((entry) =>
              entry.id === item.id
-                ? { ...entry, status: "error", error: message }
+                ? { ...entry, created: item.created, uploaded: item.uploaded, status: "error", error: message }
                : entry,
            ),
          );
@@ -172,7 +190,7 @@ export function GuestUpload({
            : entry,
        ),
      );
-    }
+    } finally { uploading.current = false; }
  }

  if (!uploadEnabled && !notesEnabled) {
@@ -244,12 +262,13 @@ export function GuestUpload({
            <li key={item.id} className="flex flex-col gap-1">
              <div className="flex justify-between gap-3 text-sm">
                <span className="truncate">{item.name}</span>
-                <span className="text-muted-foreground">{item.status}</span>
+                <span className="shrink-0 text-muted-foreground">{item.status === "done" ? "Uploaded · processing for gallery" : item.status === "uploading" ? `${item.progress}% uploaded` : item.status === "error" ? "Needs retry" : "Waiting"}</span>
              </div>
              <Progress value={item.progress} />
              {item.error ? (
                <p className="text-sm text-destructive">{item.error}</p>
              ) : null}
+              {item.status === "error" && item.file ? <Button type="button" variant="outline" disabled={busy || !uploadEnabled} onClick={() => void uploadFiles([item.file!], [{ ...item }])}>Retry file</Button> : null}
            </li>
          ))}
        </ul>