feat: Configured extra check for waitlisted users already in the list and created toast message for them

[poswalsameer]

User description

Description

This PR solves the issue by showing an error/warning toast message to already existing users on the waitlist. Before this PR, every user with a single email was getting the success toast message multiple times. Ideally, this should not happen, every user should be able to join the waitlist one time through one email. This PR fixes this problem.

Fixes #463

Dependencies

No dependencies or packages are used.

Future Improvements

Right now, the data for waitlisted users is stored in the local storage but this logic can be improved by mapping them to a database in the future.

Screenshots of relevant screens

Developer's checklist

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

If changes are made in the code:

• [ x] I have followed the coding guidelines
• [ x] My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• [ x] I have added relevant screenshots in my PR
• [ x] There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• [ x] I have made the necessary updates to the documentation, or no documentation changes are required.

---

PR Type

enhancement, bug_fix

---

Description

• Implemented a check to verify if a user's email is already in the waitlist, preventing duplicate entries.
• Displayed a custom toast message to inform users if they are already on the waitlist.
• Updated the local storage to include new emails added to the waitlist.
• Cleared the email input field after a successful waitlist addition to improve user experience.

---

Changes walkthrough 📝

	Relevant files
Enhancement	index.tsx Add email validation and waitlist check with toast notifications apps/web/src/components/hero/index.tsx Added logic to check if an email is already in the waitlist. Displayed a custom toast message for already waitlisted users. Updated local storage with new waitlisted emails. Cleared the email input field after successful submission. +26/-2

---

💡 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 Check if user has already whitelisted Not compliant requirements: Perform validation on the email field Only show toast when the whitelist response is successful

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible Bug The email validation is still using the existing emailSchema, which may not provide sufficient validation. Consider implementing a more robust email validation. Performance Issue The waitlist data is being stored in both state and localStorage. Consider using only localStorage to avoid redundancy and potential synchronization issues. Code Smell The unused variable _waitListData is declared with a TypeScript ignore comment. Consider removing the unused variable or utilizing it if necessary.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	Add error handling for localStorage operations to improve user experience Consider adding error handling and user feedback for the case when localStorage is not available or fails to update. apps/web/src/components/hero/index.tsx [67-71] setWaitListData((prevData) => { const updatedData: string[] = [...prevData, email] - localStorage.setItem('waitListData', JSON.stringify(updatedData)) + try { + localStorage.setItem('waitListData', JSON.stringify(updatedData)) + } catch (error) { + console.error('Failed to update localStorage:', error) + toast.error('Failed to save your email. Please try again.') + } return updatedData }) Apply this suggestion Suggestion importance[1-10]: 9 Why: Adding error handling for localStorage operations is crucial for robustness, especially in environments where localStorage might be unavailable or fail. This improves user experience by providing feedback when an error occurs.	9
Performance	Use a Set data structure for more efficient email lookup in the waitlist Consider using a Set instead of an array for waitListedEmails to improve lookup performance when checking if an email is already in the waitlist. apps/web/src/components/hero/index.tsx [32-36] const dataInStorage: string | null = localStorage.getItem('waitListData') -const waitListedEmails: string[] = dataInStorage ? (JSON.parse(dataInStorage) as string[]) : [] +const waitListedEmails: Set<string> = new Set(dataInStorage ? JSON.parse(dataInStorage) as string[] : []) // actual logic where we are checking if this email is already in waitlisted users or not -if (waitListedEmails.includes(email)) { +if (waitListedEmails.has(email)) { Apply this suggestion Suggestion importance[1-10]: 8 Why: Using a Set instead of an array for email lookup improves performance due to faster average time complexity for lookups. This change is relevant and beneficial for the functionality of checking if an email is already in the waitlist.	8
Maintainability	Extract toast message content into a separate component for better code organization Consider extracting the toast message content into a separate component or constant to improve code readability and maintainability. apps/web/src/components/hero/index.tsx [37-44] -toast.custom(() => ( +const AlreadyWaitlistedToast = () => ( <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-[#852b2c] p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]"> <p className="text-sm"> You have been already added to the waitlist. We will notify you once we launch.{' '} </p> </div> -)) +); +toast.custom(AlreadyWaitlistedToast) + Apply this suggestion Suggestion importance[1-10]: 6 Why: Extracting the toast message into a separate component enhances code readability and maintainability by reducing duplication and improving organization. This is a good practice for managing UI components.	6
Best practice	✅ Use a more descriptive variable name or remove unused state variable Suggestion Impact: The unused state variable _waitListData was removed, which aligns with the suggestion to remove it if unused. code diff: - //@typescript-eslint/no-unused-vars - const [_waitListData, setWaitListData] = useState<string[]>([]) Consider using a more descriptive variable name instead of _waitListData to improve code readability, or remove it if unused. apps/web/src/components/hero/index.tsx [15-16] -//@typescript-eslint/no-unused-vars -const [_waitListData, setWaitListData] = useState<string[]>([]) +const [waitListData, setWaitListData] = useState<string[]>([]) Apply this suggestion Suggestion importance[1-10]: 5 Why: Renaming _waitListData to waitListData improves code readability by using a more descriptive name. However, the variable is marked as unused, so the suggestion could also consider removing it if it remains unused.	5

💡 Need additional feedback ? start a PR chat

[poswalsameer]

Hi @rajdip-b and @kriptonian1, this is a fresh PR that I have created for issue #463. You can review the code and let me know if any more changes are required. Thanks, loved working on this!

[rajdip-b]

Can you resolve the conflict?

[poswalsameer]

Can you resolve the conflict?

Let me see.

[poswalsameer]

Can you resolve the conflict?

Cannot figure out why is this showing as a conflict here, because that is the code which I have added to add the email in the state ( inside the input box ). Would like a small help in this!

[kriptonian1]

@poswalsameer Would you like to get on a call on discord?

drop your discord username or maybe tag me on discord

[poswalsameer]

@poswalsameer Would you like to get on a call on discord?

yeah sure

[poswalsameer]

Hi @kriptonian1, done with the changes as we discussed. You can have a final look.

[kriptonian1]

LGTM, but we will really appreciate it if you can do the last request we made

[kriptonian1]

@rajdip-b if everything is okey from your end then we can merge

[rajdip-b]

🎉 This PR is included in version 2.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀