feat: preserve reports when screenshot upload fails

apps/web/src/pages/api/report-screenshot.ts

@@ -0,0 +1,15 @@
+import type { APIRoute } from "astro";
+
+const base = process.env.API_INTERNAL_URL || import.meta.env.API_INTERNAL_URL || "http://localhost:8000";
+
+export const POST: APIRoute = async ({ request, redirect }) => {
+  const form = await request.formData();
+  const reportId = String(form.get("report_id") || "");
+  const screenshot = form.get("screenshot");
+  if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(reportId) || !(screenshot instanceof File) || screenshot.size === 0) return redirect(`/report?state=screenshot_error&report_id=${encodeURIComponent(reportId)}`, 303);
+  try {
+    const upload = new FormData(); upload.set("screenshot", screenshot);
+    const response = await fetch(`${base}/api/v1/catch-reports/${reportId}/screenshot`, { method: "POST", body: upload });
+    return redirect(response.ok ? "/report?state=screenshot_sent" : `/report?state=screenshot_error&report_id=${encodeURIComponent(reportId)}`, 303);
+  } catch { return redirect(`/report?state=screenshot_error&report_id=${encodeURIComponent(reportId)}`, 303); }
+};

apps/web/src/pages/api/report.ts

@@ -5,17 +5,19 @@ export const POST: APIRoute = async ({ request, redirect }) => {
   const text = (name: string) => String(form.get(name) || "").trim() || null;
   const number = (name: string) => text(name) ? Number(text(name)) : null;
   const payload = { fish_slug: String(form.get("fish_slug") || ""), waterbody_slug: String(form.get("waterbody_slug") || ""), x: Number(form.get("x")), y: Number(form.get("y")), weight_g: Number(form.get("weight_g")), bait_name: text("bait_name"), fishing_method: text("fishing_method"), retrieve_method: text("retrieve_method"), retrieve_speed: number("retrieve_speed"), player_name: text("player_name"), comment: text("comment"), website: String(form.get("website") || "") };
+  let createdId: string | null = null;
   try {
     const response = await fetch(`${base}/api/v1/catch-reports`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(payload) });
-    if (!response.ok) return redirect("/report?state=error", 303);
+    if (!response.ok) return redirect("/report?state=create_error", 303);
     const created = await response.json();
+    createdId = created.id;
     const screenshot = form.get("screenshot");
     if (screenshot instanceof File && screenshot.size > 0) {
       const upload = new FormData(); upload.set("screenshot", screenshot);
       const uploaded = await fetch(`${base}/api/v1/catch-reports/${created.id}/screenshot`, { method: "POST", body: upload });
-      if (!uploaded.ok) return redirect("/report?state=error", 303);
+      if (!uploaded.ok) return redirect(`/report?state=screenshot_error&report_id=${encodeURIComponent(created.id)}`, 303);
     }
     return redirect("/report?state=sent", 303);
   }
-  catch { return redirect("/report?state=error", 303); }
+  catch { return redirect(createdId ? `/report?state=screenshot_error&report_id=${encodeURIComponent(createdId)}` : "/report?state=create_error", 303); }
 };

apps/web/src/pages/report.astro

@@ -4,11 +4,15 @@ import { api, type DictionaryItem } from "../lib/api";
 let fishes: DictionaryItem[] = [], waterbodies: DictionaryItem[] = [], unavailable = false;
 try { [fishes, waterbodies] = await Promise.all([api<DictionaryItem[]>("/api/v1/fishes"), api<DictionaryItem[]>("/api/v1/waterbodies")]); } catch { unavailable = true; }
 const state = Astro.url.searchParams.get("state");
+const reportId = Astro.url.searchParams.get("report_id");
 ---
 <Layout title="Добавить улов — RF4 Spotter">
   <section class="form-hero"><div><span class="eyebrow"><b>+1</b> Помочь сообществу</span><h1>Добавить<br/><em>свой улов</em></h1></div><p>Полминуты — и рабочая точка появится в общей статистике после проверки модератором.</p></section>
   {state === "sent" && <div class="notice success">Улов отправлен на модерацию. Спасибо!</div>}
-  {state === "error" && <div class="notice error">Не удалось отправить улов. Проверьте поля и повторите.</div>}
+  {state === "screenshot_sent" && <div class="notice success">Скриншот добавлен к ранее созданной заявке.</div>}
+  {state === "create_error" && <div class="notice error">Заявка не создана. Проверьте поля и повторите отправку.</div>}
+  {state === "screenshot_error" && <div class="notice warning"><strong>Заявка сохранена без скриншота.</strong> Изображение не загрузилось; можно повторить отдельно, не отправляя улов заново.</div>}
+  {state === "screenshot_error" && reportId && <form class="screenshot-retry" method="post" action="/api/report-screenshot" enctype="multipart/form-data"><input type="hidden" name="report_id" value={reportId} /><label>Повторная загрузка скриншота<input name="screenshot" type="file" accept="image/jpeg,image/png,image/webp" required /></label><button type="submit">Загрузить скриншот</button></form>}
   {unavailable ? <div class="state"><h2>Форма временно недоступна</h2></div> : <form class="report-form" method="post" action="/api/report" enctype="multipart/form-data">
     <div class="form-grid"><label>Рыба *<select name="fish_slug" required>{fishes.map(x => <option value={x.slug}>{x.name_ru}</option>)}</select></label><label>Водоём *<select name="waterbody_slug" required>{waterbodies.map(x => <option value={x.slug}>{x.name_ru}</option>)}</select></label><label>Координата X *<input name="x" type="number" min="-10000" max="10000" required /></label><label>Координата Y *<input name="y" type="number" min="-10000" max="10000" required /></label><label>Вес, граммы *<input name="weight_g" type="number" min="1" max="3000000" required /></label><label>Приманка<input name="bait_name" maxlength="200" /></label><label>Способ ловли<select name="fishing_method"><option value="">Не указан</option><option value="spinning">Спиннинг</option><option value="bottom">Донная</option><option value="float">Поплавочная</option></select></label><label>Проводка<input name="retrieve_method" maxlength="100" /></label><label>Скорость проводки<input name="retrieve_speed" type="number" min="0" max="100" /></label><label>Ник игрока<input name="player_name" maxlength="100" /></label></div>
     <label class="wide">Комментарий<textarea name="comment" maxlength="1000" rows="4"></textarea></label><label class="wide">Скриншот, JPEG/PNG/WebP до 8 МБ<input name="screenshot" type="file" accept="image/jpeg,image/png,image/webp" /></label><label class="honeypot" aria-hidden="true">Сайт<input name="website" tabindex="-1" autocomplete="off" /></label><p class="privacy">Ник и скриншот необязательны. Из изображения удаляются EXIF и прочие метаданные.</p><button type="submit">Отправить на проверку</button>