axios indreceptor added

client/app/(patient)/profile/layout.tsx

@@ -1,6 +1,10 @@
 'use client';
 import NavSection from "@/components/(patient)/profile/NavSection";
 import { memo, ReactNode, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getUserProfile } from "@/services/api/patient";
+import { ErrorResponse, IPatient } from "@/types";
+import { AxiosError } from "axios";
 
 interface Props {
    children: ReactNode;
@@ -9,15 +13,29 @@ interface Props {
 }
 
 const ProfilePageLayout = ({ children, appointments, records }: Props) => {
-   const [section,setSection] = useState<"profile"|"appointments"|"records">('profile')
+   const [section, setSection] = useState<"profile" | "appointments" | "records">('profile');
+
+   const { data , isLoading, isError } = useQuery<IPatient, AxiosError<ErrorResponse>>({
+      queryKey:['patientProfile'],
+      queryFn:getUserProfile
+   });
+
+   if (isLoading) {
+      return <div>Loading...</div>;
+   }
+
+   if (isError) {
+      return <div>Error loading profile data</div>;
+   }
+
 
    return (
       <div className="min-h-screen p-4 sm:p-6 md:p-8">
          <div className="max-w-4xl mx-auto space-y-4 sm:space-y-6">
-            <NavSection  setSection={setSection} />
-            {section==='profile'&&children}
-            {section==='appointments'&&appointments}
-            {section==='records'&&records}
+            <NavSection setSection={setSection} />
+            {section === 'profile' && children}
+            {section === 'appointments' && appointments}
+            {section === 'records' && records}
          </div>
       </div>
    );

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

@@ -1,4 +1,3 @@
-
 import PersonalInformation from "@/components/(patient)/profile/PersonalInformation";
 import UpcomingAppointment from "@/components/(patient)/profile/UpcomingAppointment";
 import AllergiesAndConditions from "@/components/(patient)/profile/AllergiesAndConditions";

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

@@ -1,15 +1,21 @@
-'use client'
+"use client";
 import { FormEvent } from "react";
 import OtpVerificationModel from "@/components/models/OtpVerificationModel";
 
-const OptInterceptor = () =>{
-  const handleVerify = (e:FormEvent)=>{
-    e.preventDefault();
-  };
-  const handleResend = ()=>{}
-  return  (
-    <OtpVerificationModel returnRoute="/signin" key={12} timer={30} handleResend={handleResend} handleVerify={handleVerify} />
-  );
-}
+const OptInterceptor = () => {
+   const handleVerify = (e: FormEvent) => {
+      e.preventDefault();
+   };
+   const handleResend = () => {};
+   return (
+         <OtpVerificationModel
+            returnRoute="/signin"
+            key={12}
+            timer={30}
+            handleResend={handleResend}
+            handleVerify={handleVerify}
+         />
+   );
+};
 
 export default OptInterceptor;

client/app/(patient)/signin/components/FormSection.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import SigninForm from "../../../../components/common/forms/SigninForm";
+import Image from "next/image";
+import Link from "next/link";
+import { Banners } from "../../../../constants";
+
+const FromSection = () => {
+
+   return (
+      <div className="flex h-screen max-h-screen">
+         <section className="remove-scrollbar container my-auto">
+            <div className="sub-container max-[496px]">
+               <Image
+                  src={"/assets/icons/logo-full.svg"}
+                  width={1000}
+                  height={1000}
+                  alt="patient"
+                  className="mb-12 h-10 w-fit"
+               />
+               <SigninForm />
+               <div className="text-14-regular py-12 flex justify-between">
+                  <p className="justify-items-end text-dark-600 xl:text-left">© 2024 AVM Ayurveda&apos;s</p>
+                  <Link href={"/signup"} className="text-green-500 text-xs">
+                     Staff-Login
+                  </Link>
+               </div>
+            </div>
+         </section>
+         <Image src={Banners.signin} height={1000} width={1000} alt="patient" className="side-img max-w-[50%]" />
+      </div>
+   );
+};
+
+export default FromSection;

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

@@ -1,26 +1,28 @@
 "use client";
 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 { FormEvent, useState } from "react";
+import { useValidateOtpPatient } from "@/lib/hooks/usePatientAuth";
 import { useToast } from "@/components/ui/use-toast";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { Banners } from "@/constants";
+import { useDispatch } from "react-redux";
 
 const OtpVerificationPage = () => {
    const [otp, setOtp] = useState<string>("");
    const { mutate: validateOtp, isPending } = useValidateOtpPatient();
    const { toast } = useToast();
    const navigate = useRouter();
-
+   const dispatch = useDispatch();
+
    const handleVerify = async (e: FormEvent) => {
       e.preventDefault();
       validateOtp(
          { email: "[email protected]", otp: parseInt(otp) },
          {
-            onSuccess: (data) => {
+            onSuccess: () => {
                toast({
                   title: "Otp Verification Success ✅",
                   description: "Authentication Completed!. let's book your first appointment",
@@ -31,7 +33,7 @@ const OtpVerificationPage = () => {
                      </Button>
                   ),
                });
-               console.log(data);
+               navigate.push("/");
             },
             onError: (error) => {
                toast({

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

@@ -1,44 +1,12 @@
-import SigninForm from "@/components/common/forms/SigninForm";
-import Image from "next/image";
-import Link from "next/link";
 import { Metadata } from "next";
-import { Banners } from "@/constants";
+import FormSection from './components/FormSection'
 
 export const metadata: Metadata = {
    title: "SignIn",
 };
 const SignIn = () => {
    return (
-      <div className="flex h-screen max-h-screen">
-         <section className="remove-scrollbar container my-auto">
-            <div className="sub-container max-[496px]">
-               <Image
-                  src={"/assets/icons/logo-full.svg"}
-                  width={1000}
-                  height={1000}
-                  alt="patient"
-                  className="mb-12 h-10 w-fit"
-               />
-               <SigninForm />
-               <div className="text-14-regular py-12 flex justify-between">
-                  <p className="justify-items-end text-dark-600 xl:text-left">
-                     © 2024 AVM Ayurveda&apos;s
-                  </p>
-                  <Link href={"/signup"} className="text-green-500 text-xs">
-                     Staff-Login
-                  </Link>
-               </div>
-            </div>
-         </section>
-
-         <Image
-            src={Banners.signin}
-            height={1000}
-            width={1000}
-            alt="patient"
-            className="side-img max-w-[50%]"
-         />
-      </div>
+      <FormSection />
    );
 };
 

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

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

client/components/common/forms/SigninForm.tsx

@@ -12,7 +12,7 @@ import Link from "next/link";
 import { FormFieldType } from "@/types/fromTypes";
 import { useToast } from "../../ui/use-toast";
 import { useRouter } from "next/navigation";
-import { useSignInPatient } from "@/lib/hooks/usePatinet";
+import { useSignInPatient } from "@/lib/hooks/usePatientAuth";
 
 const LoginForm = () => {
    const [error, setError] = useState("");

client/components/common/forms/SignupForm.tsx

@@ -13,7 +13,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useToast } from "../../ui/use-toast";
 import { Button } from "../../ui/button";
-import { useSignUpPatient } from "@/lib/hooks/usePatinet";
+import { useSignUpPatient } from "@/lib/hooks/usePatientAuth";
 
 const RegistrationForm = () => {
     const [error, setError] = useState<string>("");

client/components/layout/NavBar.tsx

@@ -20,11 +20,11 @@ import { useSelector } from "react-redux";
 
 export const NavBar = () => {
    const path = usePathname();
-   const patientToken = useSelector(selectPatientToken);
+   const patientToken = useSelector(selectPatientToken);   
 
    if (path.includes("signup") || path.includes("staff") || path.includes("signin")) {
       return null;
-   }
+   };
 
    return (
       <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-dark-300 bg-opacity-55 px-4 md:px-6 z-50">

client/lib/features/authSlice.ts

@@ -29,19 +29,6 @@ const authSlice = createSlice({
    name: "auth",
    initialState,
    reducers: {
-      setCredentials: (state, action: PayloadAction<SetCredentialsPayload>) => {
-         const { accessToken, type } = action.payload;
-         if (type === "patient") {
-            state.patientToken = accessToken;
-         } else if (type === "doctor") {
-            state.doctorToken = accessToken;
-         } else if (type === "admin") {
-            state.adminToken = accessToken;
-         }
-         if (typeof window !== "undefined") {
-            localStorage.setItem("auth", JSON.stringify(state));
-         }
-      },
       logOut: (state, action: PayloadAction<LogOutPayload>) => {
          const { type } = action.payload;
          if (type === "patient") {
@@ -58,7 +45,7 @@ const authSlice = createSlice({
    },
 });
 
-export const { setCredentials, logOut } = authSlice.actions;
+export const { logOut } = authSlice.actions;
 
 export const selectPatientToken = (state: RootState) => state.auth.patientToken;
 export const selectAdminToken = (state: RootState) => state.auth.adminToken;

client/lib/hooks/usePatientAuth.ts

@@ -0,0 +1,35 @@
+import { ErrorResponse, IPatient } from "@/types";
+import { useMutation } from "@tanstack/react-query";
+import { signInPatient, signUpPatient, validateOtpPatient } from "@/services/api/auth/patientAuth";
+import { AxiosError } from "axios";
+
+export const useSignUpPatient = () => {
+   return useMutation<{ message: string }, AxiosError<ErrorResponse>, IPatient>({
+      mutationFn: (patient) => signUpPatient(patient),
+      onError: (error: AxiosError) => {
+         console.log("Error in creating patient:", error);
+      },
+   });
+};
+
+export const useSignInPatient = () => {
+   return useMutation<
+      { message: string; email: string },
+      AxiosError<ErrorResponse>,
+      { email: string; password: string }
+   >({
+      mutationFn: ({ email, password }) => signInPatient(email, password),
+      onError: (error) => {
+         console.log("Error in signing in:", error);
+      },
+   });
+};
+
+export const useValidateOtpPatient = () => {
+   return useMutation<{ accessToken: string }, AxiosError<ErrorResponse>, { email: string; otp: number }>({
+      mutationFn: ({ email, otp }) => validateOtpPatient(email, otp),
+      onError: (error) => {
+         console.log("Error in OTP validation:", error);
+      },
+   });
+};