Aller au contenu
login
arrow_backRetour aux issues
moizycodes/moizy-open-source-issues #169

🚨 Issue: Prevent Duplicate Form Submissions

ecoDébutant help wanted good first issue performance testing frontend javascript api dev-experience async real-world

descriptionDescription

## ⚠️ IMPORTANT CONTRIBUTION RULE **Create a NEW branch before starting.** - ❌ Do not work on `main` - ❌ Do not create the PR from `main` - ❌ PRs from `main` will **NOT be accepted** Required format: ``` git checkout -b your-username/issue-98 ``` ## 📌 Real-World Problem Users can accidentally submit the same form multiple times by double-clicking the submit button or clicking it repeatedly while a request is still processing. This can cause: - Duplicate orders - Multiple registrations - Duplicate support tickets - Repeated API requests ## 🎯 Task Create a small `preventDuplicateSubmit()` utility that ensures an async form action cannot run again until the previous execution has completed. Example: ``` const submit = preventDuplicateSubmit(async (data) => { return await saveOrder(data); }); submit(order); submit(order); ``` The second call should not trigger another execution while the first request is pending. ## 🔧 Requirements - Accept an async function - Prevent concurrent executions - Return the original promise/result - Allow execution again after completion - Correctly handle rejected promises - Preserve arguments and `this` context - Do not mutate the provided arguments ## 🧪 Tests Should Cover - Normal submission - Rapid repeated calls - Multiple arguments - Successful request completion - Failed request - New submission after completion - `this` context preservation ## 🌍 Why This Matters This is a common frontend problem in: - Checkout forms - Registration forms - Contact forms - Payment flows - Admin dashboards - Booking systems Preventing duplicate actions can save users from duplicate transactions and reduce unnecessary API traffic. ## ✅ Acceptance Criteria - Concurrent duplicate executions are prevented - Execution becomes available again after completion - Errors don't permanently lock the utility - Arguments and context are preserved - Comprehensive tests are included - Documentation includes a practical example - PR comes from a **new username/issue-number branch**
codeOuvre sur GitHub