-
Notifications
You must be signed in to change notification settings - Fork 489
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
Switch to Sonner for toast notifications #9405
base: develop
Are you sure you want to change the base?
Changes from 1 commit
5c0f052
bb44c6a
a828352
9434c27
0761bc7
c3b3b8d
cbd8d11
05702ac
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -1,16 +1,14 @@ | ||||||||||||||||||||||||||||||||||||||
/* eslint-disable i18next/no-literal-string */ | ||||||||||||||||||||||||||||||||||||||
import { t } from "i18next"; | ||||||||||||||||||||||||||||||||||||||
import React, { useState } from "react"; | ||||||||||||||||||||||||||||||||||||||
import { toast } from "sonner"; | ||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||
import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon"; | ||||||||||||||||||||||||||||||||||||||
import iconPaths from "@/CAREUI/icons/UniconPaths.json"; | ||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||
import PageTitle from "@/components/Common/PageTitle"; | ||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||
import { useToast } from "@/hooks/useToast"; | ||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||
const IconIndex: React.FC = () => { | ||||||||||||||||||||||||||||||||||||||
const { toast } = useToast(); | ||||||||||||||||||||||||||||||||||||||
const [searchTerm, setSearchTerm] = useState(""); | ||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||
const filteredIcons = Object.keys(iconPaths).filter((iconName) => | ||||||||||||||||||||||||||||||||||||||
|
@@ -20,10 +18,7 @@ const IconIndex: React.FC = () => { | |||||||||||||||||||||||||||||||||||||
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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ 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"));
|
||||||||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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
Suggested change
|
||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||
return ( | ||||||||||||||||||||||||||||||||||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { useTheme } from "next-themes"; | ||
import { Toaster as Sonner } from "sonner"; | ||
|
||
type ToasterProps = React.ComponentProps<typeof Sonner>; | ||
|
||
const Toaster = ({ ...props }: ToasterProps) => { | ||
const { theme = "system" } = useTheme(); | ||
|
||
return ( | ||
<Sonner | ||
theme={theme as ToasterProps["theme"]} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add expand prop. Let's have the notifications expanded by default, while the hover state looks nice, I don't think it will work (esp for mobile screens). And look at tests like Rithvik mentioned above 👍 |
||
className="toaster group" | ||
toastOptions={{ | ||
classNames: { | ||
toast: | ||
"group toast group-[.toaster]:bg-white group-[.toaster]:text-gray-950 group-[.toaster]:border-gray-200 group-[.toaster]:shadow-lg dark:group-[.toaster]:bg-gray-950 dark:group-[.toaster]:text-gray-50 dark:group-[.toaster]:border-gray-800", | ||
description: | ||
"group-[.toast]:text-gray-500 dark:group-[.toast]:text-gray-400", | ||
actionButton: | ||
"group-[.toast]:bg-gray-900 group-[.toast]:text-gray-50 dark:group-[.toast]:bg-gray-50 dark:group-[.toast]:text-gray-900", | ||
cancelButton: | ||
"group-[.toast]:bg-gray-100 group-[.toast]:text-gray-500 dark:group-[.toast]:bg-gray-800 dark:group-[.toast]:text-gray-400", | ||
}, | ||
}} | ||
{...props} | ||
/> | ||
); | ||
}; | ||
|
||
export { Toaster }; |
This file was deleted.
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.
LGTM, just few things...
Ensure notifications are placed in top right of the screen and rich colors are used.
As already mentioned in the issue, use this:
care_fe/src/App.tsx
Lines 38 to 45 in e48d37c