goobs-frontend 0.7.66 → 0.7.67

package/src/components/StyledComponent/hooks/useInputHelperFooter.tsx

@@ -1,14 +1,15 @@
 'use client'
 
-import { useCallback, useMemo, useEffect } from 'react'
+import { useCallback, useMemo } from 'react'
 import { debounce } from 'lodash'
 import { session } from 'goobs-cache'
+import { ClientLogger } from 'goobs-testing'
 
 const isValidEmailFormat = (email: string): boolean => {
-  console.log('Validating email format:', email)
+  ClientLogger.debug('Validating email format:', { email })
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
   const isValid = emailRegex.test(email)
-  console.log('Email format is valid:', isValid)
+  ClientLogger.debug('Email format is valid:', { isValid })
   return isValid
 }
 
@@ -21,14 +22,18 @@ export interface HelperFooterMessage {
   hasInput?: boolean
 }
 
-export const useInputHelperFooter = () => {
-  console.log('useInputHelperFooter hook called')
+export const useInputHelperFooter = (
+  helperFooterAtom: ReturnType<
+    typeof session.atom<Record<string, HelperFooterMessage>>
+  >
+) => {
+  ClientLogger.debug('useInputHelperFooter hook called')
 
-  const helperFooterAtom = session.atom<
-    | Record<string, HelperFooterMessage>
-    | Promise<Record<string, HelperFooterMessage>>
-  >({})
-  const validateAtom = session.atom<string>('')
+  const validateAtom = useMemo(() => session.atom(''), [])
+
+  const [helperFooterValue, setHelperFooters] =
+    session.useAtom(helperFooterAtom)
+  const [validateValue, setValidateValue] = session.useAtom(validateAtom)
 
   const handleGenericErrorCreation = useCallback(
     async (
@@ -38,16 +43,16 @@ export const useInputHelperFooter = () => {
       formname: string,
       priority?: number
     ): Promise<HelperFooterMessage | undefined> => {
-      console.log('handleGenericErrorCreation called:', {
+      ClientLogger.debug('handleGenericErrorCreation called:', {
         name,
         label,
         formname,
         priority,
       })
       const value = formData.get(name) as string
-      console.log('Form data value:', value)
+      ClientLogger.debug('Form data value:', { value })
       if (!value || !value.trim()) {
-        console.log('Value is empty or whitespace')
+        ClientLogger.debug('Value is empty or whitespace')
         const message: HelperFooterMessage = {
           status: 'error',
           statusMessage: `${label} is required. Please enter a ${label.toLowerCase()}.`,
@@ -55,31 +60,23 @@ export const useInputHelperFooter = () => {
           spreadMessagePriority: priority ?? 1,
           required: true,
         }
-        console.log('Created error message:', message)
-        const [, setHelperFooter] = session.useAtom(helperFooterAtom)
-        setHelperFooter(prev => {
-          if (prev instanceof Promise) {
-            return prev
-          }
-          return { ...prev, [name]: message }
-        })
+        ClientLogger.debug('Created error message:', { message })
+        setHelperFooters(prev => ({ ...prev, [name]: message }))
         return message
       } else {
-        console.log('Value is not empty, removing helper footer from cache')
-        const [, setHelperFooter] = session.useAtom(helperFooterAtom)
-        setHelperFooter(prev => {
-          if (prev instanceof Promise) {
-            return prev
-          }
+        ClientLogger.debug(
+          'Value is not empty, removing helper footer from cache'
+        )
+        setHelperFooters(prev => {
           const newState = { ...prev }
           delete newState[name]
           return newState
         })
       }
-      console.log('Returning undefined (no error)')
+      ClientLogger.debug('Returning undefined (no error)')
       return undefined
     },
-    [helperFooterAtom]
+    [setHelperFooters]
   )
 
   const handleEmailErrorCreation = useCallback(
@@ -87,13 +84,13 @@ export const useInputHelperFooter = () => {
       formData: FormData,
       formname: string
     ): Promise<HelperFooterMessage | undefined> => {
-      console.log('handleEmailErrorCreation called:', { formname })
+      ClientLogger.debug('handleEmailErrorCreation called:', { formname })
       const email = formData.get('email') as string
-      console.log('Email value:', email)
+      ClientLogger.debug('Email value:', { email })
       let message: HelperFooterMessage | undefined
 
       if (!email || !email.trim()) {
-        console.log('Email is empty or whitespace')
+        ClientLogger.debug('Email is empty or whitespace')
         message = {
           status: 'error',
           statusMessage: 'Please enter an email address.',
@@ -102,7 +99,7 @@ export const useInputHelperFooter = () => {
           required: true,
         }
       } else if (!isValidEmailFormat(email)) {
-        console.log('Email format is invalid')
+        ClientLogger.debug('Email format is invalid')
         message = {
           status: 'error',
           statusMessage: 'Please enter a valid email address.',
@@ -111,7 +108,7 @@ export const useInputHelperFooter = () => {
           required: true,
         }
       } else {
-        console.log('Email is valid')
+        ClientLogger.debug('Email is valid')
         message = {
           status: 'success',
           statusMessage: 'Email is valid.',
@@ -122,32 +119,23 @@ export const useInputHelperFooter = () => {
       }
 
       if (message) {
-        console.log('Message created:', message)
-        const [, setHelperFooter] = session.useAtom(helperFooterAtom)
+        ClientLogger.debug('Message created:', { message })
         if (message.status === 'success') {
-          console.log('Removing helper footer from cache')
-          setHelperFooter(prev => {
-            if (prev instanceof Promise) {
-              return prev
-            }
+          ClientLogger.debug('Removing helper footer from cache')
+          setHelperFooters(prev => {
             const newState = { ...prev }
             delete newState['email']
             return newState
           })
         } else {
-          setHelperFooter(prev => {
-            if (prev instanceof Promise) {
-              return prev
-            }
-            return { ...prev, email: message! }
-          })
+          setHelperFooters(prev => ({ ...prev, email: message }))
         }
       }
 
-      console.log('Returning message:', message)
+      ClientLogger.debug('Returning message:', { message })
       return message
     },
-    [helperFooterAtom]
+    [setHelperFooters]
   )
 
   const handlePasswordErrorCreation = useCallback(
@@ -155,15 +143,14 @@ export const useInputHelperFooter = () => {
       formData: FormData,
       formname: string
     ): Promise<HelperFooterMessage | undefined> => {
-      console.log('handlePasswordErrorCreation called:', { formname })
+      ClientLogger.debug('handlePasswordErrorCreation called:', { formname })
       const password = formData.get('verifyPassword') as string
-      console.log('Password value:', password ? '[REDACTED]' : 'empty')
+      ClientLogger.debug('Password value:', { passwordProvided: !!password })
 
-      const [, setValidate] = session.useAtom(validateAtom)
       const debouncedPasswordStorage = debounce(() => {
         if (password) {
-          console.log('Storing password in cache (debounced)')
-          setValidate(password)
+          ClientLogger.debug('Storing password in cache (debounced)')
+          setValidateValue(password)
         }
       }, 2000)
 
@@ -172,7 +159,7 @@ export const useInputHelperFooter = () => {
       let message: HelperFooterMessage | undefined
 
       if (!password || !password.trim()) {
-        console.log('Password is empty or whitespace')
+        ClientLogger.debug('Password is empty or whitespace')
         message = {
           status: 'error',
           statusMessage: 'Password is required.',
@@ -185,7 +172,9 @@ export const useInputHelperFooter = () => {
           /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
         const passwordComplexityStatus: 'error' | 'success' =
           passwordRegex.test(password) ? 'success' : 'error'
-        console.log('Password complexity status:', passwordComplexityStatus)
+        ClientLogger.debug('Password complexity status:', {
+          passwordComplexityStatus,
+        })
 
         if (passwordComplexityStatus === 'error') {
           message = {
@@ -208,32 +197,23 @@ export const useInputHelperFooter = () => {
       }
 
       if (message) {
-        console.log('Message created:', message)
-        const [, setHelperFooter] = session.useAtom(helperFooterAtom)
+        ClientLogger.debug('Message created:', { message })
         if (message.status === 'success') {
-          console.log('Removing helper footer from cache')
-          setHelperFooter(prev => {
-            if (prev instanceof Promise) {
-              return prev
-            }
+          ClientLogger.debug('Removing helper footer from cache')
+          setHelperFooters(prev => {
             const newState = { ...prev }
             delete newState['verifyPassword']
             return newState
           })
         } else {
-          setHelperFooter(prev => {
-            if (prev instanceof Promise) {
-              return prev
-            }
-            return { ...prev, verifyPassword: message }
-          })
+          setHelperFooters(prev => ({ ...prev, verifyPassword: message }))
         }
       }
 
-      console.log('Returning message:', message)
+      ClientLogger.debug('Returning message:', { message })
       return message
     },
-    [helperFooterAtom, validateAtom]
+    [setHelperFooters, setValidateValue]
   )
 
   const handleConfirmPasswordErrorCreation = useCallback(
@@ -241,17 +221,18 @@ export const useInputHelperFooter = () => {
       formData: FormData,
       formname: string
     ): Promise<HelperFooterMessage | undefined> => {
-      console.log('handleConfirmPasswordErrorCreation called:', { formname })
+      ClientLogger.debug('handleConfirmPasswordErrorCreation called:', {
+        formname,
+      })
       const confirmPassword = formData.get('confirmPassword') as string
-      console.log(
-        'Confirm password value:',
-        confirmPassword ? '[REDACTED]' : 'empty'
-      )
+      ClientLogger.debug('Confirm password value:', {
+        passwordProvided: !!confirmPassword,
+      })
 
       let message: HelperFooterMessage | undefined
 
       if (!confirmPassword || !confirmPassword.trim()) {
-        console.log('Confirm password is empty or whitespace')
+        ClientLogger.debug('Confirm password is empty or whitespace')
         message = {
           status: 'error',
           statusMessage: 'Please confirm your password.',
@@ -260,11 +241,10 @@ export const useInputHelperFooter = () => {
           required: true,
         }
       } else {
-        const [verifyPassword] = session.useAtom(validateAtom)
-        console.log('Fetched verify password from session atom')
+        ClientLogger.debug('Fetched verify password from session atom')
 
-        if (!verifyPassword) {
-          console.log('Verify password not found')
+        if (!validateValue) {
+          ClientLogger.debug('Verify password not found')
           message = {
             status: 'error',
             statusMessage: 'Please enter your password first.',
@@ -272,8 +252,8 @@ export const useInputHelperFooter = () => {
             spreadMessagePriority: 3,
             required: true,
           }
-        } else if (confirmPassword !== verifyPassword) {
-          console.log('Passwords do not match')
+        } else if (confirmPassword !== validateValue) {
+          ClientLogger.debug('Passwords do not match')
           message = {
             status: 'error',
             statusMessage: 'Passwords do not match.',
@@ -282,7 +262,7 @@ export const useInputHelperFooter = () => {
             required: true,
           }
         } else {
-          console.log('Passwords match')
+          ClientLogger.debug('Passwords match')
           message = {
             status: 'success',
             statusMessage: 'Passwords match.',
@@ -294,32 +274,23 @@ export const useInputHelperFooter = () => {
       }
 
       if (message) {
-        console.log('Message created:', message)
-        const [, setHelperFooter] = session.useAtom(helperFooterAtom)
+        ClientLogger.debug('Message created:', { message })
         if (message.status === 'success') {
-          console.log('Removing helper footer from cache')
-          setHelperFooter(prev => {
-            if (prev instanceof Promise) {
-              return prev
-            }
+          ClientLogger.debug('Removing helper footer from cache')
+          setHelperFooters(prev => {
             const newState = { ...prev }
             delete newState['confirmPassword']
             return newState
           })
         } else {
-          setHelperFooter(prev => {
-            if (prev instanceof Promise) {
-              return prev
-            }
-            return { ...prev, confirmPassword: message }
-          })
+          setHelperFooters(prev => ({ ...prev, confirmPassword: message }))
         }
       }
 
-      console.log('Returning message:', message)
+      ClientLogger.debug('Returning message:', { message })
       return message
     },
-    [helperFooterAtom, validateAtom]
+    [setHelperFooters, validateValue]
   )
 
   const handlePhoneNumberErrorCreation = useCallback(
@@ -327,13 +298,13 @@ export const useInputHelperFooter = () => {
       formData: FormData,
       formname: string
     ): Promise<HelperFooterMessage | undefined> => {
-      console.log('handlePhoneNumberErrorCreation called:', { formname })
+      ClientLogger.debug('handlePhoneNumberErrorCreation called:', { formname })
       const phoneNumber = formData.get('phoneNumber') as string
-      console.log('Phone number value:', phoneNumber)
+      ClientLogger.debug('Phone number value:', { phoneNumber })
       let message: HelperFooterMessage | undefined
 
       if (!phoneNumber || !phoneNumber.trim()) {
-        console.log('Phone number is empty or whitespace')
+        ClientLogger.debug('Phone number is empty or whitespace')
         message = {
           status: 'error',
           statusMessage:
@@ -345,12 +316,12 @@ export const useInputHelperFooter = () => {
       } else {
         const digitsOnly = phoneNumber.replace(/[^\d]/g, '')
         const length = digitsOnly.length
-        console.log('Phone number length (digits only):', length)
+        ClientLogger.debug('Phone number length (digits only):', { length })
         if (
           (length === 10 && !digitsOnly.startsWith('1')) ||
           (length === 11 && digitsOnly.startsWith('1'))
         ) {
-          console.log('Phone number is valid')
+          ClientLogger.debug('Phone number is valid')
           message = {
             status: 'success',
             statusMessage: 'Phone number is valid.',
@@ -359,7 +330,7 @@ export const useInputHelperFooter = () => {
             required: true,
           }
         } else {
-          console.log('Phone number is invalid')
+          ClientLogger.debug('Phone number is invalid')
           message = {
             status: 'error',
             statusMessage:
@@ -372,61 +343,46 @@ export const useInputHelperFooter = () => {
       }
 
       if (message) {
-        console.log('Message created:', message)
-        const [, setHelperFooter] = session.useAtom(helperFooterAtom)
+        ClientLogger.debug('Message created:', { message })
         if (message.status === 'success') {
-          console.log('Removing helper footer from cache')
-          setHelperFooter(prev => {
-            if (prev instanceof Promise) {
-              return prev
-            }
+          ClientLogger.debug('Removing helper footer from cache')
+          setHelperFooters(prev => {
             const newState = { ...prev }
             delete newState['phoneNumber']
             return newState
           })
         } else {
-          setHelperFooter(prev => {
-            if (prev instanceof Promise) {
-              return prev
-            }
-            return { ...prev, phoneNumber: message }
-          })
+          setHelperFooters(prev => ({ ...prev, phoneNumber: message }))
         }
       }
 
-      console.log('Returning message:', message)
+      ClientLogger.debug('Returning message:', { message })
       return message
     },
-    [helperFooterAtom]
+    [setHelperFooters]
   )
 
   const updateHelperFooter = useCallback(
     (name: string, validationResult: HelperFooterMessage | undefined): void => {
-      console.log('updateHelperFooter called:', { name, validationResult })
-      const [, setHelperFooter] = session.useAtom(helperFooterAtom)
+      ClientLogger.debug('updateHelperFooter called:', {
+        name,
+        validationResult,
+      })
       if (validationResult) {
-        console.log('Updating helper footer with new validation result')
-        setHelperFooter(prev => {
-          if (prev instanceof Promise) {
-            return prev
-          }
-          return { ...prev, [name]: validationResult }
-        })
+        ClientLogger.debug('Updating helper footer with new validation result')
+        setHelperFooters(prev => ({ ...prev, [name]: validationResult }))
       } else {
-        console.log('Removing field from helper footer')
-        setHelperFooter(prev => {
-          if (prev instanceof Promise) {
-            return prev
-          }
+        ClientLogger.debug('Removing field from helper footer')
+        setHelperFooters(prev => {
           const newState = { ...prev }
           delete newState[name]
           return newState
         })
       }
 
-      console.log('Setting new helper footer value')
+      ClientLogger.debug('Helper footer updated')
     },
-    [helperFooterAtom]
+    [setHelperFooters]
   )
 
   const validateField = useCallback(
@@ -437,37 +393,42 @@ export const useInputHelperFooter = () => {
       formname: string,
       priority?: number
     ) => {
-      console.log('validateField called:', { name, label, formname, priority })
+      ClientLogger.debug('validateField called:', {
+        name,
+        label,
+        formname,
+        priority,
+      })
       let validationResult: HelperFooterMessage | undefined
 
       switch (name) {
         case 'email':
-          console.log('Validating email field')
+          ClientLogger.debug('Validating email field')
           validationResult = await handleEmailErrorCreation(formData, formname)
           break
         case 'verifyPassword':
-          console.log('Validating password field')
+          ClientLogger.debug('Validating password field')
           validationResult = await handlePasswordErrorCreation(
             formData,
             formname
           )
           break
         case 'confirmPassword':
-          console.log('Validating confirm password field')
+          ClientLogger.debug('Validating confirm password field')
           validationResult = await handleConfirmPasswordErrorCreation(
             formData,
             formname
           )
           break
         case 'phoneNumber':
-          console.log('Validating phone number field')
+          ClientLogger.debug('Validating phone number field')
           validationResult = await handlePhoneNumberErrorCreation(
             formData,
             formname
           )
           break
         default:
-          console.log('Validating generic field')
+          ClientLogger.debug('Validating generic field')
           validationResult = await handleGenericErrorCreation(
             formData,
             name,
@@ -477,7 +438,7 @@ export const useInputHelperFooter = () => {
           )
       }
 
-      console.log('Validation result:', validationResult)
+      ClientLogger.debug('Validation result:', { validationResult })
       updateHelperFooter(name, validationResult)
     },
     [
@@ -490,45 +451,40 @@ export const useInputHelperFooter = () => {
     ]
   )
 
-  const useShowErrorEffect = (
-    formSubmitted: boolean,
-    hasInput: boolean,
-    isFocused: boolean
-  ): boolean => {
-    console.log('useShowErrorEffect called:', {
-      formSubmitted,
-      hasInput,
-      isFocused,
-    })
-    const showErrorAtom = session.atom<boolean>(false)
-    const [showError, setShowError] = session.useAtom(showErrorAtom)
-
-    useEffect(() => {
+  const useShowErrorEffect = useCallback(
+    (
+      formSubmitted: boolean,
+      hasInput: boolean,
+      isFocused: boolean
+    ): boolean => {
+      ClientLogger.debug('useShowErrorEffect called:', {
+        formSubmitted,
+        hasInput,
+        isFocused,
+      })
+
       const shouldShowError = formSubmitted || (hasInput && !isFocused)
-      console.log('Calculating shouldShowError:', {
+      ClientLogger.debug('Calculating shouldShowError:', {
         shouldShowError,
         formSubmitted,
         hasInput,
         isFocused,
       })
-      setShowError(shouldShowError)
-    }, [formSubmitted, hasInput, isFocused, setShowError])
 
-    console.log('Returning showError:', showError)
-    return showError
-  }
+      ClientLogger.debug('Returning showError:', { shouldShowError })
+      return shouldShowError
+    },
+    []
+  )
 
   const fetchHelperFooters = useCallback(
     async (formname: string): Promise<HelperFooterMessage[]> => {
-      console.log('fetchHelperFooters called:', { formname })
-      const [helperFooters] = session.useAtom(helperFooterAtom)
-      console.log('Fetched helper footers from session atom:', helperFooters)
-
-      if (helperFooters instanceof Promise) {
-        return []
-      }
+      ClientLogger.debug('fetchHelperFooters called:', { formname })
+      ClientLogger.debug('Fetched helper footers from session atom:', {
+        helperFooterValue,
+      })
 
-      const filteredHelperFooters = Object.values(helperFooters).filter(
+      const filteredHelperFooters = Object.values(helperFooterValue).filter(
         (item): item is HelperFooterMessage => {
           const isValidHelperFooter =
             typeof item === 'object' &&
@@ -538,17 +494,17 @@ export const useInputHelperFooter = () => {
             'spreadMessage' in item &&
             'spreadMessagePriority' in item &&
             'required' in item
-          console.log('Checking if item is valid HelperFooterMessage:', {
+          ClientLogger.debug('Checking if item is valid HelperFooterMessage:', {
             item,
             isValid: isValidHelperFooter,
           })
           return isValidHelperFooter
         }
       )
-      console.log('Filtered helper footers:', filteredHelperFooters)
+      ClientLogger.debug('Filtered helper footers:', { filteredHelperFooters })
       return filteredHelperFooters
     },
-    [helperFooterAtom]
+    [helperFooterValue]
   )
 
   const result = useMemo(
@@ -556,11 +512,12 @@ export const useInputHelperFooter = () => {
       validateField,
       useShowErrorEffect,
       fetchHelperFooters,
+      helperFooterValue,
     }),
-    [validateField, fetchHelperFooters]
+    [validateField, useShowErrorEffect, fetchHelperFooters, helperFooterValue]
   )
 
-  console.log('useInputHelperFooter returning result:', result)
+  ClientLogger.debug('useInputHelperFooter returning result:', { result })
   return result
 }