vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.1k Packages Projects Releases Wiki Activity

fix: Toast Onclose is removing specific toast (#9960)

Browse Source 
* toast behaviour fixed

* Update showToast.tsx

* Adjust E2E test for toast

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Anik Dhabal Babu
2023-07-25 22:27:14 +00:00
committed by GitHub
co-authored by Peer Richelsen
parent 06dcaaef3b
commit 50d2dad62c
4 changed files with 28 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/playwright/change-password.e2e.ts
+1 -1
View File
@@ -23,7 +23,7 @@ test.describe("Change Password Test", () => {
await page.locator("text=Update").click();
const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
const toast = await page.waitForSelector('[data-testid="toast-success"]');
expect(toast).toBeTruthy();
});
apps/web/playwright/change-theme.e2e.ts
+2 -2
View File
@@ -15,7 +15,7 @@ test.describe("Change Theme Test", () => {
//Click the update button
await page.click('[data-testid="update-theme-btn"]');
//Wait for the toast to appear
const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
const toast = await page.waitForSelector('[data-testid="toast-success"]');
expect(toast).toBeTruthy();
//Go to the profile page and check if the theme is dark
await page.goto(`/${pro.username}`);
@@ -35,7 +35,7 @@ test.describe("Change Theme Test", () => {
//Click the update theme button
await page.click('[data-testid="update-theme-btn"]');
//Wait for the toast to appear
const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
const toast = await page.waitForSelector('[data-testid="toast-success"]');
expect(toast).toBeTruthy();
//Go to the profile page and check if the theme is light
await page.goto(`/${pro.username}`);
apps/web/playwright/event-types.e2e.ts
+1 -1
View File
@@ -97,7 +97,7 @@ test.describe("Event Types tests", () => {
return !!url.pathname.match(/\/event-types\/.+/);
});
await page.locator("[data-testid=update-eventtype]").click();
const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
const toast = await page.waitForSelector('[data-testid="toast-success"]');
expect(toast).toBeTruthy();
});
packages/ui/components/toast/showToast.tsx
+24 -23
View File
@@ -6,63 +6,64 @@ import { Check, Info } from "../icon";
type IToast = {
message: string;
toastVisible: boolean;
onClose: () => void;
toastId: string;
onClose: (toastId: string) => void;
};
export const SuccessToast = ({ message, toastVisible, onClose }: IToast) => (
<div
export const SuccessToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
<button
className={classNames(
"data-testid-toast-success bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up cursor-pointer"
)}
onClick={onClose}>
onClick={() => onClose(toastId)}>
<span>
<Check className="h-4 w-4" />
</span>
<p data-testid="toast-success">{message}</p>
</div>
</button>
);
export const ErrorToast = ({ message, toastVisible, onClose }: IToast) => (
<div
export const ErrorToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
<button
className={classNames(
"animate-fade-in-up bg-error text-error mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up cursor-pointer"
)}
onClick={onClose}>
onClick={() => onClose(toastId)}>
<span>
<Info className="h-4 w-4" />
</span>
<p data-testid="toast-error">{message}</p>
</div>
</button>
);
export const WarningToast = ({ message, toastVisible, onClose }: IToast) => (
<div
export const WarningToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
<button
className={classNames(
"animate-fade-in-up bg-brand-default text-brand mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up cursor-pointer"
)}
onClick={onClose}>
onClick={() => onClose(toastId)}>
<span>
<Info className="h-4 w-4" />
</span>
<p data-testid="toast-warning">{message}</p>
</div>
</button>
);
export const DefaultToast = ({ message, toastVisible, onClose }: IToast) => (
<div
export const DefaultToast = ({ message, toastVisible, onClose, toastId }: IToast) => (
<button
className={classNames(
"animate-fade-in-up bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
toastVisible && "animate-fade-in-up cursor-pointer"
)}
onClick={onClose}>
onClick={() => onClose(toastId)}>
<span>
<Check className="h-4 w-4" />
</span>
<p>{message}</p>
</div>
</button>
);
const TOAST_VISIBLE_DURATION = 6000;
@@ -72,28 +73,28 @@ export function showToast(
variant: "success" | "warning" | "error",
duration = TOAST_VISIBLE_DURATION
) {
const onClose = () => {
toast.dismiss();
const onClose = (toastId: string) => {
toast.remove(toastId);
};
switch (variant) {
case "success":
return toast.custom(
(t) => <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} />,
(t) => <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />,
{ duration }
);
case "error":
return toast.custom(
(t) => <ErrorToast message={message} toastVisible={t.visible} onClose={onClose} />,
(t) => <ErrorToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />,
{ duration }
);
case "warning":
return toast.custom(
(t) => <WarningToast message={message} toastVisible={t.visible} onClose={onClose} />,
(t) => <WarningToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />,
{ duration }
);
default:
return toast.custom(
(t) => <DefaultToast message={message} toastVisible={t.visible} onClose={onClose} />,
(t) => <DefaultToast message={message} toastVisible={t.visible} onClose={onClose} toastId={t.id} />,
{ duration }
);
}