fix: toasts-not-dismissings

unkeyed · Oct 10, 2024 · 646f6f9 · 646f6f9
1 parent c948512
commit 646f6f9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/role-toggle.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/role-toggle.tsx
@@ -5,7 +5,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useRef, useState } from "react";
 type Props = {
   keyId: string;
   roleId: string;
@@ -14,12 +14,15 @@ type Props = {
 
 export const RoleToggle: React.FC<Props> = ({ roleId, keyId, checked }) => {
   const router = useRouter();
+  const loadingToastId = useRef<string | number | null>(null);
 
   const [optimisticChecked, setOptimisticChecked] = useState(checked);
   const connect = trpc.rbac.connectRoleToKey.useMutation({
     onMutate: () => {
       setOptimisticChecked(true);
-      toast.loading("Adding Role");
+
+      const id = toast.loading("Adding Role");
+      loadingToastId.current = id;
     },
     onSuccess: () => {
       toast.success("Role added", {
@@ -31,10 +34,14 @@ export const RoleToggle: React.FC<Props> = ({ roleId, keyId, checked }) => {
           },
         },
       });
+      toast.dismiss(loadingToastId.current!);
+      loadingToastId.current = null
     },
     onError(err) {
       console.error(err);
       toast.error(err.message);
+      toast.dismiss(loadingToastId.current!);
+      loadingToastId.current = null
     },
     onSettled: () => {
       router.refresh();
@@ -43,7 +50,8 @@ export const RoleToggle: React.FC<Props> = ({ roleId, keyId, checked }) => {
   const disconnect = trpc.rbac.disconnectRoleFromKey.useMutation({
     onMutate: () => {
       setOptimisticChecked(false);
-      toast.loading("Removing role");
+      const id = toast.loading("Removing role");
+      loadingToastId.current = id
     },
     onSuccess: () => {
       toast.success("Role removed", {
@@ -55,10 +63,14 @@ export const RoleToggle: React.FC<Props> = ({ roleId, keyId, checked }) => {
           },
         },
       });
+      toast.dismiss(loadingToastId.current!);
+      loadingToastId.current = null
     },
     onError(err) {
       console.error(err);
       toast.error(err.message);
+      toast.dismiss(loadingToastId.current!);
+      loadingToastId.current = null
     },
     onSettled: () => {
       router.refresh();

diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
@@ -25,7 +25,7 @@ import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState,useRef } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -39,6 +39,7 @@ type Props = {
 
 export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
   const router = useRouter();
+  const loadingToastId = useRef<string | number | null>(null)
 
   const [open, setOpen] = useState(false);
 
@@ -54,14 +55,19 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
 
   const deleteRole = trpc.rbac.deleteRole.useMutation({
     onMutate() {
-      toast.loading("Deleting Role");
+      const id = toast.loading("Deleting Role");
+      loadingToastId.current = id
     },
     onSuccess() {
       toast.success("Role deleted successfully");
+      toast.dismiss(loadingToastId.current!);
+      loadingToastId.current = null
       router.push("/authorization/roles");
     },
     onError(err) {
       toast.error(err.message);
+      toast.dismiss(loadingToastId.current!);
+      loadingToastId.current = null
     },
   });
 

diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx
@@ -27,7 +27,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import type { Role } from "@unkey/db";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState,useRef } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -44,6 +44,7 @@ const formSchema = z.object({
 export const UpdateRole: React.FC<Props> = ({ trigger, role }) => {
   const [open, setOpen] = useState(false);
   const router = useRouter();
+  const loadingToastId = useRef<string | number | null>(null)
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -55,15 +56,20 @@ export const UpdateRole: React.FC<Props> = ({ trigger, role }) => {
 
   const updateRole = trpc.rbac.updateRole.useMutation({
     onMutate() {
-      toast.loading("Updating Role");
+     const id = toast.loading("Updating Role");
+     loadingToastId.current = id
     },
     onSuccess() {
       toast.success("Role updated");
+      toast.dismiss(loadingToastId.current!);
+      loadingToastId.current = null
       router.refresh();
       setOpen(false);
     },
     onError(err) {
       toast.error(err.message);
+      toast.dismiss(loadingToastId.current!);
+      loadingToastId.current = null
     },
   });