fix: form clear after bug #3623
Conversation
zalabhavy
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe pull request modifies the Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3623 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 20 20
Lines 732 732
=========================================
Hits 732 732 ☔ View full report in Codecov by Sentry. |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3623--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
components/NewsletterSubscribe.tsx (2)
62-67: Consider improving error state UX.The current implementation has a few UX considerations:
- After 10 seconds, the form reverts to NORMAL state with empty fields, which might be confusing.
- Users attempting to correct their input might be interrupted by the timeout.
- There's no visual feedback that the fields were cleared.
Consider these improvements:
const setFormStatus = (formResponse: FormStatus) => { setStatus(formResponse); if (formResponse === FormStatus.ERROR) { setEmail(''); setName(''); + // Add visual feedback + const formEl = document.querySelector('form'); + if (formEl) { + formEl.classList.add('shake-animation'); + setTimeout(() => formEl.classList.remove('shake-animation'), 500); + } } - setTimeout(() => { - setStatus(FormStatus.NORMAL); - }, 10000); + // Only reset status if not in error state + if (formResponse !== FormStatus.ERROR) { + setTimeout(() => { + setStatus(FormStatus.NORMAL); + }, 10000); + } };Add this CSS to your styles:
.shake-animation { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
Line range hint
82-96: Enhance error handling robustness.The current error handling could be improved in several ways:
- Network errors are not explicitly handled
- Generic error message might not help users correct their input
- No retry mechanism is provided
Consider these improvements:
fetch('/.netlify/functions/newsletter_subscription', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } }) .then((res) => { if (res.status === 200) { setFormStatus(FormStatus.SUCCESS); } else { + // Extract error message from response + return res.json().then(data => { + throw new Error(data.message || 'Subscription failed'); + }); + } + return res.json(); + }) + .then((data) => console.log(data)) + .catch((error) => { + console.error('Subscription error:', error); + setFormStatus(FormStatus.ERROR); + // Show specific error message + setErrorMessage(error.message || 'Network error. Please try again.'); }); - return res.json(); - }) - // eslint-disable-next-line @typescript-eslint/no-shadow, no-console - .then((data) => console.log(data));You'll need to:
- Add
errorMessagestate:const [errorMessage, setErrorMessage] = useState<string>('');
- Update the error UI to show specific message:
<Paragraph className='mb-8' textColor={paragraphTextColor}> - {ready ? t('errorSubtitle') : errorSubtitle}{' '} + {errorMessage || (ready ? t('errorSubtitle') : errorSubtitle)}{' '} <TextLink href='https://github.com/asyncapi/website/issues/new?template=bug.md' target='_blank'>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/NewsletterSubscribe.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 180000ms (2)
- GitHub Check: Test NodeJS PR - macos-13
- GitHub Check: Lighthouse CI
🔇 Additional comments (1)
components/NewsletterSubscribe.tsx (1)
62-65: LGTM! The changes correctly clear form data on error.The implementation successfully addresses the reported issue by clearing both email and name fields when an error occurs.
Description
When the newsletter subscription fails, the form used to display the incorrect data after 10 seconds when it reloads. I have fixed this issue by clearing the input fields (email and name) after an error.
Related issue(s)
Fixes #3622
After Solved
Screen.Recording.2025-01-29.at.10.07.25.PM.mov
Summary by CodeRabbit