-
Notifications
You must be signed in to change notification settings - Fork 242
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Add unsubscribe functionality to NewsletterModal
#210
base: main
Are you sure you want to change the base?
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. |
NewsletterModal
(#209)
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
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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 ofNewsletterModal
The conditional rendering of
NewsletterModal
based onopenedRow
is 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 Newmutate
PropThe conditional rendering of
NewsletterModal
based onopenedNewsletter
enhances performance by rendering the modal only when necessary. The introduction of themutate
prop allows for state updates, improving the component's functionality.apps/web/app/(app)/stats/NewsletterModal.tsx (3)
39-42
: Requirednewsletter
Prop and Optionalmutate
PropThe change to make the
newsletter
prop required ensures that the component always receives necessary data, enhancing robustness. The optionalmutate
prop 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 formutate
Providing a default value for
mutate
ensures 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 ofuseUnsubscribeButton
HookThe integration of the
useUnsubscribeButton
hook 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 ofNewsletterModal
improves performance.The change ensures that the
NewsletterModal
is only rendered whenopenedRow
is truthy, preventing unnecessary renders and enhancing performance.apps/web/app/(app)/new-senders/NewSenders.tsx (1)
214-220
: Conditional rendering ofNewsletterModal
enhances performance.The change ensures that the
NewsletterModal
is only rendered whenopenedNewsletter
is truthy, preventing unnecessary renders and improving performance.
onClose: (isOpen: boolean) => void; | ||
refreshInterval?: number; | ||
mutate?: () => Promise<any>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
useUnsubscribeButton
hook'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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated it now! Used a ternary here instead and added the disabled state to the button.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
2 comments
onClose={() => setOpenedNewsletter(undefined)} | ||
refreshInterval={props.refreshInterval} | ||
/> | ||
{openedNewsletter && ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 usingany
type formutate
prop.The use of
any
should be avoided to maintain type safety. Consider specifying a more precise type for themutate
function 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.
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
useUnsubscribeButton
hook, ensuring consistent behavior across the app.Fixes #209
Changes
onClick
property for the unsubscribe button within the newsletter modal to use theonUnsubscribe
function from theuseUnsubscribeButton
hook, ensuring all expected actions are executed.mutate
prop from the parentBulkUnsubscribeSection
component to theNewsletterModal
component.NewsletterModal
component 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
NewsletterModal
across multiple components to enhance performance and user experience.newsletter
prop and an optionalmutate
prop to theNewsletterModal
, improving data handling and interactivity.NewsletterModal
.Bug Fixes
NewsletterModal
when conditions are not met.