diff --git a/components/Shell.tsx b/components/Shell.tsx index 4b8e614c..a8d6b3f1 100644 --- a/components/Shell.tsx +++ b/components/Shell.tsx @@ -17,6 +17,7 @@ import { } from "@heroicons/react/solid"; import Logo from "./Logo"; import classNames from "@lib/classNames"; +import { Toaster } from "react-hot-toast"; export default function Shell(props) { const router = useRouter(); @@ -69,6 +70,10 @@ export default function Shell(props) { return session ? ( <> +
+ +
+
{/* Static sidebar for desktop */}
diff --git a/lib/notification.ts b/lib/notification.ts new file mode 100644 index 00000000..c97546a5 --- /dev/null +++ b/lib/notification.ts @@ -0,0 +1,49 @@ +import toast from "react-hot-toast"; + +export default function showToast(message: string, variant: "success" | "warning" | "error") { + switch (variant) { + case "success": + toast.success(message, { + duration: 6000, + style: { + borderRadius: "2px", + background: "#333", + color: "#fff", + boxShadow: "none", + }, + }); + break; + case "error": + toast.error(message, { + duration: 6000, + style: { + borderRadius: "2px", + background: "#FEE2E2", + color: "#B91C1C", + boxShadow: "none", + }, + }); + break; + case "warning": + toast(message, { + duration: 6000, + style: { + borderRadius: "2px", + background: "#FFEDD5", + color: "#C2410C", + boxShadow: "none", + }, + }); + break; + default: + toast.success(message, { + duration: 6000, + style: { + borderRadius: "2px", + background: "#333", + color: "#fff", + boxShadow: "none", + }, + }); + } +} diff --git a/package.json b/package.json index 6138446a..ae9122f1 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "react-dates": "^21.8.0", "react-dom": "17.0.2", "react-easy-crop": "^3.5.2", + "react-hot-toast": "^2.1.0", "react-multi-email": "^0.5.3", "react-phone-number-input": "^3.1.25", "react-select": "^4.3.1", diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx index bc17c0bd..b7b1f7f5 100644 --- a/pages/event-types/[type].tsx +++ b/pages/event-types/[type].tsx @@ -37,6 +37,7 @@ import { DateRangePicker, OrientationShape, toMomentObject } from "react-dates"; import Switch from "@components/ui/Switch"; import { Dialog, DialogTrigger } from "@components/Dialog"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; +import showToast from "@lib/notification"; dayjs.extend(utc); dayjs.extend(timezone); @@ -237,6 +238,9 @@ export default function EventTypePage({ }, }); + + router.push("/event-types"); + showToast("Event Type updated", "success"); setSuccessModalOpen(true); } @@ -250,7 +254,7 @@ export default function EventTypePage({ "Content-Type": "application/json", }, }); - + showToast("Event Type deleted", "success"); router.push("/event-types"); } @@ -876,6 +880,7 @@ export default function EventTypePage({ navigator.clipboard.writeText( window.location.hostname + "/" + user.username + "/" + eventType.slug ); + showToast("Link copied!", "success"); }} type="button" className="flex text-md font-medium text-neutral-700"> diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx index fce16851..2553040a 100644 --- a/pages/event-types/index.tsx +++ b/pages/event-types/index.tsx @@ -19,6 +19,7 @@ import { useRouter } from "next/router"; import React, { Fragment, useRef } from "react"; import Shell from "../../components/Shell"; import prisma from "../../lib/prisma"; +import showToast from "@lib/notification"; export default function Availability({ user, types }) { const [session, loading] = useSession(); @@ -54,6 +55,7 @@ export default function Availability({ user, types }) { if (enteredTitle && enteredLength) { await router.replace(router.asPath); } + showToast("Event Type created", "success"); } function autoPopulateSlug() { @@ -237,6 +239,7 @@ export default function Availability({ user, types }) {