Sign Up Completed

sinanptm · Aug 27, 2024 · 3d440b4 · 3d440b4 · vercel · Aug 27, 2024
1 parent 563536c
commit 3d440b4
Show file tree

Hide file tree

Showing 30 changed files with 600 additions and 114 deletions.
diff --git a/client/.env.local b/client/.env.local
@@ -1,2 +1,2 @@
 NEXT_PUBLIC_ENV=development
-NEXT_NODE_SERVER_URL=http://localhost:3000
+NEXT_PUBLIC_SERVER_URL=http://localhost:8000
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
@@ -6,44 +6,40 @@ import { ThemeProvider } from "@/components/ThemeProvider";
 import { StoreProvider } from "./StoreProvider";
 import NavBar from "@/components/NavBar";
 import Footer from "@/components/Footer";
+import { Toaster } from "@/components/ui/toaster";
 
 const inter = Plus_Jakarta_Sans({
-  subsets: ["latin"],
-  weight: ["300", "400", "700", "700"],
-  variable: "--font-sans",
+   subsets: ["latin"],
+   weight: ["300", "400", "700", "700"],
+   variable: "--font-sans",
 });
 
 export const metadata: Metadata = {
-  title: {
-    absolute: "",
-    template: "AVM | %s",
-    default: "AVM Ayurveda's",
-  },
-  description:
-    "Appointment booking and video call consultation, an ayurveda hospital",
+   title: {
+      absolute: "",
+      template: "AVM | %s",
+      default: "AVM Ayurveda's",
+   },
+   description: "Appointment booking and video call consultation, an ayurveda hospital",
 };
 
 export default function RootLayout({
-  children,
+   children,
 }: Readonly<{
-  children: React.ReactNode;
+   children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={cn(
-          "min-h-[600px] bg-dark-300 font-sans antialiased",
-          inter.variable
-        )}
-      >
-        <StoreProvider>
-          <ThemeProvider attribute="class" defaultTheme="dark">
-            <NavBar />
-            {children}
-            <Footer />
-          </ThemeProvider>
-        </StoreProvider>
-      </body>
-    </html>
-  );
-}
+   return (
+      <html lang="en" suppressHydrationWarning>
+         <body className={cn("min-h-[600px] bg-dark-300 font-sans antialiased", inter.variable)}>
+            <StoreProvider>
+               <ThemeProvider attribute="class" defaultTheme="dark">
+                  <NavBar />
+                  <Toaster />
+                  {children}
+                  <Footer />
+               </ThemeProvider>
+            </StoreProvider>
+         </body>
+      </html>
+   );
+}
diff --git a/client/app/page.tsx b/client/app/page.tsx
@@ -1,7 +1,13 @@
 import AboutAyurveda from "@/components/home/AboutAyurveda";
 import ImageSlider from "@/components/home/ImageSlider";
-import FeaturesList from "@/components/home/FeatureList";
 import WhyUs from "@/components/utils/WhyUs";
+import dynamic from "next/dynamic";
+import Loader  from "@/components/Loader";
+
+const  FeaturesList = dynamic(()=>import("@/components/home/FeatureList"),{
+   loading:()=><Loader />,
+})
+
 
 const Page = () => {
    return (

diff --git a/client/components/Loader.tsx b/client/components/Loader.tsx
@@ -0,0 +1,5 @@
+import Image from 'next/image'
+
+const LoadingBall = () => <Image src={'/assets/icons/loader.svg'} alt='loading....' width={30} height={30} className='h-5 w-5' />
+
+export default LoadingBall
diff --git a/client/components/forms/AppointmentForm.tsx b/client/components/forms/AppointmentForm.tsx
@@ -7,7 +7,7 @@ import { z } from "zod";
 import { Form } from "@/components/ui/form";
 import CustomFormField from "@/components/utils/CustomFormField";
 import SubmitButton from "@/components/utils/SubmitButton";
-import { appointmentFormValidation } from "@/lib/userValidation";
+import { appointmentFormValidation } from "@/lib/validators/userValidation";
 import { SelectItem } from "../ui/select";
 import Image from "next/image";
 import { AppointmentTypes, DoctorList, PaymentOptions } from "@/constants";

diff --git a/client/components/forms/RegistrationForm.tsx b/client/components/forms/RegistrationForm.tsx
@@ -8,7 +8,7 @@ import { z } from "zod";
 import { Form, FormControl } from "@/components/ui/form";
 import CustomFormField from "@/components/utils/CustomFormField";
 import SubmitButton from "@/components/utils/SubmitButton";
-import { registerFormValidation } from "@/lib/userValidation";
+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";

diff --git a/client/components/forms/SigninForm.tsx b/client/components/forms/SigninForm.tsx
@@ -7,7 +7,7 @@ import { z } from "zod";
 import { Form } from "@/components/ui/form";
 import CustomFormField from "@/components/utils/CustomFormField";
 import SubmitButton from "@/components/utils/SubmitButton";
-import { signinFormValidation } from "@/lib/userValidation";
+import { signinFormValidation } from "@/lib/validators/userValidation";
 import Link from "next/link";
 import { FormFieldType } from "@/types/fromTypes";
 
@@ -37,7 +37,7 @@ const LoginForm = () => {
                <h1 className="header">Welcome Back 👋</h1>
                <p className="text-dark-700">
                   Schedule your first appointment{" "}
-                  <Link href={"/patient/signup"} className="text-blue-400">
+                  <Link href={"/signup"} className="text-blue-400">
                      Sign Up
                   </Link>
                </p>

diff --git a/client/components/forms/SignupForm.tsx b/client/components/forms/SignupForm.tsx
@@ -7,12 +7,19 @@ import { z } from "zod";
 import { Form } from "@/components/ui/form";
 import CustomFormField from "@/components/utils/CustomFormField";
 import SubmitButton from "@/components/utils/SubmitButton";
-import { signupFormValidation } from "@/lib/userValidation";
+import { signupFormValidation } from "@/lib/validators/userValidation";
+import { useSignUpMutation } from "@/lib/features/api/authApi";
 import { FormFieldType } from "@/types/fromTypes";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useToast } from "../ui/use-toast";
+import { Button } from "../ui/button";
 
 const RegistrationForm = () => {
-   const [isLoading, setIsLoading] = useState<boolean>(false);
+   const [error, setError] = useState<string>("");
+   const router = useRouter();
+   const { toast } = useToast();
+
    const form = useForm<z.infer<typeof signupFormValidation>>({
       resolver: zodResolver(signupFormValidation),
       defaultValues: {
@@ -24,12 +31,30 @@ const RegistrationForm = () => {
       },
    });
 
-   const onSubmit = async (values: z.infer<typeof signupFormValidation>) => {
-      setIsLoading(true);
-      setTimeout(() => {
-         console.log("done");
-      }, 2000);
-      setIsLoading(false);
+   const [signUp, { isLoading: isPosting, data: response, error: signUpError }] = useSignUpMutation();
+
+   const onSubmit = async (formData: z.infer<typeof signupFormValidation>) => {
+      try {
+         await signUp(formData).unwrap();
+         toast({
+            title: "Registration Successful",
+            description: "You have successfully registered. Please sign in.",
+            variant: "default",
+         });
+         router.push("/signin");
+      } catch (error: any) {
+         setError(error?.data?.message || "An error occurred during registration");
+         toast({
+            title: "Registration Failed",
+            description: error?.data?.message || "Please try again later.",
+            variant: "destructive",
+            action: (
+               <Button variant={"link"}>
+                  <Link href="/signin">Sign In</Link>
+               </Button>
+            ),
+         });
+      }
    };
 
    return (
@@ -38,15 +63,15 @@ const RegistrationForm = () => {
             <section className="mb-12 space-y-4">
                <h1 className="header">Hi There👋</h1>
                <p className="text-dark-700">
-                  Already have an account{" "}
-                  <Link href={"/patient/signin"} className="text-blue-400">
+                  Already have an account?{" "}
+                  <Link href="/patient/signin" className="text-blue-400">
                      Sign In
                   </Link>
                </p>
             </section>
             <section className="mb-12 space-y-4">
                <div className="mb-9 space-y-1">
-                  <h2 className="sub-header">Personal information </h2>
+                  <h2 className="sub-header">Personal Information</h2>
                </div>
             </section>
 
@@ -59,22 +84,21 @@ const RegistrationForm = () => {
                iconSrc="/assets/icons/user.svg"
             />
 
-            {/* EMAIL & PHONE */}
             <div className="flex flex-col gap-6 xl:flex-row">
                <CustomFormField
                   fieldType={FormFieldType.INPUT}
                   control={form.control}
                   name="email"
-                  label="Email address  *"
+                  label="Email Address *"
                   placeholder="[email protected]"
-                  iconSrc={"/assets/icons/email.svg"}
+                  iconSrc="/assets/icons/email.svg"
                />
 
                <CustomFormField
                   fieldType={FormFieldType.PHONE_INPUT}
                   control={form.control}
                   name="phone"
-                  label="Phone Number  *"
+                  label="Phone Number *"
                   placeholder="(555) 123-4567"
                />
             </div>
@@ -83,7 +107,7 @@ const RegistrationForm = () => {
                control={form.control}
                fieldType={FormFieldType.PASSWORD}
                name="password"
-               label="Password  *"
+               label="Password *"
                placeholder="Enter your password"
             />
             <CustomFormField
@@ -93,7 +117,10 @@ const RegistrationForm = () => {
                label="Confirm Password"
                placeholder="Re-enter your password"
             />
-            <SubmitButton isLoading={isLoading}>Sign In</SubmitButton>
+
+            {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
+
+            <SubmitButton isLoading={isPosting}>Sign Up</SubmitButton>
          </form>
       </Form>
    );

diff --git a/client/components/forms/admin/SigninForm.tsx b/client/components/forms/admin/SigninForm.tsx
@@ -7,7 +7,7 @@ import { z } from "zod";
 import { Form } from "@/components/ui/form";
 import CustomFormField from "@/components/utils/CustomFormField";
 import SubmitButton from "@/components/utils/SubmitButton";
-import { signinFormValidation } from "@/lib/adminValidation";
+import { signinFormValidation } from "@/lib/validators/adminValidation";
 import { FormFieldType } from "@/types/fromTypes";
 
 const SigninForm = () => {