goobs-frontend 0.7.63 → 0.7.65

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

@@ -0,0 +1,137 @@
+import { useCallback, useMemo, MutableRefObject } from 'react'
+import { session } from 'goobs-cache'
+import { StyledComponentProps } from '../index'
+import { HelperFooterMessage } from './useInputHelperFooter'
+
+type HelperFooterState = Record<string, HelperFooterMessage>
+
+export const useRequiredFieldsValidator = (
+  formname: string,
+  components: StyledComponentProps[],
+  hasInputRef: MutableRefObject<boolean>
+) => {
+  console.log('useRequiredFieldsValidator called with:', {
+    formname,
+    components,
+    hasInputRef,
+  })
+
+  const helperFootersAtom = session.atom<HelperFooterState>({})
+  const [helperFooters, setHelperFooters] = session.useAtom(helperFootersAtom)
+
+  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]
+        )
+      }
+    })
+
+    console.log('Setting helper footers in session atom')
+    setHelperFooters(initialHelperFooters)
+
+    console.log(`Initialized helper footers:`, initialHelperFooters)
+  }, [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
+  }, [components, hasInputRef, helperFooters])
+
+  const getEmptyRequiredFields = useCallback(() => {
+    console.log('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
+  }, [hasInputRef, helperFooters])
+
+  const validateRequiredField = useCallback(
+    (
+      name: string,
+      label: string,
+      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,
+        }
+
+        setHelperFooters(prev => ({
+          ...prev,
+          [name]: newHelperFooter,
+        }))
+
+        console.log('Updated helperFooters:', {
+          ...helperFooters,
+          [name]: newHelperFooter,
+        })
+      } else {
+        console.log(`${name} validation not needed or already has input`)
+      }
+    },
+    [hasInputRef, helperFooters, setHelperFooters]
+  )
+
+  const result = useMemo(
+    () => ({
+      checkFormStatus,
+      getEmptyRequiredFields,
+      validateRequiredField,
+      initializeComponentStatuses,
+    }),
+    [
+      checkFormStatus,
+      getEmptyRequiredFields,
+      validateRequiredField,
+      initializeComponentStatuses,
+    ]
+  )
+
+  console.log('useRequiredFieldsValidator returning:', result)
+  return result
+}
+
+export default useRequiredFieldsValidator

package/src/components/StyledComponent/index.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useRef, useEffect } from 'react'
 import { Box, InputLabel, OutlinedInput, styled } from '@mui/material'
+import { session } from 'goobs-cache'
 import { useDropdown } from './hooks/useDropdown'
 import { usePhoneNumber } from './hooks/usePhoneNumber'
 import { useSplitButton } from './hooks/useSplitButton'
@@ -9,9 +10,10 @@ import { Typography } from './../Typography'
 import { red, green } from '../../styles/palette'
 import { StartAdornment, EndAdornment } from './adornment'
 import {
-  useHelperFooter,
+  useInputHelperFooter,
   HelperFooterMessage,
-} from './helperfooter/useHelperFooter'
+} from './hooks/useInputHelperFooter'
+import { useRequiredFieldsValidator } from './hooks/useRequiredFieldsValidator'
 import labelStyles from '../../styles/StyledComponent/Label'
 import { useHasInputEffect, usePreventAutocompleteEffect } from './useEffects'
 
@@ -94,6 +96,8 @@ export interface StyledComponentProps {
   onOptionSelect?: (option: string) => void
   /** Callback function when the input value changes */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  /** Priority of the spread message */
+  spreadMessagePriority?: number
 }
 
 /**
@@ -135,7 +139,6 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     value,
     valuestatus,
     placeholder,
-    required = false,
     formname,
     formSubmitted = false,
     'aria-label': ariaLabel,
@@ -144,17 +147,22 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     'aria-describedby': ariaDescribedBy,
     onOptionSelect,
     onChange,
+    spreadMessagePriority,
   } = props
 
-  const {
-    validateField,
-    validateRequiredField,
-    helperFooterValue,
-    initializeRequiredFields,
-  } = useHelperFooter()
+  const { validateField } = useInputHelperFooter()
+  const helperFooterAtom = session.atom<Record<string, HelperFooterMessage>>({})
+  const [helperFooterValue] = session.useAtom(helperFooterAtom)
+
+  const showErrorAtom = session.atom<boolean>(false)
+  const [showError, setShowError] = session.useAtom(showErrorAtom)
+
+  const hasInputRef = useRef(false)
+
+  useRequiredFieldsValidator(formname || '', [props], hasInputRef)
+
   const [isFocused, setIsFocused] = useState(false)
   const [hasInput, setHasInput] = useState(false)
-  const [showError, setShowError] = useState(false)
   const [passwordVisible, setPasswordVisible] = useState(false)
   const inputRefInternal = useRef<HTMLInputElement>(null)
   const inputBoxRef = useRef<HTMLDivElement>(null)
@@ -164,8 +172,10 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     inputBoxRef,
     onOptionSelect
   )
-  const { phoneNumber, handlePhoneNumberChange, updatePhoneNumber } =
-    usePhoneNumber(value || '')
+  const { phoneNumber, handlePhoneNumberChange } = usePhoneNumber(
+    value || '',
+    componentvariant
+  )
   const {
     value: splitButtonValue,
     handleIncrement,
@@ -175,24 +185,6 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
   useHasInputEffect(value, valuestatus, setHasInput)
   usePreventAutocompleteEffect(inputRefInternal)
 
-  /**
-   * Initialize required fields when the form name changes
-   */
-  useEffect(() => {
-    if (formname) {
-      initializeRequiredFields(formname)
-    }
-  }, [formname, initializeRequiredFields])
-
-  /**
-   * Validate required field when relevant props change
-   */
-  useEffect(() => {
-    if (required && formname && name && label) {
-      validateRequiredField(required, formname, name, label)
-    }
-  }, [required, formname, name, label, validateRequiredField])
-
   /**
    * Show error after a delay when form is submitted or input has value
    */
@@ -202,16 +194,11 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     }, 1000)
 
     return () => clearTimeout(timer)
-  }, [formSubmitted, hasInput])
+  }, [formSubmitted, hasInput, setShowError])
 
-  /**
-   * Update phone number when componentvariant is 'phonenumber' and value changes
-   */
   useEffect(() => {
-    if (componentvariant === 'phonenumber' && value) {
-      updatePhoneNumber(value)
-    }
-  }, [componentvariant, value, updatePhoneNumber])
+    hasInputRef.current = !!value
+  }, [value])
 
   const currentHelperFooter = name ? helperFooterValue[name] : undefined
 
@@ -238,11 +225,12 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     }
 
     setHasInput(!!e.target.value)
+    hasInputRef.current = !!e.target.value
 
     const formData = new FormData()
     formData.append(e.target.name, e.target.value)
     if (name && label && formname) {
-      validateField(name, formData, label, required, formname)
+      validateField(name, formData, label, formname, spreadMessagePriority)
     }
   }
 
@@ -261,7 +249,7 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     if (name && label && !hasInput && formname) {
       const formData = new FormData()
       formData.append(name, '')
-      validateField(name, formData, label, required, formname)
+      validateField(name, formData, label, formname, spreadMessagePriority)
     }
   }
 

package/src/components/TransferList/index.tsx

@@ -80,7 +80,9 @@ const TransferList: React.FC<TransferListProps> = ({
     const newRight = right.concat(left)
     setRight(newRight)
     setLeft([])
-    onChange && onChange(newRight)
+    if (onChange) {
+      onChange(newRight)
+    }
   }
 
   /**
@@ -92,7 +94,9 @@ const TransferList: React.FC<TransferListProps> = ({
     setRight(newRight)
     setLeft(newLeft)
     setChecked(not(checked, leftChecked))
-    onChange && onChange(newRight)
+    if (onChange) {
+      onChange(newRight)
+    }
   }
 
   /**
@@ -104,7 +108,9 @@ const TransferList: React.FC<TransferListProps> = ({
     setLeft(newLeft)
     setRight(newRight)
     setChecked(not(checked, rightChecked))
-    onChange && onChange(newRight)
+    if (onChange) {
+      onChange(newRight)
+    }
   }
 
   /**
@@ -114,7 +120,9 @@ const TransferList: React.FC<TransferListProps> = ({
     const newLeft = left.concat(right)
     setLeft(newLeft)
     setRight([])
-    onChange && onChange([])
+    if (onChange) {
+      onChange([])
+    }
   }
 
   /**