goobs-frontend 0.7.64 → 0.7.66

package/src/components/Button/index.tsx

@@ -1,32 +1,19 @@
-import React, { useMemo, useCallback } from 'react'
+import React, { useMemo, useCallback, useEffect, useState } from 'react'
 import { Button, Box, ButtonProps } from '@mui/material'
 import StarIcon from '@mui/icons-material/Star'
 import Typography from '../Typography'
 import { red } from '../../styles/palette'
 import useHelperFooter from './hook/useHelperFooter'
 
-/**
- * Defines the possible alignment options for the button text.
- */
 export type ButtonAlignment = 'left' | 'center' | 'right'
 
-/**
- * Interface for the CustomButton component props.
- * Extends ButtonProps from Material-UI, omitting 'color' and 'variant'.
- */
 export interface CustomButtonProps
   extends Omit<ButtonProps, 'color' | 'variant'> {
-  /** The text to display on the button */
   text?: string
-  /** The background color of the button */
   backgroundcolor?: string
-  /** The outline color of the button */
   outlinecolor?: string
-  /** The font color of the button text */
   fontcolor?: string
-  /** The alignment of the button text */
   fontlocation?: ButtonAlignment
-  /** The variant of the font to use for the button text */
   fontvariant?:
     | 'arapeyh1'
     | 'arapeyh2'
@@ -55,167 +42,226 @@ export interface CustomButtonProps
     | 'merriparagraph'
     | 'merrihelperheader'
     | 'merrihelperfooter'
-  /** The icon to display on the button */
   icon?: React.ReactNode | false
-  /** The color of the icon */
   iconcolor?: string
-  /** The size of the icon */
   iconsize?: string
-  /** The location of the icon relative to the text */
   iconlocation?: 'left' | 'top' | 'right'
-  /** The variant of the button */
   variant?: 'text' | 'outlined' | 'contained'
-  /** The function to call when the button is clicked */
   onClick?: () => void
-  /** The width of the button */
   width?: string
-  /** The name of the form associated with this button */
   formname?: string
-  /** The name attribute of the button */
   name?: string
 }
 
-/**
- * CustomButton component that extends Material-UI's Button with additional styling and functionality.
- *
- * @param props - The props for the CustomButton component
- * @returns A React functional component
- */
-const CustomButton: React.FC<CustomButtonProps> = props => {
-  const {
-    text,
-    variant,
-    fontvariant = 'merriparagraph',
-    icon,
-    iconlocation,
-    iconsize,
-    type,
-    onClick,
-    fontcolor,
-    name,
-    formname,
-    outlinecolor,
-    backgroundcolor,
-    fontlocation,
-    iconcolor,
-    width,
-  } = props
-
-  const { errorMessage, isFormValid, updateFormValidation } =
-    useHelperFooter(formname)
-
-  /**
-   * Renders the icon for the button based on the provided props.
-   *
-   * @returns {React.ReactNode} The rendered icon or null
-   */
-  const renderIcon = useCallback((): React.ReactNode => {
-    if (icon === false) {
-      return null
-    }
-    if (React.isValidElement(icon)) {
-      return React.cloneElement(icon as React.ReactElement, {
-        style: { fontSize: iconsize },
-      })
-    }
-    return <StarIcon style={{ fontSize: iconsize }} />
-  }, [icon, iconsize])
-
-  /**
-   * Handles the button click event. Prevents default behavior, validates the form,
-   * and calls the onClick prop if the form is valid.
-   *
-   * @param event - The mouse event from clicking the button
-   */
-  const handleButtonClick = useCallback(
-    async (event: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
-      event.preventDefault()
-      const validationResult = await updateFormValidation(formname)
-      if (validationResult && onClick) {
-        onClick()
+const CustomButton: React.FC<CustomButtonProps> = React.memo(
+  props => {
+    const {
+      text,
+      variant,
+      fontvariant = 'merriparagraph',
+      icon,
+      iconlocation,
+      iconsize,
+      type,
+      onClick,
+      fontcolor,
+      name,
+      formname,
+      outlinecolor,
+      backgroundcolor,
+      fontlocation,
+      iconcolor,
+      width,
+    } = props
+
+    const [isFormFinished, setIsFormFinished] = useState<boolean>(false)
+    const [isCheckingForm, setIsCheckingForm] = useState<boolean>(true)
+
+    const {
+      updateFormValidation,
+      checkFormStatus,
+      getEmptyRequiredFields,
+      fetchHelperFooters,
+    } = useHelperFooter(formname)
+
+    const checkFormState = useCallback(async (): Promise<void> => {
+      console.log('CustomButton: Checking form state...')
+      setIsCheckingForm(true)
+
+      const formStatus = await checkFormStatus()
+      const emptyFields = await getEmptyRequiredFields()
+      const helperFooters = await fetchHelperFooters()
+
+      console.log('CustomButton: Form status:', formStatus)
+      console.log('CustomButton: Empty fields:', emptyFields)
+      console.log('CustomButton: Helper footers:', helperFooters)
+
+      const newIsFormFinished =
+        formStatus &&
+        emptyFields.length === 0 &&
+        (!helperFooters || Object.keys(helperFooters).length === 0)
+
+      setIsFormFinished(newIsFormFinished)
+      setIsCheckingForm(false)
+
+      console.log(
+        'CustomButton: Form status changed. Is form finished:',
+        newIsFormFinished
+      )
+    }, [checkFormStatus, getEmptyRequiredFields, fetchHelperFooters])
+
+    useEffect(() => {
+      console.log('CustomButton: Performing initial check')
+      checkFormState()
+    }, [checkFormState])
+
+    const handleButtonClick = useCallback(
+      async (event: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
+        event.preventDefault()
+        console.log(
+          'CustomButton: Button clicked. Is form finished:',
+          isFormFinished,
+          'Is checking form:',
+          isCheckingForm
+        )
+        if (!isFormFinished || isCheckingForm) return
+
+        const validationResult = await updateFormValidation()
+        console.log('CustomButton: Validation result:', validationResult)
+        if (validationResult && onClick) {
+          onClick()
+        }
+        checkFormState()
+      },
+      [
+        isFormFinished,
+        isCheckingForm,
+        updateFormValidation,
+        onClick,
+        checkFormState,
+      ]
+    )
+
+    const renderIcon = useCallback((): React.ReactNode => {
+      if (icon === false) {
+        return null
+      }
+      if (React.isValidElement(icon)) {
+        return React.cloneElement(icon as React.ReactElement, {
+          style: { fontSize: iconsize },
+        })
       }
-    },
-    [updateFormValidation, onClick, formname]
-  )
-
-  /**
-   * Memoized style object for the button.
-   */
-  const buttonStyle = useMemo(
-    () => ({
-      minWidth: text ? 'auto' : 'fit-content',
-      paddingLeft: text ? '8px' : '0',
-      paddingRight: text ? '8px' : '0',
-      justifyContent: fontlocation || 'center',
-      backgroundColor: backgroundcolor,
-      border: outlinecolor ? `1px solid ${outlinecolor}` : undefined,
-      color: iconcolor,
-      width: width,
-    }),
-    [text, fontlocation, backgroundcolor, outlinecolor, iconcolor, width]
-  )
-
-  /**
-   * Memoized content for the button, including icon and text.
-   */
-  const buttonContent = useMemo(
-    () => (
-      <Box display="flex" alignItems="center">
-        {iconlocation === 'left' && renderIcon()}
-        {text && (
+      return <StarIcon style={{ fontSize: iconsize }} />
+    }, [icon, iconsize])
+
+    const buttonStyle = useMemo(
+      () => ({
+        minWidth: text ? 'auto' : 'fit-content',
+        paddingLeft: text ? '8px' : '0',
+        paddingRight: text ? '8px' : '0',
+        justifyContent: fontlocation || 'center',
+        backgroundColor: backgroundcolor,
+        border: outlinecolor ? `1px solid ${outlinecolor}` : undefined,
+        color: iconcolor,
+        width: width,
+        opacity: !isFormFinished || isCheckingForm ? 0.5 : 1,
+      }),
+      [
+        text,
+        fontlocation,
+        backgroundcolor,
+        outlinecolor,
+        iconcolor,
+        width,
+        isFormFinished,
+        isCheckingForm,
+      ]
+    )
+
+    const buttonContent = useMemo(
+      () => (
+        <Box display="flex" alignItems="center">
+          {iconlocation === 'left' && renderIcon()}
+          {text && (
+            <Typography
+              fontvariant={fontvariant}
+              fontcolor={fontcolor}
+              text={text}
+            />
+          )}
+          {iconlocation === 'right' && renderIcon()}
+        </Box>
+      ),
+      [iconlocation, renderIcon, text, fontvariant, fontcolor]
+    )
+
+    const messageComponent = useMemo(
+      () =>
+        !isFormFinished || isCheckingForm ? (
           <Typography
-            fontvariant={fontvariant}
-            fontcolor={fontcolor}
-            text={text}
+            fontvariant="merrihelperfooter"
+            fontcolor={red.main}
+            text="Fill in required fields"
+            marginTop={0.5}
+            marginBottom={0}
+            align="center"
+            width="100%"
           />
-        )}
-        {iconlocation === 'right' && renderIcon()}
-      </Box>
-    ),
-    [iconlocation, renderIcon, text, fontvariant, fontcolor]
-  )
-
-  /**
-   * Memoized error message component that displays when the form is invalid.
-   */
-  const errorMessageComponent = useMemo(
-    () =>
-      !isFormValid && errorMessage ? (
-        <Typography
-          fontvariant="merrihelperfooter"
-          fontcolor={red.main}
-          text={errorMessage}
-          marginTop={0.5}
-          marginBottom={0}
-          align="center"
-          width="100%"
-        />
-      ) : null,
-    [errorMessage, isFormValid]
-  )
-
-  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      width={width}
-    >
-      <Button
-        disableElevation
-        variant={variant}
-        startIcon={null}
-        endIcon={null}
-        type={type}
-        name={name}
-        onClick={handleButtonClick}
-        style={buttonStyle}
+        ) : null,
+      [isFormFinished, isCheckingForm]
+    )
+
+    console.log(
+      `CustomButton: Rendering. Is form finished: ${isFormFinished} Is checking form: ${isCheckingForm}`
+    )
+
+    return (
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        width={width}
       >
-        {buttonContent}
-      </Button>
-      {errorMessageComponent}
-    </Box>
-  )
-}
+        <Button
+          disableElevation
+          variant={variant}
+          startIcon={null}
+          endIcon={null}
+          type={type}
+          name={name}
+          onClick={handleButtonClick}
+          style={buttonStyle}
+          disabled={!isFormFinished || isCheckingForm}
+        >
+          {buttonContent}
+        </Button>
+        {messageComponent}
+      </Box>
+    )
+  },
+  (prevProps, nextProps) => {
+    const propsAreEqual =
+      prevProps.text === nextProps.text &&
+      prevProps.variant === nextProps.variant &&
+      prevProps.fontvariant === nextProps.fontvariant &&
+      prevProps.icon === nextProps.icon &&
+      prevProps.iconlocation === nextProps.iconlocation &&
+      prevProps.iconsize === nextProps.iconsize &&
+      prevProps.type === nextProps.type &&
+      prevProps.onClick === nextProps.onClick &&
+      prevProps.fontcolor === nextProps.fontcolor &&
+      prevProps.name === nextProps.name &&
+      prevProps.formname === nextProps.formname &&
+      prevProps.outlinecolor === nextProps.outlinecolor &&
+      prevProps.backgroundcolor === nextProps.backgroundcolor &&
+      prevProps.fontlocation === nextProps.fontlocation &&
+      prevProps.iconcolor === nextProps.iconcolor &&
+      prevProps.width === nextProps.width
+    console.log('CustomButton: Props changed:', !propsAreEqual)
+    return propsAreEqual
+  }
+)
+
+CustomButton.displayName = 'CustomButton'
 
-export default React.memo(CustomButton)
+export default CustomButton

package/src/components/ConfirmationCodeInput/index.tsx

@@ -4,7 +4,7 @@ import { Input, Box } from '@mui/material'
 import { useCodeConfirmation } from './utils/useCodeConfirmation'
 import { columnconfig } from '../../components/Grid'
 import { red, green } from '../../styles/palette'
-import { set } from 'goobs-cache'
+import { session } from 'goobs-cache'
 
 export interface ConfirmationCodeInputsProps {
   identifier?: string
@@ -30,6 +30,9 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
   'aria-invalid': ariaInvalid,
   ...props
 }) => {
+  const verificationCodeAtom = session.atom<string>('')
+  const [, setVerificationCode] = session.useAtom(verificationCodeAtom)
+
   const { handleCodeChange, handleKeyDown, combinedCode } = useCodeConfirmation(
     {
       codeLength,
@@ -73,19 +76,14 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
   }
 
   /**
-   * useEffect hook is used to set the verification code into an atom using goobs-cache.
+   * useEffect hook is used to set the verification code into the session atom using goobs-cache.
    * It sets the code whenever the combinedCode changes and the code is valid.
    */
   React.useEffect(() => {
     if (isValid) {
-      set(
-        'verificationCode',
-        'codeStore',
-        { type: 'string', value: combinedCode },
-        'client'
-      )
+      setVerificationCode(combinedCode)
     }
-  }, [combinedCode, isValid])
+  }, [combinedCode, isValid, setVerificationCode])
 
   return (
     <Box