feat(web): Correctly showing toast

[bansal-harsh-2504]

User description

Description

Now the toast will only be shown when the user will be added to waitlist.

Related to #463

Mentions

@rajdip-b @kriptonian1

##Previous behaviour
Even if the user is offline but enters the correct email then the successfull toast will be shown.

##Current behaviour
The toast will only be shown after successfully adding the user to waitlist.

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• My changes in code generate no new warnings
• There are no UI/UX issues

Documentation Update

• I have made the necessary updates to the documentation, or no documentation changes are required.

---

PR Type

bug_fix

---

Description

• The toast notification is now displayed only after the user is successfully added to the waitlist, addressing incorrect success messages when offline.
• The email input field is cleared after a successful waitlist addition, improving user experience.

---

Changes walkthrough 📝

	Relevant files
Bug fix	index.tsx Show toast notification after successful waitlist addition apps/web/src/components/hero/index.tsx Moved toast notification to display only after a successful fetch request. Cleared the email input field after adding the user to the waitlist. +10/-9

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 463 - Partially compliant Fully compliant requirements: Clear the text field after adding the user to the waitlist Only show toast when the whitelist response is successful Not compliant requirements: Perform validation on the email field Check if user has already whitelisted

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling The catch block for the fetch request is empty. Consider adding proper error handling or user feedback for failed requests. Missing Validation Email validation is not implemented as per the ticket requirements. The PR should include email validation before submitting the request.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Enhancement	Implement error handling to display a user-friendly error message when the fetch request fails Consider adding error handling to display an error toast if the fetch request fails. This will provide better user feedback in case of network issues or other errors. apps/web/src/components/hero/index.tsx [33-51] async function fetchData(): Promise<void> { try { await fetch(`${url}&EMAIL=${email}`, { mode: 'no-cors' }) toast.custom((_t) => ( <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-[#293234] p-2 shadow-2xl backdrop-blur-3xl md:w-[25vw]"> <h1 className="font-semibold">Welcome to Keyshade 🎉</h1> <p className="text-sm"> You have been added to the waitlist. We will notify you once we launch </p> </div> )) setEmail(''); } catch (error) { - // eslint-disable-next-line no-console -- chill + toast.error('Failed to add you to the waitlist. Please try again later.'); + console.error('Error adding to waitlist:', error); Apply this suggestion Suggestion importance[1-10]: 9 Why: This suggestion significantly improves user experience by providing feedback when the fetch request fails, which is crucial for handling network errors gracefully. It adds a toast notification for errors and logs the error to the console, making it a valuable enhancement.	9
	Implement a loading state to provide visual feedback during the fetch request Consider adding a loading state while the fetch request is in progress to provide visual feedback to the user and prevent multiple submissions. apps/web/src/components/hero/index.tsx [33-51] +const [isLoading, setIsLoading] = useState(false); + async function fetchData(): Promise<void> { + setIsLoading(true); try { await fetch(`${url}&EMAIL=${email}`, { mode: 'no-cors' }) toast.custom((_t) => ( <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-[#293234] p-2 shadow-2xl backdrop-blur-3xl md:w-[25vw]"> <h1 className="font-semibold">Welcome to Keyshade 🎉</h1> <p className="text-sm"> You have been added to the waitlist. We will notify you once we launch </p> </div> )) setEmail(''); } catch (error) { - // eslint-disable-next-line no-console -- chill + // Handle error + } finally { + setIsLoading(false); + } Apply this suggestion Suggestion importance[1-10]: 8 Why: Adding a loading state enhances user experience by indicating that a process is ongoing, preventing multiple submissions and improving the interface's responsiveness. This is a useful enhancement for better user interaction.	8

💡 Need additional feedback ? start a PR chat

[bansal-harsh-2504]

@rajdip-b @kriptonian1 Can you please attach hacktoberfest label before merging?

[rajdip-b]

LGTM

[rajdip-b]

@kriptonian1 merge this when you can!

[kriptonian1]

LGTM

[rajdip-b]

🎉 This PR is included in version 2.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀