Add error handling for newsletter subscription and enhance footer styles #597
Conversation
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
There was a problem hiding this comment.
Pull Request Overview
This PR adds error handling and validation for the newsletter subscription form in the footer component, enhancing user experience by providing clear feedback for invalid email addresses.
- Implements email validation with regex pattern and required field checking
- Adds error state management and displays error messages to users
- Includes CSS styles for error states with proper visual feedback
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/theme/Footer/Layout/index.tsx | Adds email validation logic, error state management, and error message display |
| src/theme/Footer/Layout/enhanced-footer.css | Adds CSS styles for error states including border colors and text styling |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
src/theme/Footer/Layout/index.tsx
Outdated
| setIsSubscribed(false); | ||
| setEmail(''); | ||
| }, 3000); | ||
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
There was a problem hiding this comment.
The email regex pattern is defined inside the event handler and will be recreated on every form submission. Consider moving it outside the component or using a more comprehensive email validation library for better performance and accuracy.
| > | ||
| {isSubscribed ? "✓ Subscribed!" : "Subscribe Now →"} | ||
| </button> | ||
| {error && <p className="error-text">{error}</p>} |
There was a problem hiding this comment.
The error message is not being cleared when the user starts typing in the email field. Consider adding an onChange handler that clears the error state to provide immediate feedback when the user begins correcting their input.
|
@Shitanshukumar607 is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
iitzIrFan
left a comment
iitzIrFan
left a comment
There was a problem hiding this comment.
LGTM ! @Shitanshukumar607
@sanjay-kv Ready for merge.
iitzIrFan
added
gssoc25
level 2
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
3 participants
Description
add validation and error message
Fixes #586
Type of Change
Changes Made
Dependencies
Checklist
npm run buildand attached screenshot(s) in this PR.