Migrating to react query for client side queries

2 files changed, 25 insertions, 17 deletions

diff --git a/packages/web/app/dashboard/settings/components/AddApiKey.tsx b/packages/web/app/dashboard/settings/components/AddApiKey.tsx
index f4f2894c..c438f4b1 100644
--- a/packages/web/app/dashboard/settings/components/AddApiKey.tsx
+++ b/packages/web/app/dashboard/settings/components/AddApiKey.tsx
@@ -53,20 +53,22 @@ function AddApiKeyForm({ onSuccess }: { onSuccess: (key: string) => void }) {
     name: z.string(),
   });
   const router = useRouter();
+  const mutator = api.apiKeys.create.useMutation({
+    onSuccess: (resp) => {
+      onSuccess(resp.key);
+      router.refresh();
+    },
+    onError: () => {
+      toast({ description: "Something went wrong", variant: "destructive" });
+    },
+  });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
 
   async function onSubmit(value: z.infer<typeof formSchema>) {
-    try {
-      const resp = await api.apiKeys.create.mutate({ name: value.name });
-      onSuccess(resp.key);
-    } catch (e) {
-      toast({ description: "Something went wrong", variant: "destructive" });
-      return;
-    }
-    router.refresh();
+    mutator.mutate({ name: value.name });
   }
 
   const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
diff --git a/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx b/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx
index 715b7a2c..bc3e3c92 100644
--- a/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx
+++ b/packages/web/app/dashboard/settings/components/DeleteApiKey.tsx
@@ -13,9 +13,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { api } from "@/lib/trpc";
 import { useRouter } from "next/navigation";
 import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
 
 export default function DeleteApiKey({
   name,
@@ -25,13 +25,15 @@ export default function DeleteApiKey({
   id: string;
 }) {
   const router = useRouter();
-  const deleteKey = async () => {
-    await api.apiKeys.revoke.mutate({ id });
-    toast({
-      description: "Key was successfully deleted",
-    });
-    router.refresh();
-  };
+  const mutator = api.apiKeys.revoke.useMutation({
+    onSuccess: () => {
+      toast({
+        description: "Key was successfully deleted",
+      });
+      router.refresh();
+    },
+  });
+
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -54,7 +56,11 @@ export default function DeleteApiKey({
             </Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button type="button" variant="destructive" onClick={deleteKey}>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => mutator.mutate({ id })}
+            >
               Delete
             </Button>
           </DialogClose>