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

    <FormProvider {...formMethods}>
      <form onSubmit={formMethods.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          name="username"
          control={formMethods.control}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="username" {...field}
                  onChange={(e) => {
                    field.onChange(e)
                    debounced(e.target.value)
                  }}
                />
              </FormControl>
              {isCheckingUsername && <Loader2 
              className="animate-spin" />}
              <p className={`text-sm ${usernameMessage === "Username is unique" 
                ? 'text-green-500 ' : 'text-red-500 '
              }`}>

              </p>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          name="email"
          control={formMethods.control}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="email" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          name="password"
          control={formMethods.control}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Password</FormLabel>
              <FormControl>
                <Input type="password" placeholder="password" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit" disabled={isSubmitting}>
          {
            isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Please Wait
              </>
            ) : ('Signup')
          }
        </Button>
      </form>
    </FormProvider>
    <div className="text-center mt-4">
      <p>
        Already a member?{' '}
        <Link href="/sign-in" className="text-blue-600 hover:text-blue-800">
          Sign in
        </Link>
      </p>
    </div>
  </div>
</div>

)
}

export default Page