goobs-frontend 0.7.65 → 0.7.67

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

@@ -1,4 +1,6 @@
-import React, { useState, useCallback, useEffect } from 'react'
+'use client'
+
+import React, { useState, useCallback } from 'react'
 
 /**
  * Formats a string of digits into a US phone number format.
@@ -37,9 +39,10 @@ export const formatPhoneNumber = (value: string): string => {
  * @property {string} phoneNumber - The current formatted phone number.
  * @property {function} handlePhoneNumberChange - A function to handle changes to the phone number input.
  * @property {function} updatePhoneNumber - A function to directly update the phone number.
+ * @property {function} checkAndUpdatePhoneNumber - A function to check and update the phone number based on component variant and initial value.
  *
  * @example
- * const { phoneNumber, handlePhoneNumberChange, updatePhoneNumber } = usePhoneNumber();
+ * const { phoneNumber, handlePhoneNumberChange, updatePhoneNumber, checkAndUpdatePhoneNumber } = usePhoneNumber();
  */
 export const usePhoneNumber = (
   initialValue: string = '',
@@ -58,10 +61,8 @@ export const usePhoneNumber = (
     (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       const input = e.target.value
       let strippedInput = input.replace(/^\+1\s?/, '').replace(/\D/g, '')
-
       // Ensure we don't exceed 10 digits
       strippedInput = strippedInput.slice(0, 10)
-
       // Only format if there's actual input beyond "+1 "
       const formattedValue =
         strippedInput.length > 0 ? formatPhoneNumber(strippedInput) : '+1 '
@@ -80,9 +81,10 @@ export const usePhoneNumber = (
   }, [])
 
   /**
-   * Update phone number when componentvariant is 'phonenumber' and value changes
+   * Checks and updates the phone number based on component variant and initial value.
+   * This function replaces the useEffect from the original implementation.
    */
-  useEffect(() => {
+  const checkAndUpdatePhoneNumber = useCallback(() => {
     if (componentvariant === 'phonenumber' && initialValue) {
       updatePhoneNumber(initialValue)
     }
@@ -92,5 +94,6 @@ export const usePhoneNumber = (
     phoneNumber,
     handlePhoneNumberChange,
     updatePhoneNumber,
+    checkAndUpdatePhoneNumber,
   }
 }

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

@@ -1,82 +1,107 @@
-import { useCallback, useMemo, MutableRefObject } from 'react'
+'use client'
+
+import { useCallback, useMemo, MutableRefObject, useRef } from 'react'
 import { session } from 'goobs-cache'
 import { StyledComponentProps } from '../index'
 import { HelperFooterMessage } from './useInputHelperFooter'
+import { ClientLogger } from 'goobs-testing'
 
 type HelperFooterState = Record<string, HelperFooterMessage>
 
 export const useRequiredFieldsValidator = (
   formname: string,
   components: StyledComponentProps[],
-  hasInputRef: MutableRefObject<boolean>
+  hasInputRef: MutableRefObject<boolean>,
+  helperFooterAtom: ReturnType<typeof session.atom<HelperFooterState>>
 ) => {
-  console.log('useRequiredFieldsValidator called with:', {
+  ClientLogger.debug('useRequiredFieldsValidator called', {
     formname,
-    components,
-    hasInputRef,
+    componentsCount: components.length,
+    hasInputRefCurrent: hasInputRef.current,
   })
 
-  const helperFootersAtom = session.atom<HelperFooterState>({})
-  const [helperFooters, setHelperFooters] = session.useAtom(helperFootersAtom)
+  const [helperFooters, setHelperFooters] = session.useAtom(helperFooterAtom)
+  const failedAttempts = useRef<Record<string, number>>({})
 
   const initializeComponentStatuses = useCallback(() => {
-    console.log('initializeComponentStatuses called')
-
-    const initialHelperFooters: HelperFooterState = { ...helperFooters }
-
-    components.forEach(component => {
-      if (
-        component.name &&
-        component.required &&
-        component.label &&
-        !initialHelperFooters[component.name]
-      ) {
-        initialHelperFooters[component.name] = {
-          status: 'emptyAndRequired',
-          statusMessage: `${component.label} is required.`,
-          spreadMessage: `${component.label} is required.`,
-          spreadMessagePriority: component.spreadMessagePriority || 1,
-          required: true,
-          hasInput: false,
-        }
-        console.log(
-          `Created new helper footer for ${component.name}:`,
-          initialHelperFooters[component.name]
-        )
+    ClientLogger.debug('initializeComponentStatuses called')
+
+    try {
+      const initialHelperFooters: HelperFooterState = {
+        ...(helperFooters || {}),
       }
-    })
 
-    console.log('Setting helper footers in session atom')
-    setHelperFooters(initialHelperFooters)
+      components.forEach(component => {
+        if (
+          component.name &&
+          component.required &&
+          component.label &&
+          !initialHelperFooters[component.name]
+        ) {
+          initialHelperFooters[component.name] = {
+            status: 'emptyAndRequired',
+            statusMessage: `${component.label} is required.`,
+            spreadMessage: `${component.label} is required.`,
+            spreadMessagePriority: component.spreadMessagePriority || 1,
+            required: true,
+            hasInput: false,
+          }
+          ClientLogger.debug(`Created new helper footer`, {
+            componentName: component.name,
+            helperFooter: initialHelperFooters[component.name],
+          })
+        }
+      })
+
+      ClientLogger.debug('Setting helper footers in session atom')
+      setHelperFooters(initialHelperFooters)
 
-    console.log(`Initialized helper footers:`, initialHelperFooters)
+      ClientLogger.debug(`Initialized helper footers`, { initialHelperFooters })
+    } catch (error) {
+      ClientLogger.error('Error in initializeComponentStatuses', { error })
+    }
   }, [components, helperFooters, setHelperFooters])
 
   const checkFormStatus = useCallback(() => {
-    console.log('checkFormStatus called')
-    const requiredComponents = components.filter(
-      component => component.required
-    )
-    console.log('Required components:', requiredComponents)
-
-    const allRequiredHaveInput = requiredComponents.every(
-      component =>
-        helperFooters[component.name || '']?.hasInput || hasInputRef.current
-    )
-    console.log('All required fields have input:', allRequiredHaveInput)
-    return allRequiredHaveInput
+    ClientLogger.debug('checkFormStatus called')
+    try {
+      const requiredComponents = components.filter(
+        component => component.required
+      )
+      ClientLogger.debug('Required components', {
+        count: requiredComponents.length,
+      })
+
+      const allRequiredHaveInput = requiredComponents.every(
+        component =>
+          helperFooters[component.name || '']?.hasInput || hasInputRef.current
+      )
+      ClientLogger.debug('All required fields have input', {
+        allRequiredHaveInput,
+      })
+      return allRequiredHaveInput
+    } catch (error) {
+      ClientLogger.error('Error in checkFormStatus', { error })
+      return false
+    }
   }, [components, hasInputRef, helperFooters])
 
   const getEmptyRequiredFields = useCallback(() => {
-    console.log('getEmptyRequiredFields called')
+    ClientLogger.debug('getEmptyRequiredFields called')
 
-    const emptyFields = Object.entries(helperFooters)
-      .filter(
-        ([, value]) => value.required && !value.hasInput && !hasInputRef.current
-      )
-      .map(([key]) => key)
-    console.log('Empty required fields:', emptyFields)
-    return emptyFields
+    try {
+      const emptyFields = Object.entries(helperFooters)
+        .filter(
+          ([, value]) =>
+            value.required && !value.hasInput && !hasInputRef.current
+        )
+        .map(([key]) => key)
+      ClientLogger.debug('Empty required fields', { emptyFields })
+      return emptyFields
+    } catch (error) {
+      ClientLogger.error('Error in getEmptyRequiredFields', { error })
+      return []
+    }
   }, [hasInputRef, helperFooters])
 
   const validateRequiredField = useCallback(
@@ -86,30 +111,58 @@ export const useRequiredFieldsValidator = (
       required: boolean,
       spreadMessagePriority: number
     ) => {
-      console.log(`validateRequiredField called for ${name}`)
-
-      if (required && !helperFooters[name]?.hasInput && !hasInputRef.current) {
-        console.log(`${name} is required and empty, updating helper footer`)
-        const newHelperFooter: HelperFooterMessage = {
-          status: 'emptyAndRequired',
-          statusMessage: `${label} is required.`,
-          spreadMessage: `${label} is required.`,
-          spreadMessagePriority,
-          required: true,
-          hasInput: false,
+      ClientLogger.debug('validateRequiredField called', {
+        name,
+        label,
+        required,
+        spreadMessagePriority,
+      })
+
+      try {
+        if (failedAttempts.current[name] && failedAttempts.current[name] >= 3) {
+          ClientLogger.warn('Validation attempts exceeded for field', {
+            name,
+            attempts: failedAttempts.current[name],
+          })
+          return
         }
 
-        setHelperFooters(prev => ({
-          ...prev,
-          [name]: newHelperFooter,
-        }))
-
-        console.log('Updated helperFooters:', {
-          ...helperFooters,
-          [name]: newHelperFooter,
-        })
-      } else {
-        console.log(`${name} validation not needed or already has input`)
+        if (
+          required &&
+          !helperFooters[name]?.hasInput &&
+          !hasInputRef.current
+        ) {
+          ClientLogger.debug(
+            `${name} is required and empty, updating helper footer`
+          )
+          const newHelperFooter: HelperFooterMessage = {
+            status: 'emptyAndRequired',
+            statusMessage: `${label} is required.`,
+            spreadMessage: `${label} is required.`,
+            spreadMessagePriority,
+            required: true,
+            hasInput: false,
+          }
+
+          setHelperFooters((prev: HelperFooterState) => ({
+            ...prev,
+            [name]: newHelperFooter,
+          }))
+
+          ClientLogger.debug('Updated helperFooters', {
+            name,
+            newHelperFooter,
+          })
+
+          failedAttempts.current[name] = (failedAttempts.current[name] || 0) + 1
+        } else {
+          ClientLogger.debug(
+            `${name} validation not needed or already has input`
+          )
+        }
+      } catch (error) {
+        ClientLogger.error('Error in validateRequiredField', { error, name })
+        failedAttempts.current[name] = (failedAttempts.current[name] || 0) + 1
       }
     },
     [hasInputRef, helperFooters, setHelperFooters]
@@ -130,7 +183,7 @@ export const useRequiredFieldsValidator = (
     ]
   )
 
-  console.log('useRequiredFieldsValidator returning:', result)
+  ClientLogger.debug('useRequiredFieldsValidator returning', { result })
   return result
 }
 

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

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback } from 'react'
 import React from 'react'
 

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback } from 'react'
 import { StyledComponentProps } from '../index'
 
 /**
@@ -9,16 +9,9 @@ import { StyledComponentProps } from '../index'
  * @returns An object containing the value and handlers for the split button.
  */
 export const useSplitButton = (props: StyledComponentProps) => {
-  const [value, setValue] = useState('0')
-
-  /**
-   * Update the value state when the value prop changes.
-   */
-  useEffect(() => {
-    if (props.value !== undefined) {
-      setValue(props.value)
-    }
-  }, [props.value])
+  const [value, setValue] = useState(() => {
+    return props.value !== undefined ? props.value : '0'
+  })
 
   /**
    * Increment the value by 1.
@@ -57,10 +50,21 @@ export const useSplitButton = (props: StyledComponentProps) => {
     setValue(numValue === '' ? '0' : numValue)
   }, [])
 
+  /**
+   * Update the value state when the value prop changes.
+   * This function replaces the useEffect from the original implementation.
+   */
+  const updateValueFromProps = useCallback(() => {
+    if (props.value !== undefined) {
+      setValue(props.value)
+    }
+  }, [props.value])
+
   return {
     value,
     handleIncrement,
     handleDecrement,
     handleChange,
+    updateValueFromProps,
   }
 }