Janady13/llms-txt-hub / apps/web/components/profile/use-username-validation.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/llms-txt-hub / apps/web/components/profile/use-username-validation.tsx
Date	Not specified in source
Repository	Janady13/llms-txt-hub
Revision	e0f4bf978d4df168369c7601d9c5f5ea89e84377
Branch	main
Path or archive member	apps/web/components/profile/use-username-validation.tsx
Original SHA-256	51f7d5a5e04e1c14d9c72013dfb77bea0f70000730c48750542acb0bce573a3b
Git blob SHA	188f21bbadcf9496de5a25b4d50d582656aecbc6
Reading-copy SHA-256	51f7d5a5e04e1c14d9c72013dfb77bea0f70000730c48750542acb0bce573a3b

Original source ↗

Recovered source transcript

Download complete source text ↓80 lines · 2.0 KB

import { useCallback, useEffect, useState } from 'react'

interface UseUsernameValidationProps {
  username: string
  currentUsername?: string | null
}

/**
 * Custom hook for username availability checking
 * @param props - Hook configuration
 * @returns Username validation state and functions
 */
export function useUsernameValidation({ username, currentUsername }: UseUsernameValidationProps) {
  const [usernameError, setUsernameError] = useState('')
  const [isCheckingUsername, setIsCheckingUsername] = useState(false)

  // Check username availability
  const checkUsernameAvailability = useCallback(
    async (usernameToCheck: string) => {
      if (!usernameToCheck || usernameToCheck.length < 3) {
        setUsernameError('')
        return
      }

      // Don't check if it's the same as current username
      if (usernameToCheck === currentUsername) {
        setUsernameError('')
        return
      }

      setIsCheckingUsername(true)
      setUsernameError('')

      try {
        const response = await fetch('/api/user/check-username', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ username: usernameToCheck })
        })

        const data = await response.json()

        if (!response.ok) {
          setUsernameError(data.error || 'Error checking username')
          return
        }

        if (!data.available) {
          setUsernameError(data.error || 'Username is already taken')
        }
      } catch {
        setUsernameError('Error checking username availability')
      } finally {
        setIsCheckingUsername(false)
      }
    },
    [currentUsername]
  )

  // Debounce username checking
  useEffect(() => {
    if (!username) {
      setUsernameError('')
      return
    }

    const timeoutId = setTimeout(() => {
      checkUsernameAvailability(username)
    }, 500)

    return () => clearTimeout(timeoutId)
  }, [username, checkUsernameAvailability])

  return {
    usernameError,
    isCheckingUsername,
    setUsernameError
  }
}