From dc75003edcdf5b46b55b889b990498f978606e77 Mon Sep 17 00:00:00 2001
From: Dev Jaja <jajak5242@gmail.com>
Date: Wed, 25 Feb 2026 08:28:59 -0500
Subject: [PATCH 1/3] feat: implement submission draft system

---
 .../bounty-detail-submissions-card.tsx        | 28 +++++-
 docs/SUBMISSION_DRAFTS_EXAMPLE.tsx            | 76 +++++++++++++++++
 hooks/__tests__/use-submission-draft.test.ts  | 85 +++++++++++++++++++
 hooks/use-submission-draft.ts                 | 47 ++++++++++
 types/submission-draft.ts                     | 11 +++
 5 files changed, 244 insertions(+), 3 deletions(-)
 create mode 100644 docs/SUBMISSION_DRAFTS_EXAMPLE.tsx
 create mode 100644 hooks/__tests__/use-submission-draft.test.ts
 create mode 100644 hooks/use-submission-draft.ts
 create mode 100644 types/submission-draft.ts

diff --git a/components/bounty-detail/bounty-detail-submissions-card.tsx b/components/bounty-detail/bounty-detail-submissions-card.tsx
index 40f95a4..407a442 100644
--- a/components/bounty-detail/bounty-detail-submissions-card.tsx
+++ b/components/bounty-detail/bounty-detail-submissions-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Loader2, DollarSign } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -21,6 +21,7 @@ import {
   useMarkSubmissionPaid,
 } from "@/hooks/use-submission-mutations";
 import { authClient } from "@/lib/auth-client";
+import { useSubmissionDraft } from "@/hooks/use-submission-draft";
 
 interface ExtendedUser {
   id: string;
@@ -44,6 +45,7 @@ export function BountyDetailSubmissionsCard({
 }: BountyDetailSubmissionsCardProps) {
   const { data: session } = authClient.useSession();
   const submissions = bounty.submissions || [];
+  const { draft, clearDraft, autoSave } = useSubmissionDraft(bounty.id);
 
   const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
   const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
@@ -55,8 +57,8 @@ export function BountyDetailSubmissionsCard({
     useState<BountySubmissionType | null>(null);
 
   const [prUrl, setPrUrl] = useState("");
-    const [submitComments, setSubmitComments] = useState("");
-    const [reviewComments, setReviewComments] = useState("");
+  const [submitComments, setSubmitComments] = useState("");
+  const [reviewComments, setReviewComments] = useState("");
   const [reviewStatus, setReviewStatus] = useState("APPROVED");
   const [transactionHash, setTransactionHash] = useState("");
 
@@ -64,6 +66,20 @@ export function BountyDetailSubmissionsCard({
   const reviewSubmission = useReviewSubmission();
   const markSubmissionPaid = useMarkSubmissionPaid();
 
+  // Load draft on mount
+  useEffect(() => {
+    if (draft?.formData) {
+      setPrUrl(draft.formData.githubPullRequestUrl);
+      setSubmitComments(draft.formData.comments);
+    }
+  }, [draft]);
+
+  // Auto-save on form changes
+  useEffect(() => {
+    const cleanup = autoSave({ githubPullRequestUrl: prUrl, comments: submitComments });
+    return cleanup;
+  }, [prUrl, submitComments, autoSave]);
+
   const isOrgMember =
     (session?.user as ExtendedUser)?.organizations?.includes(
       bounty.organizationId,
@@ -77,6 +93,7 @@ export function BountyDetailSubmissionsCard({
         githubPullRequestUrl: prUrl,
         comments: submitComments.trim() || undefined,
       });
+      clearDraft();
     } catch (err) {
       // Replace with toast or error UI as needed
       console.error("Submit PR failed:", err);
@@ -161,6 +178,11 @@ export function BountyDetailSubmissionsCard({
                 <DialogTitle>Submit Pull Request</DialogTitle>
                 <DialogDescription>
                   Submit your GitHub pull request URL.
+                  {draft && (
+                    <span className="block mt-1 text-xs text-blue-400">
+                      Draft restored from {new Date(draft.updatedAt).toLocaleString()}
+                    </span>
+                  )}
                 </DialogDescription>
               </DialogHeader>
 
diff --git a/docs/SUBMISSION_DRAFTS_EXAMPLE.tsx b/docs/SUBMISSION_DRAFTS_EXAMPLE.tsx
new file mode 100644
index 0000000..05fabf7
--- /dev/null
+++ b/docs/SUBMISSION_DRAFTS_EXAMPLE.tsx
@@ -0,0 +1,76 @@
+/**
+ * Submission Draft System - Quick Start Example
+ * 
+ * This example shows how to integrate the submission draft system
+ * into any form component.
+ */
+
+import { useState, useEffect } from "react";
+import { useSubmissionDraft } from "@/hooks/use-submission-draft";
+
+export function SubmissionFormExample({ bountyId }: { bountyId: string }) {
+  const { draft, clearDraft, autoSave } = useSubmissionDraft(bountyId);
+  
+  const [prUrl, setPrUrl] = useState("");
+  const [comments, setComments] = useState("");
+
+  // 1. Load draft when component mounts
+  useEffect(() => {
+    if (draft?.formData) {
+      setPrUrl(draft.formData.githubPullRequestUrl);
+      setComments(draft.formData.comments);
+    }
+  }, [draft]);
+
+  // 2. Auto-save when form changes
+  useEffect(() => {
+    const cleanup = autoSave({ 
+      githubPullRequestUrl: prUrl, 
+      comments 
+    });
+    return cleanup;
+  }, [prUrl, comments, autoSave]);
+
+  // 3. Clear draft on successful submit
+  const handleSubmit = async () => {
+    // Your submit logic here
+    await submitToAPI({ prUrl, comments });
+    
+    // Clear draft after success
+    clearDraft();
+    
+    // Reset form
+    setPrUrl("");
+    setComments("");
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {/* Show draft indicator */}
+      {draft && (
+        <div className="text-xs text-blue-400">
+          Draft saved at {new Date(draft.updatedAt).toLocaleString()}
+        </div>
+      )}
+      
+      <input
+        value={prUrl}
+        onChange={(e) => setPrUrl(e.target.value)}
+        placeholder="Pull Request URL"
+      />
+      
+      <textarea
+        value={comments}
+        onChange={(e) => setComments(e.target.value)}
+        placeholder="Comments"
+      />
+      
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+
+// Mock submit function
+async function submitToAPI(data: { prUrl: string; comments: string }) {
+  console.log("Submitting:", data);
+}
diff --git a/hooks/__tests__/use-submission-draft.test.ts b/hooks/__tests__/use-submission-draft.test.ts
new file mode 100644
index 0000000..8754752
--- /dev/null
+++ b/hooks/__tests__/use-submission-draft.test.ts
@@ -0,0 +1,85 @@
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { useSubmissionDraft } from "../use-submission-draft";
+
+describe("useSubmissionDraft", () => {
+  const bountyId = "test-bounty-123";
+
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("should initialize with no draft", () => {
+    const { result } = renderHook(() => useSubmissionDraft(bountyId));
+    expect(result.current.draft).toBeNull();
+  });
+
+  it("should save draft", () => {
+    const { result } = renderHook(() => useSubmissionDraft(bountyId));
+    const formData = {
+      githubPullRequestUrl: "https://github.com/test/pr/1",
+      comments: "Test comment",
+    };
+
+    act(() => {
+      result.current.saveDraft(formData);
+    });
+
+    expect(result.current.draft).not.toBeNull();
+    expect(result.current.draft?.formData).toEqual(formData);
+    expect(result.current.draft?.bountyId).toBe(bountyId);
+  });
+
+  it("should clear draft", () => {
+    const { result } = renderHook(() => useSubmissionDraft(bountyId));
+    const formData = {
+      githubPullRequestUrl: "https://github.com/test/pr/1",
+      comments: "Test comment",
+    };
+
+    act(() => {
+      result.current.saveDraft(formData);
+    });
+
+    expect(result.current.draft).not.toBeNull();
+
+    act(() => {
+      result.current.clearDraft();
+    });
+
+    expect(result.current.draft).toBeNull();
+  });
+
+  it("should auto-save after delay", async () => {
+    const { result } = renderHook(() => useSubmissionDraft(bountyId));
+    const formData = {
+      githubPullRequestUrl: "https://github.com/test/pr/1",
+      comments: "Auto-saved comment",
+    };
+
+    act(() => {
+      result.current.autoSave(formData);
+    });
+
+    await waitFor(
+      () => {
+        expect(result.current.draft?.formData).toEqual(formData);
+      },
+      { timeout: 1500 }
+    );
+  });
+
+  it("should persist draft across hook instances", () => {
+    const { result: result1 } = renderHook(() => useSubmissionDraft(bountyId));
+    const formData = {
+      githubPullRequestUrl: "https://github.com/test/pr/1",
+      comments: "Persisted comment",
+    };
+
+    act(() => {
+      result1.current.saveDraft(formData);
+    });
+
+    const { result: result2 } = renderHook(() => useSubmissionDraft(bountyId));
+    expect(result2.current.draft?.formData).toEqual(formData);
+  });
+});
diff --git a/hooks/use-submission-draft.ts b/hooks/use-submission-draft.ts
new file mode 100644
index 0000000..6091fcf
--- /dev/null
+++ b/hooks/use-submission-draft.ts
@@ -0,0 +1,47 @@
+import { useEffect, useCallback } from "react";
+import { useLocalStorage } from "./use-local-storage";
+import type { SubmissionDraft, SubmissionForm } from "@/types/submission-draft";
+
+const DRAFT_KEY_PREFIX = "submission_draft_";
+const AUTO_SAVE_DELAY = 1000;
+
+export function useSubmissionDraft(bountyId: string) {
+  const draftKey = `${DRAFT_KEY_PREFIX}${bountyId}`;
+  const [draft, setDraft] = useLocalStorage<SubmissionDraft | null>(draftKey, null);
+
+  const saveDraft = useCallback(
+    (formData: SubmissionForm) => {
+      const newDraft: SubmissionDraft = {
+        id: `draft_${bountyId}_${Date.now()}`,
+        bountyId,
+        formData,
+        updatedAt: new Date().toISOString(),
+      };
+      setDraft(newDraft);
+    },
+    [bountyId, setDraft]
+  );
+
+  const clearDraft = useCallback(() => {
+    setDraft(null);
+  }, [setDraft]);
+
+  const autoSave = useCallback(
+    (formData: SubmissionForm) => {
+      const timer = setTimeout(() => {
+        if (formData.githubPullRequestUrl || formData.comments) {
+          saveDraft(formData);
+        }
+      }, AUTO_SAVE_DELAY);
+      return () => clearTimeout(timer);
+    },
+    [saveDraft]
+  );
+
+  return {
+    draft,
+    saveDraft,
+    clearDraft,
+    autoSave,
+  };
+}
diff --git a/types/submission-draft.ts b/types/submission-draft.ts
new file mode 100644
index 0000000..c95e362
--- /dev/null
+++ b/types/submission-draft.ts
@@ -0,0 +1,11 @@
+export interface SubmissionForm {
+  githubPullRequestUrl: string;
+  comments: string;
+}
+
+export interface SubmissionDraft {
+  id: string;
+  bountyId: string;
+  formData: SubmissionForm;
+  updatedAt: string;
+}

From 4273c4fdb3f84f350b85fdafbef6bf732030ba8d Mon Sep 17 00:00:00 2001
From: Dev Jaja <jajak5242@gmail.com>
Date: Thu, 26 Feb 2026 01:42:43 -0500
Subject: [PATCH 2/3] fix: fix the CI pipeline

---
 docs/SUBMISSION_DRAFTS_EXAMPLE.tsx | 12 ++----------
 hooks/use-submission-draft.ts      |  2 +-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/docs/SUBMISSION_DRAFTS_EXAMPLE.tsx b/docs/SUBMISSION_DRAFTS_EXAMPLE.tsx
index 05fabf7..cb5c256 100644
--- a/docs/SUBMISSION_DRAFTS_EXAMPLE.tsx
+++ b/docs/SUBMISSION_DRAFTS_EXAMPLE.tsx
@@ -11,16 +11,8 @@ import { useSubmissionDraft } from "@/hooks/use-submission-draft";
 export function SubmissionFormExample({ bountyId }: { bountyId: string }) {
   const { draft, clearDraft, autoSave } = useSubmissionDraft(bountyId);
   
-  const [prUrl, setPrUrl] = useState("");
-  const [comments, setComments] = useState("");
-
-  // 1. Load draft when component mounts
-  useEffect(() => {
-    if (draft?.formData) {
-      setPrUrl(draft.formData.githubPullRequestUrl);
-      setComments(draft.formData.comments);
-    }
-  }, [draft]);
+  const [prUrl, setPrUrl] = useState(draft?.formData.githubPullRequestUrl || "");
+  const [comments, setComments] = useState(draft?.formData.comments || "");
 
   // 2. Auto-save when form changes
   useEffect(() => {
diff --git a/hooks/use-submission-draft.ts b/hooks/use-submission-draft.ts
index 6091fcf..a3574ad 100644
--- a/hooks/use-submission-draft.ts
+++ b/hooks/use-submission-draft.ts
@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from "react";
+import { useCallback } from "react";
 import { useLocalStorage } from "./use-local-storage";
 import type { SubmissionDraft, SubmissionForm } from "@/types/submission-draft";
 

From f937a7dd1b165d966ee580607d3fc9600684dd29 Mon Sep 17 00:00:00 2001
From: Dev Jaja <jajak5242@gmail.com>
Date: Thu, 26 Feb 2026 05:54:26 -0500
Subject: [PATCH 3/3] fix: fix coderabbit correction

---
 components/bounty-detail/bounty-detail-submissions-card.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/bounty-detail/bounty-detail-submissions-card.tsx b/components/bounty-detail/bounty-detail-submissions-card.tsx
index feb9f16..8d5992c 100644
--- a/components/bounty-detail/bounty-detail-submissions-card.tsx
+++ b/components/bounty-detail/bounty-detail-submissions-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Loader2, DollarSign } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -66,16 +66,20 @@ export function BountyDetailSubmissionsCard({
   const reviewSubmission = useReviewSubmission();
   const markSubmissionPaid = useMarkSubmissionPaid();
 
+  const hasHydratedDraft = useRef(false);
+
   // Load draft on mount
   useEffect(() => {
     if (draft?.formData) {
       setPrUrl(draft.formData.githubPullRequestUrl);
       setSubmitComments(draft.formData.comments);
     }
+    hasHydratedDraft.current = true;
   }, [draft]);
 
   // Auto-save on form changes
   useEffect(() => {
+    if (!hasHydratedDraft.current) return;
     const cleanup = autoSave({ githubPullRequestUrl: prUrl, comments: submitComments });
     return cleanup;
   }, [prUrl, submitComments, autoSave]);