sussessfully changed to tanstack-react-query

client/.env.local

@@ -1,2 +1,2 @@
 NEXT_PUBLIC_ENV=development
-NEXT_PUBLIC_SERVER_URL=http://localhost:8000
+NEXT_PUBLIC_API_URL=http://localhost:8000/api

client/app/(patient)/new-appointment/page.tsx

@@ -1,4 +1,4 @@
-import AppointmentForm from "@/components/forms/AppointmentForm";
+import AppointmentForm from "@/components/common/forms/AppointmentForm";
 import Image from "next/image";
 import { Metadata } from "next";
 

client/app/(patient)/register/page.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import RegistrationForm from "@/components/forms/RegistrationForm";
+import RegistrationForm from "@/components/common/forms/RegistrationForm";
 const Register = () => {
    return (
       <div className="flex h-screen max-h-screen">

client/app/(patient)/signin/otp-verification/page.tsx

@@ -1,17 +1,46 @@
 "use client";
-import OtpVerificationSection from "@/components/forms/OtpForms";
+import OtpVerificationSection from "@/components/common/forms/OtpForms";
 import Image from "next/image";
 import React, { FormEvent, useState } from "react";
+import { useValidateOtpPatient } from "@/lib/hooks/usePatinet";
+import { useToast } from "@/components/ui/use-toast";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
 const OtpVerificationPage = () => {
-   const [otp, setOtp] = useState("");
-   const [isLoading, setLoading] = useState(false);
+   const [otp, setOtp] = useState<string>("");
+   const { mutate: validateOtp, isPending } = useValidateOtpPatient();
+   const { toast } = useToast();
+   const navigate = useRouter();
 
    const handleVerify = async (e: FormEvent) => {
       e.preventDefault();
-      try {
-      } catch (error) {
-         console.log(error);
-      }
+      validateOtp(
+         { email: "[email protected]", otp: parseInt(otp) },
+         {
+            onSuccess: (data) => {
+               toast({
+                  title: "Otp Verification Success ✅",
+                  description: "Authentication Completed!. let's book your first appointment",
+                  variant: "default",
+                  action: (
+                     <Button variant={"outline"}>
+                        <Link href={"/new-appointment"}>Book Now</Link>
+                     </Button>
+                  ),
+               });
+               console.log(data);
+            },
+            onError: (error) => {
+               toast({
+                  title: "Otp Verification Failed ❌",
+                  description: error.response?.data.message,
+                  variant: "destructive",
+               });
+            },
+         }
+      );
    };
 
    const handleResend = async () => {};
@@ -32,7 +61,7 @@ const OtpVerificationPage = () => {
                   otp={otp}
                   setOtp={setOtp}
                   handleVerify={handleVerify}
-                  isLoading={isLoading}
+                  isLoading={isPending}
                   timer={30}
                />
             </div>

client/app/(patient)/signin/page.tsx

@@ -1,4 +1,4 @@
-import SigninForm from "@/components/forms/SigninForm";
+import SigninForm from "@/components/common/forms/SigninForm";
 import Image from "next/image";
 import Link from "next/link";
 import { Metadata } from "next";

client/app/(patient)/signup/page.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import SignupForm from "@/components/forms/SignupForm";
+import SignupForm from "@/components/common/forms/SignupForm";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {

client/app/layout.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "@/components/layout/ThemeProvider";
 import NavBar from "@/components/layout/NavBar";
 import Footer from "@/components/layout/Footer";
 import { Toaster } from "@/components/ui/toaster";
+import QueryProvider from "@/lib/query-provider"
 
 const inter = Plus_Jakarta_Sans({
    subsets: ["latin"],
@@ -30,12 +31,14 @@ export default function RootLayout({
    return (
       <html lang="en" suppressHydrationWarning>
          <body className={cn("min-h-[600px] bg-dark-300 font-sans antialiased", inter.variable)}>
+            <QueryProvider>
                <ThemeProvider attribute="class" defaultTheme="dark">
                   <NavBar />
                   <Toaster />
                   {children}
                   <Footer />
                </ThemeProvider>
+            </QueryProvider>
          </body>
       </html>
    );

client/app/staff/@signin/otp-verification/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import OtpForm from "@/components/forms/OtpForms";
+import OtpForm from "@/components/common/forms/OtpForms";
 import Image from "next/image";
 import Link from "next/link";
 import { FormEvent, useState } from "react";

client/app/staff/@signin/page.tsx

@@ -1,4 +1,4 @@
-import SigninForm from "@/components/forms/admin/SigninForm";
+import SigninForm from "@/components/common/forms/admin/SigninForm";
 import Image from "next/image";
 import Link from "next/link";
 const SignIn = () => {

client/components/forms/AppointmentForm.tsx → client/components/common/forms/AppointmentForm.tsx

@@ -8,7 +8,7 @@ import { Form } from "@/components/ui/form";
 import CustomFormField from "@/components/common/CustomFormField";
 import SubmitButton from "@/components/common/SubmitButton";
 import { appointmentFormValidation } from "@/lib/validators/userValidation";
-import { SelectItem } from "../ui/select";
+import { SelectItem } from "../../ui/select";
 import Image from "next/image";
 import { AppointmentTypes, DoctorList, PaymentOptions } from "@/constants";
 import { FormFieldType } from "@/types/fromTypes";
@@ -27,39 +27,28 @@ const AppointmentForm = () => {
       },
    });
 
-   const onSubmit = async (
-      values: z.infer<typeof appointmentFormValidation>,
-   ) => {
+   const onSubmit = async (values: z.infer<typeof appointmentFormValidation>) => {
       setIsLoading(true);
       console.log("clicked", values);
       setIsLoading(false);
    };
 
    return (
       <Form {...form}>
-         <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-6 flex-1"
-         >
+         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 flex-1">
             <section className="mb-12 space-y-4">
                <h1 className="header">New Appointment</h1>
-               <p className="text-dark-700">
-                  Request New Appointment in 10 seconds
-               </p>
+               <p className="text-dark-700">Request New Appointment in 10 seconds</p>
             </section>
 
             <CustomFormField
                fieldType={FormFieldType.SELECT}
                control={form.control}
                name="appointmentType"
                label="Appointment Type"
-               placeholder="Select an Appointment"
-            >
+               placeholder="Select an Appointment">
                {AppointmentTypes.map((appointment, i) => (
-                  <SelectItem
-                     key={appointment.type + i}
-                     value={appointment.type}
-                  >
+                  <SelectItem key={appointment.type + i} value={appointment.type}>
                      <div className="flex cursor-pointer items-center gap-2">
                         <Image
                            src={appointment.image}
@@ -74,13 +63,8 @@ const AppointmentForm = () => {
                ))}
             </CustomFormField>
 
-            <CustomFormField
-               fieldType={FormFieldType.SELECT}
-               control={form.control}
-               name="doctor"
-               label="Doctor"
-            >
-               {DoctorList.map(doctor => (
+            <CustomFormField fieldType={FormFieldType.SELECT} control={form.control} name="doctor" label="Doctor">
+               {DoctorList.map((doctor) => (
                   <SelectItem key={doctor._id} value={doctor.name}>
                      <div className="flex cursor-pointer items-center gap-2">
                         <Image
@@ -127,8 +111,7 @@ const AppointmentForm = () => {
                control={form.control}
                name="payment"
                label="Payment Options"
-               placeholder="Available Options"
-            >
+               placeholder="Available Options">
                {PaymentOptions.map((appointment, i) => (
                   <SelectItem key={appointment + i} value={appointment}>
                      <div className="flex cursor-pointer items-center gap-2">

client/components/forms/OtpForms.tsx → client/components/common/forms/OtpForms.tsx

@@ -4,7 +4,7 @@ import { FormEvent } from "react";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
 import { Otptimer } from "otp-timer-ts";
 import { OtpFromProps } from "@/types/fromTypes";
-import SubmitButton from "../common/SubmitButton";
+import SubmitButton from "../SubmitButton";
 
 export default function OtpVerificationSection({
    handleVerify,

client/components/forms/RegistrationForm.tsx → client/components/common/forms/RegistrationForm.tsx

@@ -12,7 +12,7 @@ import { registerFormValidation } from "@/lib/validators/userValidation";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@radix-ui/react-label";
 import { BloodTypes, DiseaseOptions, GenderOptions } from "@/constants";
-import { SelectItem } from "../ui/select";
+import { SelectItem } from "../../ui/select";
 
 const RegistrationForm = () => {
    const [isLoading, setIsLoading] = useState<boolean>(false);

client/components/forms/SigninForm.tsx → client/components/common/forms/SigninForm.tsx

@@ -10,14 +10,15 @@ import SubmitButton from "@/components/common/SubmitButton";
 import { signinFormValidation } from "@/lib/validators/userValidation";
 import Link from "next/link";
 import { FormFieldType } from "@/types/fromTypes";
-import { useToast } from "../ui/use-toast";
+import { useToast } from "../../ui/use-toast";
 import { useRouter } from "next/navigation";
+import { useSignInPatient } from "@/lib/hooks/usePatinet";
 
 const LoginForm = () => {
    const [error, setError] = useState("");
    const { toast } = useToast();
    const router = useRouter();
-   const [isLoading,setLoading] = useState(false);
+   const { mutate: signIn, isPending } = useSignInPatient();
 
    const form = useForm<z.infer<typeof signinFormValidation>>({
       resolver: zodResolver(signinFormValidation),
@@ -27,22 +28,28 @@ const LoginForm = () => {
       },
    });
 
-   const onSubmit = async (values: z.infer<typeof signinFormValidation>) => {
-      try {
-         toast({
-            title: "OTP Verification",
-            description: "Please check your email for the OTP.",
-            variant: "default",
-         });
-         router.push('/signin/otp-verification')
-      } catch (error: any) {
-         setError(error.data?.message || "An error occurred during sign-in.");
-         toast({
-            title: "Sign-In Failed",
-            description: error.data?.message || "Please try again.",
-            variant: "destructive",
-         });
-      }
+   const onSubmit = async ({ email, password }: z.infer<typeof signinFormValidation>) => {
+      signIn(
+         { email, password },
+         {
+            onSuccess() {
+               toast({
+                  title: "OTP Verification ✅",
+                  description: "Please check your email for the OTP.",
+                  variant: "default",
+               });
+               router.push("/signin/otp-verification");
+            },
+            onError(error) {
+               setError(error.response?.data.message || "An error occurred during sign-in.");
+               toast({
+                  title: "Sign-In Failed ❌",
+                  description: error.response?.data.message || "Please try again.",
+                  variant: "destructive",
+               });
+            },
+         }
+      );
    };
 
    return (
@@ -77,7 +84,7 @@ const LoginForm = () => {
 
             {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
 
-            <SubmitButton isLoading={isLoading}>Sign In</SubmitButton>
+            <SubmitButton isLoading={isPending}>Sign In</SubmitButton>
          </form>
       </Form>
    );