added useNotification @lib, using it in EventType (#468)

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 ? (
     <>
+      <div>
+        <Toaster position="bottom-right" />
+      </div>
+
       <div className="h-screen flex overflow-hidden bg-gray-100">
         {/* Static sidebar for desktop */}
         <div className="hidden md:flex md:flex-shrink-0">

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",
+        },
+      });
+  }
+}

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",

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">

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 }) {
                         <Tooltip content="Copy link">
                           <button
                             onClick={() => {
+                              showToast("Link copied!", "success");
                               navigator.clipboard.writeText(
                                 window.location.hostname + "/" + session.user.username + "/" + type.slug
                               );
@@ -293,6 +296,7 @@ export default function Availability({ user, types }) {
                                     {({ active }) => (
                                       <button
                                         onClick={() => {
+                                          showToast("Link copied!", "success");
                                           navigator.clipboard.writeText(
                                             window.location.hostname +
                                               "/" +

yarn.lock

@@ -3215,6 +3215,11 @@ globby@^11.0.3:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
+goober@^2.0.35:
+  version "2.0.41"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.0.41.tgz#0a3d786ff9917bcf2a096eef703bf717838cbec9"
+  integrity sha512-kwjegMT5018zWydhOQlQneCgCtrKJaPsru7TaBWmTYV0nsMeUrM6L6O8JmNYb9UbPMgWcmtf+9p4Y3oJabIH1A==
+
 google-auth-library@^7.0.2:
   version "7.6.1"
   resolved "https://registry.npmjs.org/google-auth-library/-/google-auth-library-7.6.1.tgz#be3d393212fc9dafee7d05975c4ebe88efecc16d"
@@ -5550,6 +5555,13 @@ react-easy-crop@^3.5.2:
     normalize-wheel "^1.0.1"
     tslib "2.0.1"
 
+react-hot-toast@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.1.0.tgz#f4fe3107a3ccd1d7e76ad3d3282967fbf2fccf2c"
+  integrity sha512-/wUoUVUC/qCYmkJvMzl/oXBIJe47vYqtwOpA76Pz8SrklrF8RBUTLG2eS+ivznzQzY8YlsyODIV7Qk3vOnFf1g==
+  dependencies:
+    goober "^2.0.35"
+
 react-input-autosize@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"