fix: Add unsubscribe functionality to NewsletterModal
#210
Conversation
- Pass the `mutate` prop from parent component to the `NewsletterModal` component - Uses the `useUnsubscribeButton` hook to manage the newsletter unsubscription - On clicking the unsubscribe button from the modal, calls the `onUnsubscribe` function from the `useUnsubscribeButton` hook Fixes elie222#209
- Updates `NewsletterModal` component's usage throughout application as one of its props is no longer optional
|
@aryanprince is attempting to deploy a commit to the Inbox Zero Team on Vercel. A member of the Team first needs to authorize it. |
|
|
aryanprince
changed the title
NewsletterModal (#209)NewsletterModal
WalkthroughThe recent changes enhance the rendering logic of the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NewsletterModal
participant AppState
User->>AppState: Open NewsletterModal
AppState->>NewsletterModal: Check opened state
alt If opened state is true
AppState->>NewsletterModal: Render modal
User->>NewsletterModal: Click unsubscribe
NewsletterModal->>AppState: Trigger unsubscribe action
AppState->>NewsletterModal: Update state and credits
else If opened state is false
AppState->>NewsletterModal: Do not render modal
end
Assessment against linked issues
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
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
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: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribeSection.tsx (1 hunks)
- apps/web/app/(app)/cold-email-blocker/ColdEmailList.tsx (1 hunks)
- apps/web/app/(app)/cold-email-blocker/ColdEmailRejected.tsx (1 hunks)
- apps/web/app/(app)/new-senders/NewSenders.tsx (1 hunks)
- apps/web/app/(app)/stats/NewsletterModal.tsx (2 hunks)
Additional context used
Biome
apps/web/app/(app)/stats/NewsletterModal.tsx
[error] 42-42: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 33-34: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
Additional comments not posted (7)
apps/web/app/(app)/cold-email-blocker/ColdEmailRejected.tsx (1)
68-73: Conditional Rendering ofNewsletterModalThe conditional rendering of
NewsletterModalbased onopenedRowis a good practice. It prevents unnecessary rendering of the modal when there is no relevant data to display, enhancing performance and user experience.apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribeSection.tsx (1)
226-233: Conditional Rendering and NewmutatePropThe conditional rendering of
NewsletterModalbased onopenedNewsletterenhances performance by rendering the modal only when necessary. The introduction of themutateprop allows for state updates, improving the component's functionality.apps/web/app/(app)/stats/NewsletterModal.tsx (3)
39-42: RequirednewsletterProp and OptionalmutatePropThe change to make the
newsletterprop required ensures that the component always receives necessary data, enhancing robustness. The optionalmutateprop allows for flexible state handling, which is a valuable addition.Tools
Biome
[error] 42-42: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
45-45: Default Value formutateProviding a default value for
mutateensures that the component can function even if the prop is not explicitly passed, which is a good practice for maintaining component stability.
56-62: Integration ofuseUnsubscribeButtonHookThe integration of the
useUnsubscribeButtonhook centralizes the unsubscribe logic, improving maintainability and ensuring consistent behavior across different parts of the application.apps/web/app/(app)/cold-email-blocker/ColdEmailList.tsx (1)
146-151: Conditional rendering ofNewsletterModalimproves performance.The change ensures that the
NewsletterModalis only rendered whenopenedRowis truthy, preventing unnecessary renders and enhancing performance.apps/web/app/(app)/new-senders/NewSenders.tsx (1)
214-220: Conditional rendering ofNewsletterModalenhances performance.The change ensures that the
NewsletterModalis only rendered whenopenedNewsletteris truthy, preventing unnecessary renders and improving performance.
| onClose: (isOpen: boolean) => void; | ||
| refreshInterval?: number; | ||
| mutate?: () => Promise<any>; |
There was a problem hiding this comment.
Avoid Using any Type
The use of any should be avoided to maintain type safety. Consider specifying a more precise type for the mutate function to enhance type checking.
- mutate?: () => Promise<any>;
+ mutate?: () => Promise<void>;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.
| mutate?: () => Promise<any>; | |
| mutate?: () => Promise<void>; |
Tools
Biome
[error] 42-42: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
There was a problem hiding this comment.
I agree bot. I tried my best to make the suggestion of mutate?: () => Promise<void>; work but there were a lot of side effects with it. Would be happy to see a fix for this.
The issue here is that the mutate function passed down to this NewsletterModal component is to mutate multiple newsletters, but this component only needs to mutate a single newsletter.
The only fixes I could think of was to:
- Create a new API route to mutate a single newsletter as well, along with the existing API route to mutate multiple newsletters.
- Update the
useUnsubscribeButtonhook's logic, and all of its usages.
I think this will need refactoring in the future regardless. Would be happy to have a look at this later.
There was a problem hiding this comment.
@aryanprince, thanks for sharing your insights and potential solutions. It seems like a refactoring effort could indeed be beneficial to address the scope of the mutate function. To ensure this doesn't get lost, would you like me to create a follow-up issue to track this refactoring task? This way, we can revisit it when the time is right and ensure the NewsletterModal component handles mutations more precisely. Let me know how you'd like to proceed!
| {!unsubscribeLoading && <span>Unsubscribe</span>} | ||
| {!!unsubscribeLoading && ( | ||
| <div className="flex cursor-not-allowed items-center opacity-50"> | ||
| <ButtonLoader /> | ||
| <span>Unsubscribing...</span> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
Could use a ternary to make this cleaner. ie: unsubscribeLoading ? Unsub : Loading...
If you're trying to add disabled state, then you could add disabled={unsubscribeLoading} to the button itself.
There was a problem hiding this comment.
Updated it now! Used a ternary here instead and added the disabled state to the button.
| onClose={() => setOpenedNewsletter(undefined)} | ||
| refreshInterval={props.refreshInterval} | ||
| /> | ||
| {openedNewsletter && ( |
There was a problem hiding this comment.
Did you need to add {openedNewsletter && (?
I think it stops the animation when it's done like that. Or was this added to fix a bug?
There was a problem hiding this comment.
Reason
This is cus the <NewsletterModal /> component now requires (non-optional) the openedNewsletter prop, which was previously optional.
The reason for this change is that the component now uses the existing useUnsubscribeButton hook, which does need a required openedNewsletter prop.
Initially, I tried keeping openedNewsletter as optional (to have less diffs like the one you brought up here), but that would have required introducing a second hook for unsubscribing, which would complicate the logic unnecessarily.
Minor Benefit
Additionally, making openedNewsletter a required prop also ensures that the <NewsletterModal /> is only rendered when all necessary data is present, making it more robust and predictable in terms of when it renders throughout the app.
Quick Demo
Also, below GIF shows that the animations are still intact. No issues with that according to my testing.
Resolves a PR comment
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- apps/web/app/(app)/stats/NewsletterModal.tsx (2 hunks)
Additional context used
Biome
apps/web/app/(app)/stats/NewsletterModal.tsx
[error] 42-42: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 4-5: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
Additional comments not posted (2)
apps/web/app/(app)/stats/NewsletterModal.tsx (2)
42-42: Avoid usinganytype formutateprop.The use of
anyshould be avoided to maintain type safety. Consider specifying a more precise type for themutatefunction to enhance type checking.- mutate?: () => Promise<any>; + mutate?: () => Promise<void>;Tools
Biome
[error] 42-42: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
74-90: Enhancement: Improved unsubscribe button logic.The unsubscribe button now includes a loading state and is disabled during the unsubscribe action, enhancing user experience by preventing multiple submissions and providing feedback. The implementation is correct.
| > | ||
| Unsubscribe | ||
| {unsubscribeLoading ? ( | ||
| // Button loading state |
There was a problem hiding this comment.
really don't need this comment lol. pretty clear from the code that it's loading state 😆
There was a problem hiding this comment.
Haha done, removed the comments now
| <span>Unsubscribing...</span> | ||
| </div> | ||
| ) : ( | ||
| // Button default state |
There was a problem hiding this comment.
yes lol. you can remove this comment
|
Hey, took a look again. I'm going to run myself locally and then will get it merged in after. I see there's also merge conflicts now :( |
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- apps/web/app/(app)/stats/NewsletterModal.tsx (2 hunks)
Additional context used
Learnings (1)
apps/web/app/(app)/stats/NewsletterModal.tsx (1)
Learnt from: aryanprince PR: elie222/inbox-zero#210 File: apps/web/app/(app)/stats/NewsletterModal.tsx:2-4 Timestamp: 2024-08-23T11:37:26.779Z Learning: `MoreDropdown` is a React component and `useUnsubscribeButton` is a custom React hook, and they should not be imported using `import type`.
Biome
apps/web/app/(app)/stats/NewsletterModal.tsx
[error] 42-42: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 4-5: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
Additional comments not posted (6)
apps/web/app/(app)/stats/NewsletterModal.tsx (6)
2-4: LGTM: Correct imports addedThe new imports for
MoreDropdownanduseUnsubscribeButtonare correctly added. These are not type-only imports, so the current import statement is appropriate.
12-24: LGTM: UI component imports addedThe new imports for various UI components (AlertBasic, LoadingContent, usePremium, Tooltip, Button, ButtonLoader, Dialog, DialogContent, DialogHeader, DialogTitle) are correctly added. These imports are necessary for the new functionality in the
NewsletterModalcomponent.
27-36: LGTM: Utility and type imports addedThe new imports for various utilities, types, and external libraries (onAutoArchive, getGmailFilterSettingsUrl, ZodPeriod, BarChart, ExternalLinkIcon, useSession, Link, usePostHog, DateRange, useSWR) are correctly added. These imports support the enhanced functionality of the
NewsletterModalcomponent.
45-62: LGTM: Enhanced functionality with new hooksThe changes in this section improve the
NewsletterModalcomponent:
- Setting a default value for
mutateis a good practice, ensuring the function always exists.- The introduction of
usePremiumandusePostHoghooks adds necessary functionality.- The
useUnsubscribeButtonhook is correctly implemented with all required props.These changes enhance the component's capabilities and maintain good coding practices.
74-89: LGTM: Improved unsubscribe button functionalityThe changes to the unsubscribe button enhance its functionality and user experience:
- Disabling the button during the unsubscribe process prevents multiple clicks.
- Using
onUnsubscribefrom the hook ensures consistent behavior across the application.- The ternary operator for the loading state improves code readability and provides clear feedback to the user.
These changes effectively address the issue mentioned in the PR objectives, ensuring that unsubscribing via the modal performs all necessary actions.
Line range hint
1-252: Summary: Effective solution to unsubscribe functionality issueThis PR successfully addresses the bug related to the unsubscribe functionality in the
NewsletterModalcomponent. The key improvements include:
- Consistent use of the
useUnsubscribeButtonhook for both unsubscribe methods.- Proper handling of loading states and user feedback during the unsubscribe process.
- Enhanced type safety with required props and suggested improvements for the
mutateprop type.These changes ensure that unsubscribing via the newsletter modal now correctly decrements unsubscribe credits, updates the newsletter status, and triggers analytics, achieving consistency with the table row action buttons.
The code maintains good quality and readability. The only minor suggestion is to consider using a more specific type for the
mutateprop instead ofany.Overall, this PR effectively resolves the issue described in #209 and improves the overall functionality of the
NewsletterModalcomponent.Tools
Biome
[error] 42-42: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 4-5: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
…unsubscribe-credits
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range and nitpick comments (3)
apps/web/app/(app)/cold-email-blocker/ColdEmailRejected.tsx (1)
68-73: Improved rendering logic, but consider simplifying thenewsletterprop.The conditional rendering of the
NewsletterModalis a good improvement. It enhances performance by avoiding unnecessary renders whenopenedRowis undefined.However, the
newsletterprop assignment can be simplified:Consider simplifying the
newsletterprop assignment:{openedRow && ( <NewsletterModal - newsletter={openedRow && { name: openedRow.fromEmail || "" }} + newsletter={{ name: openedRow.fromEmail || "" }} onClose={() => setOpenedRow(undefined)} /> )}This change removes the redundant check for
openedRow, as it's already guaranteed to be truthy within this block.apps/web/app/(app)/stats/NewsletterModal.tsx (1)
Line range hint
1-86: Great job on improving the NewsletterModal component!The changes in this file successfully address the bug described in issue #209 and meet the PR objectives. Key improvements include:
- Standardizing the unsubscribe action using the
useUnsubscribehook.- Ensuring proper handling of unsubscribe credits and premium access.
- Improving user feedback during the unsubscribe process.
- Making the
newsletterprop required for better type safety.These changes will lead to a more consistent and reliable unsubscribe experience across the application. The code is now more maintainable and provides better user feedback.
Consider creating a separate file for the
useUnsubscribehook if it's used in multiple components. This would improve code organization and make it easier to maintain and test the unsubscribe logic independently.Tools
Biome
[error] 40-40: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 2-3: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/web/app/(app)/new-senders/NewSenders.tsx (1)
Line range hint
1-391: ImplementuseUnsubscribeButtonhook inActionCell.The PR objectives mention standardizing the unsubscribe actions using the
useUnsubscribeButtonhook. However, this implementation is not visible in the current changes. To fully address the unsubscribe functionality bug, consider implementing theuseUnsubscribeButtonhook in theActionCellcomponent.Here's a suggested approach:
Import the
useUnsubscribeButtonhook at the top of the file:import { useUnsubscribeButton } from '@/hooks/useUnsubscribeButton';Modify the
ActionCellcomponent to use the hook:function ActionCell({ item, userEmail, hasUnsubscribeAccess, mutate, refetchPremium, onOpenNewsletter, selected, userGmailLabels, openPremiumModal, }) { const { onUnsubscribe } = useUnsubscribeButton({ newsletter: item, mutate, // Add other necessary props }); // Use onUnsubscribe in your unsubscribe button's onClick handler // ... }This change will ensure that both unsubscribe buttons (in the modal and the table row) use the same logic, addressing the inconsistency mentioned in the PR objectives.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (7)
- apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribeSection.tsx (1 hunks)
- apps/web/app/(app)/cold-email-blocker/ColdEmailList.tsx (1 hunks)
- apps/web/app/(app)/cold-email-blocker/ColdEmailRejected.tsx (1 hunks)
- apps/web/app/(app)/compose/selectors/color-selector.tsx (1 hunks)
- apps/web/app/(app)/compose/selectors/link-selector.tsx (1 hunks)
- apps/web/app/(app)/new-senders/NewSenders.tsx (1 hunks)
- apps/web/app/(app)/stats/NewsletterModal.tsx (2 hunks)
Files skipped from review due to trivial changes (2)
- apps/web/app/(app)/compose/selectors/color-selector.tsx
- apps/web/app/(app)/compose/selectors/link-selector.tsx
Additional context used
Learnings (1)
apps/web/app/(app)/stats/NewsletterModal.tsx (1)
Learnt from: aryanprince PR: elie222/inbox-zero#210 File: apps/web/app/(app)/stats/NewsletterModal.tsx:2-4 Timestamp: 2024-08-23T11:37:26.779Z Learning: `MoreDropdown` is a React component and `useUnsubscribeButton` is a custom React hook, and they should not be imported using `import type`.
Biome
apps/web/app/(app)/stats/NewsletterModal.tsx
[error] 40-40: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 2-3: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
Additional comments not posted (9)
apps/web/app/(app)/cold-email-blocker/ColdEmailRejected.tsx (1)
68-73: Clarification needed on missing elements from PR objectivesWhile the changes improve the rendering logic, some key elements mentioned in the PR objectives are not visible in this component:
- The
useUnsubscribeButtonhook is not implemented here.- The
mutateprop is not being passed to theNewsletterModal.- It's unclear how the unsubscribe functionality has been standardized between the modal and the table row action buttons.
Could you please clarify how these aspects are addressed in the overall solution? If they are implemented elsewhere, it would be helpful to see those changes as well.
To verify the implementation of the
useUnsubscribeButtonhook and themutateprop, we can run the following script:This script will help us locate where these elements are implemented and ensure they are correctly used across the codebase.
apps/web/app/(app)/stats/NewsletterModal.tsx (5)
1-2: LGTM: New imports for unsubscribe functionalityThe addition of
MoreDropdownanduseUnsubscribeimports aligns with the PR objective of standardizing the unsubscribe actions. These components will help implement the consistent unsubscribe behavior across different parts of the application.
43-43: LGTM: Default value for mutate functionProviding a default value for the
mutatefunction is a good practice. It ensures thatmutateis always a function, preventing potential runtime errors if it's not passed as a prop. This change contributes to the robustness of the component and aligns with the PR objective of standardizing unsubscribe actions.
50-50: LGTM: Added premium access check for unsubscribeThe addition of the
usePremiumhook is a good improvement. It allows for checking unsubscribe access and provides a way to refetch premium status. This change aligns with the PR objective of properly handling unsubscribe credits and ensures that only users with appropriate access can perform unsubscribe actions.
54-60: LGTM: Centralized unsubscribe logic with useUnsubscribe hookThe addition of the
useUnsubscribehook is an excellent improvement. It centralizes the unsubscribe logic, which directly addresses the PR objective of standardizing unsubscribe actions across different parts of the application. This hook encapsulates all necessary dependencies and callbacks, including:
- Access check (
hasUnsubscribeAccess)- State update (
mutate)- Analytics tracking (
posthog)- Premium status update (
refetchPremium)This centralization will make it easier to maintain consistent behavior and will simplify future updates to the unsubscribe process.
72-86: LGTM: Improved unsubscribe button with loading state and proper event handlingThe changes to the unsubscribe button are well-implemented and address the PR objectives:
- The button is now disabled during the unsubscribe process, preventing multiple attempts.
- The
onClickevent properly calls theonUnsubscribefunction from theuseUnsubscribehook.- A loading state is displayed, providing clear feedback to the user during the unsubscribe action.
These improvements ensure that the unsubscribe functionality in the modal works correctly and consistently with other parts of the application. The enhanced user feedback during the process is a nice touch that improves the overall user experience.
apps/web/app/(app)/cold-email-blocker/ColdEmailList.tsx (1)
Line range hint
1-324: Verify related changes in NewsletterModal componentThe changes in this file partially address the unsubscribe functionality issue mentioned in the PR objectives. However, to ensure a complete solution, we should verify the changes made to the
NewsletterModalcomponent, which is not visible in this file.Please confirm that the
NewsletterModalcomponent has been updated to use theuseUnsubscribeButtonhook as mentioned in the PR objectives. This is crucial for standardizing the unsubscribe actions across different parts of the application.#!/bin/bash # Search for useUnsubscribeButton usage in NewsletterModal rg --type typescript -A 10 'useUnsubscribeButton.*NewsletterModal'apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribeSection.tsx (1)
260-267: LGTM! These changes address the unsubscribe functionality issue.The conditional rendering of
NewsletterModaland the addition of themutateprop effectively solve the bug described in issue #209. This ensures that unsubscribing via the newsletter modal will now correctly update the state and trigger necessary actions.Key improvements:
- Conditional rendering prevents unnecessary renders when there's no opened newsletter.
- The
mutateprop allows for state updates after unsubscribe actions.- Accessing
refreshIntervalfrompropsmaintains consistency with other prop usage.These changes align well with the PR objectives and address the concerns raised in the previous review.
apps/web/app/(app)/new-senders/NewSenders.tsx (1)
214-220: Improved modal rendering and prop passing.The conditional rendering of
NewsletterModalbased onopenedNewsletteris a good improvement. It prevents unnecessary rendering when there's no newsletter to display. Additionally, passing thenewsletterprop toNewsletterModalaligns with the PR objectives of addressing the unsubscribe functionality bug.
| newsletter: Pick<Row, "name" | "lastUnsubscribeLink" | "autoArchived">; | ||
| onClose: (isOpen: boolean) => void; | ||
| refreshInterval?: number; | ||
| mutate?: () => Promise<any>; |
There was a problem hiding this comment.
Approve newsletter prop change, but consider specifying mutate type
The change to make the newsletter prop required is good as it ensures the component always receives necessary data. However, for the mutate prop:
The newsletter prop change is approved.
The mutate prop uses the any type, which is generally discouraged as it bypasses TypeScript's type checking. Consider specifying a more precise return type for the Promise. If the exact type is unknown, you could use unknown instead of any:
mutate?: () => Promise<unknown>;This maintains type safety while allowing flexibility in the return type.
Tools
Biome
[error] 40-40: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
| {openedRow && ( | ||
| <NewsletterModal | ||
| newsletter={openedRow && { name: openedRow.fromEmail || "" }} | ||
| onClose={() => setOpenedRow(undefined)} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
💡 Codebase verification
Add Missing mutate Prop to NewsletterModal in ColdEmailList.tsx
The NewsletterModal in ColdEmailList.tsx is missing the mutate prop, which is necessary for handling the unsubscribe functionality as outlined in the PR objectives. To ensure consistent behavior across all components, please add the mutate prop as shown below:
{openedRow && (
<NewsletterModal
- newsletter={openedRow && { name: openedRow.fromEmail || "" }}
+ newsletter={{ name: openedRow.fromEmail || "" }}
onClose={() => setOpenedRow(undefined)}
+ mutate={mutate}
/>
)}This addition aligns with the implementation in other components and ensures the unsubscribe functionality operates correctly.
Analysis chain
Simplify newsletter prop and add missing mutate prop
The conditional rendering of NewsletterModal is an improvement, but there are a couple of points to address:
- The
newsletterprop can be simplified sinceopenedRowis already checked in the conditional rendering. - The
mutateprop is missing, which is mentioned in the PR objectives as part of the fix for the unsubscribe functionality issue.
Please apply the following changes:
{openedRow && (
<NewsletterModal
- newsletter={openedRow && { name: openedRow.fromEmail || "" }}
+ newsletter={{ name: openedRow.fromEmail || "" }}
onClose={() => setOpenedRow(undefined)}
+ mutate={mutate}
/>
)}Can you confirm if these changes, along with updates in the NewsletterModal component (not visible in this file), fully address the unsubscribe functionality issue mentioned in the PR objectives? If not, what additional changes are needed?
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for NewsletterModal usage and implementation
rg --type typescript -A 10 'NewsletterModal'
Length of output: 103
Script:
#!/bin/bash
# Search for NewsletterModal usage and implementation in .ts and .tsx files
rg 'NewsletterModal' --glob '*.ts*' -A 10
Length of output: 9199
There was a problem hiding this comment.
@aryanprince, happy to hear that the issue has been resolved!
(_/)
(•ᴗ•)
/🐰\
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
| {openedNewsletter && ( | ||
| <NewsletterModal | ||
| newsletter={openedNewsletter} | ||
| onClose={() => setOpenedNewsletter(undefined)} | ||
| refreshInterval={props.refreshInterval} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
Inconsistent prop access and missing mutate prop.
There are two issues with the current implementation:
-
The
refreshIntervalprop is accessed viaprops.refreshInterval, which is inconsistent with the component's parameter destructuring. It should be accessed directly asrefreshInterval. -
The PR objectives mention passing a
mutateprop to theNewsletterModal, but this is not visible in the changes. This prop is crucial for addressing the unsubscribe functionality bug.
To address these issues, please apply the following changes:
{openedNewsletter && (
<NewsletterModal
newsletter={openedNewsletter}
onClose={() => setOpenedNewsletter(undefined)}
- refreshInterval={props.refreshInterval}
+ refreshInterval={refreshInterval}
+ mutate={mutate}
/>
)}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.
| {openedNewsletter && ( | |
| <NewsletterModal | |
| newsletter={openedNewsletter} | |
| onClose={() => setOpenedNewsletter(undefined)} | |
| refreshInterval={props.refreshInterval} | |
| /> | |
| )} | |
| {openedNewsletter && ( | |
| <NewsletterModal | |
| newsletter={openedNewsletter} | |
| onClose={() => setOpenedNewsletter(undefined)} | |
| refreshInterval={refreshInterval} | |
| mutate={mutate} | |
| /> | |
| )} |
There was a problem hiding this comment.
@aryanprince, glad to hear you've fixed it!
(^‿^)/
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
|
Note Just a quick update for this PR Summary✅ Resolved conflicts, updated changes in this PR according to new code changes from main. Major Changes
No other changes to this PR other than these. Minor ChangesThere were only 5 file changes in this PR previously, now there's 7. 2 of the extra files changed are due to |
Summary
This PR fixes a bug where unsubscribing from a newsletter via the newsletter modal failed to work as expected. Specifically, the bug prevented the decrement of unsubscribe credits, updating of the newsletter status, triggering of analytics and more. You can find more details about the issue here.
The main issue was that the unsubscribe buttons in the app were performing different actions. With this fix, both unsubscribe buttons (table row action and the one in the newsletter modal) now use the same
useUnsubscribeButtonhook, ensuring consistent behavior across the app.Fixes #209
Changes
onClickproperty for the unsubscribe button within the newsletter modal to use theonUnsubscribefunction from theuseUnsubscribeButtonhook, ensuring all expected actions are executed.mutateprop from the parentBulkUnsubscribeSectioncomponent to theNewsletterModalcomponent.NewsletterModalcomponent cus changes in its props, which are now required (was optional before).Demo
Before the fix
The GIF below shows the unsubscribe process using the table row action button, which works as expected:
In contrast, the GIF below demonstrates unsubscribing via the newsletter modal, which does not work as expected. It doesn't update the unsubscribe count or update the newsletter's status:
After the fix
The GIF below illustrates the corrected behavior after applying this PR. Unsubscribing via the newsletter modal now does all of the same actions as clicking the unsubscribe button from the table row action button:
Summary by CodeRabbit
New Features
NewsletterModalacross multiple components to enhance performance and user experience.newsletterprop and an optionalmutateprop to theNewsletterModal, improving data handling and interactivity.NewsletterModal.Bug Fixes
NewsletterModalwhen conditions are not met.Style
ColorSelectorandLinkSelectorcomponents for improved consistency.