fix: toasts-not-dismissings

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/role-toggle.tsx

@@ -3,7 +3,7 @@
 import { Checkbox } from "@/components/ui/checkbox";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { Loader2 } from "lucide-react";
+import { CircleCheck, Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 type Props = {
@@ -17,53 +17,71 @@ export const RoleToggle: React.FC<Props> = ({ roleId, keyId, checked }) => {
 
   const [optimisticChecked, setOptimisticChecked] = useState(checked);
   const connect = trpc.rbac.connectRoleToKey.useMutation({
-    onMutate: () => {
-      setOptimisticChecked(true);
-      toast.loading("Adding Role");
-    },
-    onSuccess: () => {
-      toast.success("Role added", {
-        description: "Changes may take up to 60 seconds to take effect.",
-        cancel: {
-          label: "Undo",
-          onClick: () => {
-            disconnect.mutate({ roleId, keyId });
-          },
-        },
-      });
-    },
-    onError(err) {
-      console.error(err);
-      toast.error(err.message);
-    },
     onSettled: () => {
       router.refresh();
     },
   });
   const disconnect = trpc.rbac.disconnectRoleFromKey.useMutation({
-    onMutate: () => {
-      setOptimisticChecked(false);
-      toast.loading("Removing role");
-    },
-    onSuccess: () => {
-      toast.success("Role removed", {
-        description: "Changes may take up to 60 seconds to take effect.",
-        cancel: {
-          label: "Undo",
-          onClick: () => {
-            connect.mutate({ roleId, keyId });
-          },
-        },
-      });
-    },
-    onError(err) {
-      console.error(err);
-      toast.error(err.message);
-    },
     onSettled: () => {
       router.refresh();
     },
   });
+
+  const handleConnect = async ({ roleId, keyId }: { roleId: string; keyId: string }) => {
+    setOptimisticChecked(true);
+    toast.promise(connect.mutateAsync({ roleId, keyId }), {
+      loading: "Adding Role ...",
+      success: () => (
+        <div className="flex items-center gap-2">
+          <CircleCheck className="w-4 h-4 text-gray-300" />
+
+          <div className="max-w-[250px]">
+            <h2 className="font-semibold">Role added</h2>
+            <p>Changes may take up to 60 seconds to take effect.</p>
+          </div>
+
+          <div>
+            <button
+              onClick={() => disconnect.mutate({ roleId, keyId })}
+              className="bg-[#2c2c2c] text-white px-[4px] py-[2px] rounded hover:bg-[#3c3c3c] transition-colors"
+            >
+              Undo
+            </button>
+          </div>
+        </div>
+      ),
+      error: (error) => `${error.message || "An error occurred while adding the Role ."}`,
+    });
+  };
+
+  const handleDisconnect = async ({ roleId, keyId }: { roleId: string; keyId: string }) => {
+    setOptimisticChecked(false);
+
+    toast.promise(disconnect.mutateAsync({ roleId, keyId }), {
+      loading: "Removing Role...",
+      success: () => (
+        <div className="flex items-center gap-2">
+          <CircleCheck className="w-4 h-4 text-gray-300" />
+
+          <div className="max-w-[250px]">
+            <h2 className="font-semibold">Role removed</h2>
+            <p>Changes may take up to 60 seconds to take effect.</p>
+          </div>
+
+          <div>
+            <button
+              onClick={() => connect.mutate({ roleId, keyId })}
+              className="bg-[#2c2c2c] text-white px-[4px] py-[2px] rounded hover:bg-[#3c3c3c] transition-colors"
+            >
+              Undo
+            </button>
+          </div>
+        </div>
+      ),
+      error: (error) => `${error.message || "An error occurred while removing the Role."}`,
+    });
+  };
+
   if (connect.isLoading || disconnect.isLoading) {
     return <Loader2 className="w-4 h-4 animate-spin" />;
   }
@@ -72,9 +90,9 @@ export const RoleToggle: React.FC<Props> = ({ roleId, keyId, checked }) => {
       checked={optimisticChecked}
       onClick={() => {
         if (optimisticChecked) {
-          disconnect.mutate({ roleId, keyId });
+          handleDisconnect({ roleId, keyId });
         } else {
-          connect.mutate({ roleId, keyId });
+          handleConnect({ roleId, keyId });
         }
       }}
     />

apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx

@@ -53,20 +53,17 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
   const isValid = form.watch("name") === role.name;
 
   const deleteRole = trpc.rbac.deleteRole.useMutation({
-    onMutate() {
-      toast.loading("Deleting Role");
-    },
     onSuccess() {
-      toast.success("Role deleted successfully");
       router.push("/authorization/roles");
     },
-    onError(err) {
-      toast.error(err.message);
-    },
   });
 
   async function onSubmit() {
-    deleteRole.mutate({ roleId: role.id });
+    toast.promise(deleteRole.mutateAsync({ roleId: role.id }), {
+      loading: "Deleting Role",
+      success: "Role deleted",
+      error: (error) => `${error.message || "An error occurred while deleting the Role ."}`,
+    });
   }
 
   return (

apps/dashboard/app/(app)/authorization/roles/[roleId]/permission-toggle.tsx

@@ -3,9 +3,10 @@
 import { Checkbox } from "@/components/ui/checkbox";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { Loader2 } from "lucide-react";
+import { CircleCheck, Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+
 type Props = {
   permissionId: string;
   roleId: string;
@@ -16,54 +17,73 @@ export const PermissionToggle: React.FC<Props> = ({ roleId, permissionId, checke
   const router = useRouter();
 
   const [optimisticChecked, setOptimisticChecked] = useState(checked);
+
   const connect = trpc.rbac.connectPermissionToRole.useMutation({
-    onMutate: () => {
-      setOptimisticChecked(true);
-      toast.loading("Adding Permission");
-    },
-    onSuccess: () => {
-      toast.success("Permission added", {
-        description: "Changes may take up to 60 seconds to take effect.",
-        cancel: {
-          label: "Undo",
-          onClick: () => {
-            disconnect.mutate({ roleId, permissionId });
-          },
-        },
-      });
-    },
-    onError(err) {
-      console.error(err);
-      toast.error(err.message);
-    },
     onSettled: () => {
       router.refresh();
     },
   });
+
   const disconnect = trpc.rbac.disconnectPermissionFromRole.useMutation({
-    onMutate: () => {
-      setOptimisticChecked(false);
-      toast.loading("Removing Permission");
-    },
-    onSuccess: () => {
-      toast.success("Permission removed", {
-        description: "Changes may take up to 60 seconds to take effect.",
-        cancel: {
-          label: "Undo",
-          onClick: () => {
-            connect.mutate({ roleId, permissionId });
-          },
-        },
-      });
-    },
-    onError(err) {
-      console.error(err);
-      toast.error(err.message);
-    },
     onSettled: () => {
       router.refresh();
     },
   });
+
+  const handleConnect = async (roleId: string, permissionId: string) => {
+    setOptimisticChecked(true);
+    toast.promise(connect.mutateAsync({ roleId, permissionId }), {
+      loading: "Adding Permission ...",
+      success: () => (
+        <div className="flex items-center gap-2">
+          <CircleCheck className="w-4 h-4 text-gray-300" />
+
+          <div className="max-w-[250px]">
+            <h2 className="font-semibold">Permission added</h2>
+            <p>Changes may take up to 60 seconds to take effect.</p>
+          </div>
+
+          <div>
+            <button
+              onClick={() => disconnect.mutate({ roleId, permissionId })}
+              className="bg-[#2c2c2c] text-white px-[4px] py-[2px] rounded hover:bg-[#3c3c3c] transition-colors"
+            >
+              Undo
+            </button>
+          </div>
+        </div>
+      ),
+      error: (error) => `${error.message || "An error occurred while adding the permission."}`,
+    });
+  };
+
+  const handleDisconnect = async (roleId: string, permissionId: string) => {
+    setOptimisticChecked(false);
+    toast.promise(disconnect.mutateAsync({ roleId, permissionId }), {
+      loading: "Removing Permission ...",
+      success: () => (
+        <div className="flex items-center gap-2">
+          <CircleCheck className="w-4 h-4 text-gray-300" />
+
+          <div className="max-w-[250px]">
+            <h2 className="font-semibold">Permission removed</h2>
+            <p>Changes may take up to 60 seconds to take effect.</p>
+          </div>
+
+          <div>
+            <button
+              onClick={() => connect.mutate({ roleId, permissionId })}
+              className="bg-[#2c2c2c] text-white px-[4px] py-[2px] rounded hover:bg-[#3c3c3c] transition-colors"
+            >
+              Undo
+            </button>
+          </div>
+        </div>
+      ),
+      error: (error) => `${error.message || "An error occurred while removing the permission."}`,
+    });
+  };
+
   if (connect.isLoading || disconnect.isLoading) {
     return <Loader2 className="w-4 h-4 animate-spin" />;
   }
@@ -72,9 +92,9 @@ export const PermissionToggle: React.FC<Props> = ({ roleId, permissionId, checke
       checked={optimisticChecked}
       onClick={() => {
         if (optimisticChecked) {
-          disconnect.mutate({ roleId, permissionId });
+          handleDisconnect(roleId, permissionId);
         } else {
-          connect.mutate({ roleId, permissionId });
+          handleConnect(roleId, permissionId);
         }
       }}
     />

apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx

@@ -54,25 +54,25 @@ export const UpdateRole: React.FC<Props> = ({ trigger, role }) => {
   });
 
   const updateRole = trpc.rbac.updateRole.useMutation({
-    onMutate() {
-      toast.loading("Updating Role");
-    },
     onSuccess() {
-      toast.success("Role updated");
       router.refresh();
       setOpen(false);
     },
-    onError(err) {
-      toast.error(err.message);
-    },
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    updateRole.mutate({
-      id: role.id,
-      name: values.name,
-      description: values.description ?? null,
-    });
+    toast.promise(
+      updateRole.mutateAsync({
+        id: role.id,
+        name: values.name,
+        description: values.description ?? null,
+      }),
+      {
+        loading: "updating Role",
+        success: "Role updated",
+        error: (error) => error.message || `error while updating role ${role.name}`,
+      },
+    );
   }
 
   return (