[DRAFT] Switch to Sonner for toast notifications #9394 #9405
Conversation
WalkthroughThe pull request includes significant modifications to the notification handling system of the application. It transitions from using the PNotify library to the Sonner library for toast notifications. This involves removing PNotify dependencies from Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
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 (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (5)
src/components/ui/sonner.tsx (1)
9-28: Consider extracting theme-specific styles to a constants fileThe implementation looks good, but the long class names for different toast elements could be moved to a separate constants file for better maintainability.
Consider creating a
toasterStyles.ts:export const TOAST_STYLES = { toast: "group toast group-[.toaster]:bg-white ...", description: "group-[.toast]:text-gray-500 ...", // ... other styles };Then import and use it in the component:
- classNames: { - toast: "group toast group-[.toaster]:bg-white...", - description: "group-[.toast]:text-gray-500...", + classNames: TOAST_STYLES,src/Utils/Notifications.js (3)
41-43: Consider adding error message sanitization.While the error message handling is functional, consider sanitizing the error message before displaying it to prevent potential XSS attacks through error messages.
- toast.error(errorMsg, { duration: 5000 }); + const sanitizedMsg = DOMPurify.sanitize(errorMsg); + toast.error(sanitizedMsg, { duration: 5000 });
46-50: Consider adding a return value for closeAllNotifications.The function should return a boolean or Promise to indicate whether the operation was successful.
export const closeAllNotifications = () => { // Sonner doesn't require a close method, but you can manage this with custom logic if needed // Example: toast.dismiss() could be used to close all toasts if necessary. - toast.dismiss(); + toast.dismiss(); + return true; };
54-55: Standardize notification durations.Consider extracting duration values into constants to maintain consistency across different notification types.
+const NOTIFICATION_DURATIONS = { + SUCCESS: 3000, + ERROR: 5000, + INFO: 3000, +}; export const Success = ({ msg }) => { - toast.success(msg, { duration: 3000 }); + toast.success(msg, { duration: NOTIFICATION_DURATIONS.SUCCESS }); }; export const Error = ({ msg }) => { - toast.error(msg, { duration: 5000 }); + toast.error(msg, { duration: NOTIFICATION_DURATIONS.ERROR }); }; export const Warn = ({ msg }) => { - toast.info(msg, { duration: 3000 }); + toast.info(msg, { duration: NOTIFICATION_DURATIONS.INFO }); };Also applies to: 59-60, 64-65
src/components/Patient/DailyRounds.tsx (1)
341-343: Consider adding error recovery mechanism.While the error handling is functional, consider adding a retry mechanism for failed investigation updates.
+const MAX_RETRIES = 3; +const retryInvestigationUpdate = async (body, pathParams, retries = 0) => { + try { + const { error } = await request(routes.partialUpdateConsultation, { + body, + pathParams, + }); + return { error }; + } catch (err) { + if (retries < MAX_RETRIES) { + await new Promise(resolve => setTimeout(resolve, 1000 * (retries + 1))); + return retryInvestigationUpdate(body, pathParams, retries + 1); + } + return { error: err }; + } +}; if (state.form.rounds_type === "DOCTORS_LOG" && state.form.investigations_dirty) { - const { error: investigationError } = await request( - routes.partialUpdateConsultation, - { - body: { investigation: state.form.investigations }, - pathParams: { id: consultationId }, - }, - ); + const { error: investigationError } = await retryInvestigationUpdate( + { investigation: state.form.investigations }, + { id: consultationId } + ); if (investigationError) { Notification.Error({ msg: investigationError.message || investigationError, }); return; } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (10)
package.json(2 hunks)src/App.tsx(1 hunks)src/CAREUI/icons/Index.tsx(2 hunks)src/Utils/Notifications.js(2 hunks)src/components/Patient/DailyRounds.tsx(1 hunks)src/components/ui/sonner.tsx(1 hunks)src/components/ui/toast.tsx(0 hunks)src/components/ui/toaster.tsx(0 hunks)src/hooks/useToast.ts(0 hunks)src/style/index.css(0 hunks)
💤 Files with no reviewable changes (4)
- src/style/index.css
- src/components/ui/toaster.tsx
- src/hooks/useToast.ts
- src/components/ui/toast.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/Utils/Notifications.js
[error] 59-59: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🔇 Additional comments (4)
src/components/ui/sonner.tsx (1)
4-8: LGTM: Clean type-safe implementation
The component properly inherits and forwards all props from the Sonner Toaster component while adding theme support. The type safety is well implemented.
src/App.tsx (1)
5-5: LGTM: Clean import update
The import path update correctly reflects the migration to Sonner, and the Toaster component placement remains appropriate at the application root level.
src/Utils/Notifications.js (1)
1-1: LGTM: Clean import of Sonner.
The import statement correctly imports the toast function from the Sonner library.
package.json (1)
89-89: Verify Sonner version compatibility.
The added dependencies look correct, but let's verify the version compatibility and check for any known security issues.
Also applies to: 101-101
✅ Verification successful
Sonner dependency version is up-to-date and secure
The installed version (1.7.1) matches the latest version from npm registry, and there are no known security vulnerabilities reported for the package.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for latest versions and security advisories
echo "Checking latest versions..."
curl -s https://registry.npmjs.org/sonner/latest | jq '.version'
echo "Checking for security advisories..."
gh api graphql -f query='
{
securityVulnerabilities(first: 5, ecosystem: NPM, package: "sonner") {
nodes {
advisory {
summary
severity
publishedAt
}
vulnerableVersionRange
firstPatchedVersion {
identifier
}
}
}
}'
Length of output: 558
| description: "Icon copied to clipboard successfully", | ||
| variant: "success", | ||
| }); | ||
| toast.success("Icon copied to clipboard successfully"); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add i18n support for the toast message
The success message is hardcoded. Since the project uses i18next (as seen in the imports), this message should be internationalized.
- toast.success("Icon copied to clipboard successfully");
+ toast.success(t("icon.copy.success"));Committable suggestion skipped: line range outside the PR's diff.
| const copyToClipboard = (text: string) => { | ||
| navigator.clipboard.writeText(text); | ||
|
|
||
| toast({ | ||
| description: "Icon copied to clipboard successfully", | ||
| variant: "success", | ||
| }); | ||
| toast.success("Icon copied to clipboard successfully"); | ||
| }; |
There was a problem hiding this comment.
Add error handling for clipboard operations
The clipboard operation could fail in certain scenarios (permissions, secure context, etc.). Consider adding error handling.
- const copyToClipboard = (text: string) => {
- navigator.clipboard.writeText(text);
- toast.success("Icon copied to clipboard successfully");
+ const copyToClipboard = async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ toast.success(t("icon.copy.success"));
+ } catch (error) {
+ toast.error(t("icon.copy.error"));
+ console.error("Failed to copy to clipboard:", error);
+ }
};📝 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.
| const copyToClipboard = (text: string) => { | |
| navigator.clipboard.writeText(text); | |
| toast({ | |
| description: "Icon copied to clipboard successfully", | |
| variant: "success", | |
| }); | |
| toast.success("Icon copied to clipboard successfully"); | |
| }; | |
| const copyToClipboard = async (text: string) => { | |
| try { | |
| await navigator.clipboard.writeText(text); | |
| toast.success(t("icon.copy.success")); | |
| } catch (error) { | |
| toast.error(t("icon.copy.error")); | |
| console.error("Failed to copy to clipboard:", error); | |
| } | |
| }; |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Release Notes
New Features
Toastercomponent for improved toast notifications.Bug Fixes
DailyRoundscomponent for clearer error reporting.Chores
Refactor