refactor: migrate trpc to the new react query integration mode (#2438)

* refactor: migrate trpc to the new react query integration mode

* more fixes

* more migrations

* upgrade trpc client

1 files changed, 24 insertions, 17 deletions

diff --git a/apps/web/components/settings/ChangePassword.tsx b/apps/web/components/settings/ChangePassword.tsx
index 1da92267..ae764dd3 100644
--- a/apps/web/components/settings/ChangePassword.tsx
+++ b/apps/web/components/settings/ChangePassword.tsx
@@ -14,8 +14,9 @@ import {
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/sonner";
 import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
 import { Eye, EyeOff, Lock } from "lucide-react";
 import { useForm } from "react-hook-form";
 
@@ -25,6 +26,7 @@ import { Button } from "../ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
 
 export function ChangePassword() {
+  const api = useTRPC();
   const { t } = useTranslation();
   const [showCurrentPassword, setShowCurrentPassword] = useState(false);
   const [showNewPassword, setShowNewPassword] = useState(false);
@@ -38,22 +40,27 @@ export function ChangePassword() {
     },
   });
 
-  const mutator = api.users.changePassword.useMutation({
-    onSuccess: () => {
-      toast({ description: "Password changed successfully" });
-      form.reset();
-    },
-    onError: (e) => {
-      if (e.data?.code == "UNAUTHORIZED") {
-        toast({
-          description: "Your current password is incorrect",
-          variant: "destructive",
-        });
-      } else {
-        toast({ description: "Something went wrong", variant: "destructive" });
-      }
-    },
-  });
+  const mutator = useMutation(
+    api.users.changePassword.mutationOptions({
+      onSuccess: () => {
+        toast({ description: "Password changed successfully" });
+        form.reset();
+      },
+      onError: (e) => {
+        if (e.data?.code == "UNAUTHORIZED") {
+          toast({
+            description: "Your current password is incorrect",
+            variant: "destructive",
+          });
+        } else {
+          toast({
+            description: "Something went wrong",
+            variant: "destructive",
+          });
+        }
+      },
+    }),
+  );
 
   async function onSubmit(value: z.infer<typeof zChangePasswordSchema>) {
     mutator.mutate({