feat: add user notification email #4616
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes involve significant enhancements to user email verification processes across various components. Key modifications include the introduction of new GraphQL mutations for sending and verifying email codes, updates to user interface elements to provide feedback regarding email status, and the addition of new properties in various interfaces to track email verification states. Overall, these changes improve the structure and functionality related to user account management. Changes
Poem
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (20)
Files skipped from review due to trivial changes (2)
Additional context usedBiome
Additional comments not posted (56)
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Outside diff range, codebase verification and nitpick comments (5)
src/components/EmailSentCard.tsx (1)
5-5: Remove unused import.The
Containerimport is commented out and not used in the file. Consider removing it to keep the code clean.-// import { Container } from './styles';src/apollo/gql/gqlUser.ts (2)
274-278: Missing server-side implementation forCHECK_EMAIL_AVAILABILITYmutation.The
CHECK_EMAIL_AVAILABILITYmutation is used in the client-side code, but there is no corresponding server-side implementation found. Ensure that a resolver or handler for this mutation is implemented on the server side to avoid runtime errors.
- Files using the mutation:
src/components/views/onboarding/InfoStep.tsxsrc/components/modals/EditUserModal.tsxAnalysis chain
Verify mutation
CHECK_EMAIL_AVAILABILITY.The mutation
CHECK_EMAIL_AVAILABILITYhas been added. Ensure that the server-side implementation supports this mutation and that it is correctly integrated into the client-side logic.Run the following script to verify the server-side implementation:
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the server-side implementation of `checkEmailAvailability`. # Test: Search for the server-side implementation. Expect: Corresponding resolver or handler. rg --type javascript -A 5 $'checkEmailAvailability'Length of output: 85
Script:
#!/bin/bash # Description: Verify the server-side implementation of `checkEmailAvailability`. # Test: Search for the server-side implementation. Expect: Corresponding resolver or handler. rg -A 5 'checkEmailAvailability'Length of output: 3897
268-272: Missing server-side implementation forVERIFY_USER_EMAIL_CODEmutation.The mutation
VERIFY_USER_EMAIL_CODEis used in client-side components but lacks a corresponding server-side implementation. Ensure that a resolver or handler for this mutation is implemented on the server to support its functionality.
- Check for the server-side resolver or handler for
verifyUserEmailCode.- Ensure integration with the client-side logic.
Analysis chain
Verify mutation
VERIFY_USER_EMAIL_CODE.The mutation
VERIFY_USER_EMAIL_CODEhas been added. Ensure that the server-side implementation supports this mutation and that it is correctly integrated into the client-side logic.Run the following script to verify the server-side implementation:
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the server-side implementation of `verifyUserEmailCode`. # Test: Search for the server-side implementation. Expect: Corresponding resolver or handler. rg --type javascript -A 5 $'verifyUserEmailCode'Length of output: 82
Script:
#!/bin/bash # Description: Verify the server-side implementation of `verifyUserEmailCode`. # Test: Search for the server-side implementation without specifying a file type. rg -A 5 'verifyUserEmailCode'Length of output: 4609
Script:
#!/bin/bash # Description: Search for potential GraphQL resolver files or directories for `verifyUserEmailCode`. # Test: Search for files or directories that might contain the server-side implementation. rg 'verifyUserEmailCode' --glob '**/resolvers/**' -A 5Length of output: 203
Script:
#!/bin/bash # Description: Search for the server-side implementation of `verifyUserEmailCode` across all files. # Test: Search for the term across the entire repository. rg 'verifyUserEmailCode' -A 5Length of output: 4609
src/components/Input.tsx (1)
48-48: Update documentation forcaptionproperty.The
captionproperty in theIInputinterface now acceptsstring | ReactElement. Ensure that the documentation and usage examples reflect this change.Consider updating the documentation to specify the new type for
caption.src/components/modals/EditUserModal.tsx (1)
Line range hint
250-275: Avoid using thedeleteoperator.The use of the
deleteoperator can impact performance. Consider setting the property toundefinedinstead.Apply this diff to improve performance:
- delete formData.emailCode; + formData.emailCode = undefined;Tools
Biome
[error] 251-251: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
| @@ -76,6 +215,7 @@ const InfoStep: FC<IStep> = ({ setStep }) => { | |||
| const onSave = async (formData: IUserInfo) => { | |||
| setIsLoading(true); | |||
| try { | |||
| delete formData.emailCode; | |||
There was a problem hiding this comment.
Avoid using delete operator in onSave.
The use of the delete operator can impact performance.
Apply this diff to use an undefined assignment instead:
- delete formData.emailCode;
+ formData.emailCode = undefined;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| delete formData.emailCode; | |
| formData.emailCode = undefined; |
Tools
Biome
[error] 218-218: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
| //verify email code | ||
| const handleVerifyEmailCode = useCallback(async () => { | ||
| if (!!watchEmailCode) { | ||
| try { | ||
| await verifyUserEmailCode({ | ||
| variables: { | ||
| code: watchEmailCode, | ||
| }, | ||
| }); | ||
| address && dispatch(fetchUserByAddress(address)); | ||
| } catch (error: any) { | ||
| setError(EUserInfo.EMAIL_CODE, { | ||
| type: 'manual', | ||
| message: error.message, | ||
| }); | ||
| captureException(error, { | ||
| tags: { | ||
| section: 'InfoStepOnSave', | ||
| }, | ||
| }); | ||
| } | ||
| } | ||
| }, [watchEmailCode, verifyUserEmailCode, address, dispatch, setError]); |
There was a problem hiding this comment.
Remove redundant double-negation in handleVerifyEmailCode.
The double-negation in the condition if (!!watchEmailCode) is unnecessary.
Apply this diff to simplify the condition:
- if (!!watchEmailCode) {
+ if (watchEmailCode) {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| //verify email code | |
| const handleVerifyEmailCode = useCallback(async () => { | |
| if (!!watchEmailCode) { | |
| try { | |
| await verifyUserEmailCode({ | |
| variables: { | |
| code: watchEmailCode, | |
| }, | |
| }); | |
| address && dispatch(fetchUserByAddress(address)); | |
| } catch (error: any) { | |
| setError(EUserInfo.EMAIL_CODE, { | |
| type: 'manual', | |
| message: error.message, | |
| }); | |
| captureException(error, { | |
| tags: { | |
| section: 'InfoStepOnSave', | |
| }, | |
| }); | |
| } | |
| } | |
| }, [watchEmailCode, verifyUserEmailCode, address, dispatch, setError]); | |
| //verify email code | |
| const handleVerifyEmailCode = useCallback(async () => { | |
| if (watchEmailCode) { | |
| try { | |
| await verifyUserEmailCode({ | |
| variables: { | |
| code: watchEmailCode, | |
| }, | |
| }); | |
| address && dispatch(fetchUserByAddress(address)); | |
| } catch (error: any) { | |
| setError(EUserInfo.EMAIL_CODE, { | |
| type: 'manual', | |
| message: error.message, | |
| }); | |
| captureException(error, { | |
| tags: { | |
| section: 'InfoStepOnSave', | |
| }, | |
| }); | |
| } | |
| } | |
| }, [watchEmailCode, verifyUserEmailCode, address, dispatch, setError]); |
Tools
Biome
[error] 100-100: Avoid redundant double-negation.
It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation(lint/complexity/noExtraBooleanCast)
| //send email confirmation code | ||
| const handleSendEmailConfirmation = useCallback( | ||
| async (type?: string | void) => { | ||
| if (!!watchEmail && !errors.email) { | ||
| try { | ||
| await sendEmailConfirmation({ | ||
| variables: { | ||
| email: watchEmail, | ||
| }, | ||
| }); | ||
| address && dispatch(fetchUserByAddress(address)); | ||
| setEditEmailAlredySent(false); | ||
| if (type === 'resend') { | ||
| gToast('Email confirmation code resent.', { | ||
| type: ToastType.SUCCESS, | ||
| }); | ||
| } | ||
| } catch (error: any) { | ||
| gToast('Failed to send email confirmation code.', { | ||
| type: ToastType.DANGER, | ||
| title: error.message, | ||
| }); | ||
| captureException(error, { | ||
| tags: { | ||
| section: 'InfoStepOnSave', | ||
| }, | ||
| }); | ||
| } | ||
| } | ||
| }, | ||
| [watchEmail, errors.email, sendEmailConfirmation, address, dispatch], |
There was a problem hiding this comment.
Replace void with undefined in handleSendEmailConfirmation.
The use of void in the type union async (type?: string | void) is confusing.
Apply this diff to replace void with undefined:
- async (type?: string | void) => {
+ async (type?: string | undefined) => {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| //send email confirmation code | |
| const handleSendEmailConfirmation = useCallback( | |
| async (type?: string | void) => { | |
| if (!!watchEmail && !errors.email) { | |
| try { | |
| await sendEmailConfirmation({ | |
| variables: { | |
| email: watchEmail, | |
| }, | |
| }); | |
| address && dispatch(fetchUserByAddress(address)); | |
| setEditEmailAlredySent(false); | |
| if (type === 'resend') { | |
| gToast('Email confirmation code resent.', { | |
| type: ToastType.SUCCESS, | |
| }); | |
| } | |
| } catch (error: any) { | |
| gToast('Failed to send email confirmation code.', { | |
| type: ToastType.DANGER, | |
| title: error.message, | |
| }); | |
| captureException(error, { | |
| tags: { | |
| section: 'InfoStepOnSave', | |
| }, | |
| }); | |
| } | |
| } | |
| }, | |
| [watchEmail, errors.email, sendEmailConfirmation, address, dispatch], | |
| //send email confirmation code | |
| const handleSendEmailConfirmation = useCallback( | |
| async (type?: string | undefined) => { | |
| if (!!watchEmail && !errors.email) { | |
| try { | |
| await sendEmailConfirmation({ | |
| variables: { | |
| email: watchEmail, | |
| }, | |
| }); | |
| address && dispatch(fetchUserByAddress(address)); | |
| setEditEmailAlredySent(false); | |
| if (type === 'resend') { | |
| gToast('Email confirmation code resent.', { | |
| type: ToastType.SUCCESS, | |
| }); | |
| } | |
| } catch (error: any) { | |
| gToast('Failed to send email confirmation code.', { | |
| type: ToastType.DANGER, | |
| title: error.message, | |
| }); | |
| captureException(error, { | |
| tags: { | |
| section: 'InfoStepOnSave', | |
| }, | |
| }); | |
| } | |
| } | |
| }, | |
| [watchEmail, errors.email, sendEmailConfirmation, address, dispatch], |
Tools
Biome
[error] 124-124: void is confusing inside a union type.
Unsafe fix: Use undefined instead.
(lint/suspicious/noConfusingVoidType)
Summary by CodeRabbit
New Features
EmailSentCardcomponent to notify users when a verification code is sent.VerifyInputButtonto visually indicate email verification status.Bug Fixes
Documentation
Style
Chores