Use Debounce

[mirmirmirr]

This pull request refactors how debounced input validation is handled across several components, replacing custom debounce logic with the standardized use-debounce library. This results in more consistent, maintainable, and responsive validation for user inputs such as passwords, display names, and event codes. The validation logic is now directly tied to input handlers, and API checks for availability have been moved out of validation utilities and into component logic.

Debounced Input Validation Improvements:

• Replaced the custom useDebounce hook with the use-debounce library for debounced input handling in user registration, event painting, and event editor forms. This standardizes debounce behavior and reduces custom code. (package.json, src/app/(auth)/register/page.tsx, src/app/(event)/[event-code]/painting/page-client.tsx, src/features/event/editor/editor.tsx, src/lib/hooks/use-debounce.ts) [1] [2] src/app/(event)/[event-code]/painting/page-client.tsxR6, [3] [4]

• Updated input handlers to use debounced callbacks for password, display name, and custom event code fields, triggering API availability checks only after the user pauses typing. This reduces unnecessary API calls and improves user experience. (src/app/(auth)/register/page.tsx, src/app/(event)/[event-code]/painting/page-client.tsx, src/features/event/editor/editor.tsx) [1] src/app/(event)/[event-code]/painting/page-client.tsxL45-R90, [2]

Validation Logic Refactoring:

• Removed API availability checks from form validation utility functions (validateAvailabilityData, validateEventData) and moved them into debounced input handlers in the respective components. This separation simplifies validation utilities and ensures API checks are only performed as needed. (src/features/event/availability/validate-data.ts, src/features/event/editor/validate-data.ts) [1] [2] [3]

• Updated input field onChange handlers to set local state and trigger the new debounced validation logic, ensuring immediate UI feedback and delayed validation. (src/app/(auth)/register/page.tsx, src/app/(event)/[event-code]/painting/page-client.tsx, src/features/event/editor/editor.tsx) [1] src/app/(event)/[event-code]/painting/page-client.tsxL167-R199, [2]

Cleanup:

• Removed the now-unused custom useDebounce hook implementation. (src/lib/hooks/use-debounce.ts)

[Copilot]

Pull Request Overview

This PR refactors debouncing functionality by replacing a custom useDebounce hook with the use-debounce library. The changes move validation logic from server-side form submission to real-time, debounced input handlers for better user experience.

Key changes:

• Replaced custom useDebounce hook with useDebouncedCallback from the use-debounce package
• Moved custom code availability checks from validation function to debounced input handler in event editor
• Moved display name availability checks from validation function to debounced input handler in availability painting page
• Moved password strength validation from useDebounce hook to debounced callback in registration page

Reviewed Changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/lib/hooks/use-debounce.ts	Removed custom debounce hook implementation
package.json	Added use-debounce package dependency
package-lock.json	Added lockfile entry for use-debounce package
src/features/event/editor/validate-data.ts	Removed custom code validation logic from server-side validation
src/features/event/editor/editor.tsx	Implemented debounced custom code availability check with real-time validation
src/features/event/availability/validate-data.ts	Removed display name validation logic and eventCode parameter
src/app/(event)/[event-code]/painting/page-client.tsx	Implemented debounced display name availability check with real-time validation
src/app/(auth)/register/page.tsx	Refactored password validation to use debounced callback instead of custom hook

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.