Correct code for signup page.

[divyanshrai03]

'use client' import { zodResolver } from "@hookform/resolvers/zod" import { FormProvider, useForm } from "react-hook-form" import * as z from "zod" import Link from "next/link" import { useEffect, useState } from "react" import { useDebounceValue, useDebounceCallback } from 'usehooks-ts' import { Toaster } from "@/components/ui/toaster" import { useRouter } from "next/navigation" import { useToast } from "@/components/ui/use-toast" import { signUpSchema } from "@/schemas/signUpSchema" import axios, { AxiosError } from 'axios' import { ApiResponse } from "@/types/ApiResponse" import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Loader2 } from "lucide-react"

const Page = () => { const [username, setUsername] = useState('') const [usernameMessage, setUsernameMessage] = useState('') const [isCheckingUsername, setIsCheckingUsername] = useState(false) const [isSubmitting, setisSubmitting] = useState(false)

const debounced = useDebounceCallback(setUsername, 300) const { toast } = useToast() const router = useRouter();

const formMethods = useForm<z.infer>({ resolver: zodResolver(signUpSchema), defaultValues: { username: '', email: '', password: '' } })

useEffect(() => { const checkUsernameUnique = async () => { if (username) { setIsCheckingUsername(true) setUsernameMessage('') try { const response = await axios.get(/api/check-username-unique?username=${username}) let message = response.data.message setUsernameMessage(message) } catch (error) { const axiosError = error as AxiosError setUsernameMessage( axiosError.response?.data.message ?? "Error checking username" ) } finally { setIsCheckingUsername(false) } } } checkUsernameUnique() }, [username])

const onSubmit = async (data: z.infer) => { setisSubmitting(true) try { const response = await axios.post('/api/sign-up', data) toast({ title: 'Success', description: response.data.message }) router.replace(/verify/${data.username}) setisSubmitting(false) } catch (error) { console.error("Error in signup of user", error) const axiosError = error as AxiosError let errorMessage = axiosError.response?.data.message ?? "Signup failed" toast({ title: "Signup Failed", description: errorMessage, variant: "destructive" }) setisSubmitting(false) } }

return (

Join Mystery Message

Sign up to start your anonymous adventure

( Username { field.onChange(e) debounced(e.target.value) }} /> {isCheckingUsername && }

)} /> ( Email )} /> ( Password )} /> { isSubmitting ? ( <> Please Wait ) : ('Signup') }

Already a member?{' '} Sign in

) }

export default Page