goobs-frontend 0.7.63 → 0.7.65

package/src/components/Button/index.tsx

@@ -1,21 +1,12 @@
-import React, { useState, useEffect, 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 { get } from 'goobs-cache'
+import useHelperFooter from './hook/useHelperFooter'
 
 export type ButtonAlignment = 'left' | 'center' | 'right'
 
-export interface HelperFooterMessage {
-  status: 'error' | 'success'
-  statusMessage: string
-  spreadMessage: string
-  spreadMessagePriority: number
-  formname: string
-  required: boolean
-}
-
 export interface CustomButtonProps
   extends Omit<ButtonProps, 'color' | 'variant'> {
   text?: string
@@ -57,191 +48,138 @@ export interface CustomButtonProps
   iconlocation?: 'left' | 'top' | 'right'
   variant?: 'text' | 'outlined' | 'contained'
   onClick?: () => void
-  helperfooter?: HelperFooterMessage
   width?: string
   formname?: string
   name?: string
 }
 
-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 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 [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
-  const [, setIsFormValid] = useState<boolean>(true)
-  const [hasBeenClicked, setHasBeenClicked] = useState<boolean>(false)
+    const [isFormFinished, setIsFormFinished] = useState<boolean>(false)
+    const [isCheckingForm, setIsCheckingForm] = useState<boolean>(true)
 
-  const fetchHelperFooters = useCallback(async (): Promise<
-    HelperFooterMessage[]
-  > => {
-    if (!formname) {
-      console.log('CustomButton: No formname provided, returning empty array')
-      return []
-    }
-    console.log('CustomButton: Fetching helper footers for formname:', formname)
+    const {
+      updateFormValidation,
+      checkFormStatus,
+      getEmptyRequiredFields,
+      fetchHelperFooters,
+    } = useHelperFooter(formname)
 
-    // Wait for 2 seconds before fetching to allow time for cache update
-    await new Promise(resolve => setTimeout(resolve, 3000))
+    const checkFormState = useCallback(async (): Promise<void> => {
+      console.log('CustomButton: Checking form state...')
+      setIsCheckingForm(true)
 
-    const helperFooterResult = await get('helperfooter', formname, 'client')
-    console.log('CustomButton: Helper footer result:', helperFooterResult)
+      const formStatus = await checkFormStatus()
+      const emptyFields = await getEmptyRequiredFields()
+      const helperFooters = await fetchHelperFooters()
 
-    if (
-      helperFooterResult &&
-      typeof helperFooterResult === 'object' &&
-      'type' in helperFooterResult &&
-      helperFooterResult.type === 'json' &&
-      'value' in helperFooterResult &&
-      typeof helperFooterResult.value === 'object' &&
-      helperFooterResult.value !== null
-    ) {
-      const helperFooters = Object.entries(
-        helperFooterResult.value as Record<string, unknown>
-      )
-        .map(([key, value]): HelperFooterMessage | null => {
-          if (
-            typeof value === 'object' &&
-            value !== null &&
-            'status' in value &&
-            'statusMessage' in value &&
-            'spreadMessage' in value &&
-            'spreadMessagePriority' in value &&
-            'required' in value
-          ) {
-            return {
-              status: value.status as 'error' | 'success',
-              statusMessage: String(value.statusMessage),
-              spreadMessage: String(value.spreadMessage),
-              spreadMessagePriority: Number(value.spreadMessagePriority),
-              required: Boolean(value.required),
-              formname: key,
-            }
-          }
-          return null
-        })
-        .filter((value): value is HelperFooterMessage => value !== null)
+      console.log('CustomButton: Form status:', formStatus)
+      console.log('CustomButton: Empty fields:', emptyFields)
+      console.log('CustomButton: Helper footers:', helperFooters)
 
-      console.log('CustomButton: Valid helper footers:', helperFooters)
-      return helperFooters
-    }
+      const newIsFormFinished =
+        formStatus &&
+        emptyFields.length === 0 &&
+        (!helperFooters || Object.keys(helperFooters).length === 0)
 
-    console.log('CustomButton: No valid helper footers found in cache')
-    return []
-  }, [formname])
+      setIsFormFinished(newIsFormFinished)
+      setIsCheckingForm(false)
 
-  const updateFormValidation = useCallback(async (): Promise<boolean> => {
-    console.log('CustomButton: Starting form validation')
-    const helperFooters = await fetchHelperFooters()
-    console.log('CustomButton: Fetched helper footers:', helperFooters)
-
-    if (helperFooters.length === 0) {
-      console.log('CustomButton: No helper footers found, form is valid')
-      setErrorMessage(undefined)
-      setIsFormValid(true)
-      return true
-    }
-
-    const errorFooters = helperFooters.filter(
-      footer => footer.status === 'error'
-    )
-    console.log('CustomButton: Error footers:', errorFooters)
-
-    if (errorFooters.length > 0) {
-      console.log('CustomButton: Found error footers, form is invalid')
-      const highestPriorityError = errorFooters.reduce((prev, current) =>
-        prev.spreadMessagePriority < current.spreadMessagePriority
-          ? prev
-          : current
+      console.log(
+        'CustomButton: Form status changed. Is form finished:',
+        newIsFormFinished
       )
-      setErrorMessage(highestPriorityError.spreadMessage)
-      setIsFormValid(false)
-      return false
-    }
+    }, [checkFormStatus, getEmptyRequiredFields, fetchHelperFooters])
 
-    console.log('CustomButton: No error footers found, form is valid')
-    setErrorMessage(undefined)
-    setIsFormValid(true)
-    return true
-  }, [fetchHelperFooters])
+    useEffect(() => {
+      console.log('CustomButton: Performing initial check')
+      checkFormState()
+    }, [checkFormState])
 
-  useEffect(() => {
-    console.log('CustomButton: Running effect to update form validation')
-    void updateFormValidation()
-  }, [updateFormValidation])
+    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 renderIcon = (): 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 }} />
-  }
+        const validationResult = await updateFormValidation()
+        console.log('CustomButton: Validation result:', validationResult)
+        if (validationResult && onClick) {
+          onClick()
+        }
+        checkFormState()
+      },
+      [
+        isFormFinished,
+        isCheckingForm,
+        updateFormValidation,
+        onClick,
+        checkFormState,
+      ]
+    )
 
-  const handleButtonClick = async (
-    event: React.MouseEvent<HTMLButtonElement>
-  ): Promise<void> => {
-    console.log('CustomButton: Button clicked')
-    event.preventDefault()
-    setHasBeenClicked(true)
+    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])
 
-    const isValid = await updateFormValidation()
-    console.log('CustomButton: Form validation result:', isValid)
-    if (isValid && onClick) {
-      console.log('CustomButton: Form is valid, calling onClick')
-      onClick()
-    } else {
-      console.log('CustomButton: Form is invalid or no onClick provided')
-    }
-  }
+    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,
+      ]
+    )
 
-  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={{
-          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,
-        }}
-      >
+    const buttonContent = useMemo(
+      () => (
         <Box display="flex" alignItems="center">
           {iconlocation === 'left' && renderIcon()}
           {text && (
@@ -253,20 +191,77 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
           )}
           {iconlocation === 'right' && renderIcon()}
         </Box>
-      </Button>
-      {hasBeenClicked && errorMessage && (
-        <Typography
-          fontvariant="merrihelperfooter"
-          fontcolor={red.main}
-          text={errorMessage}
-          marginTop={0.5}
-          marginBottom={0}
-          align="center"
-          width="100%"
-        />
-      )}
-    </Box>
-  )
-}
+      ),
+      [iconlocation, renderIcon, text, fontvariant, fontcolor]
+    )
+
+    const messageComponent = useMemo(
+      () =>
+        !isFormFinished || isCheckingForm ? (
+          <Typography
+            fontvariant="merrihelperfooter"
+            fontcolor={red.main}
+            text="Fill in required fields"
+            marginTop={0.5}
+            marginBottom={0}
+            align="center"
+            width="100%"
+          />
+        ) : 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}
+      >
+        <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 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

package/src/components/Content/Structure/button/useButton.tsx

@@ -33,7 +33,6 @@ const useButton = (grid: {
       iconlocation,
       variant,
       onClick,
-      helperfooter,
       columnconfig: itemColumnConfig,
       cellconfig,
       ...restProps
@@ -72,7 +71,6 @@ const useButton = (grid: {
           iconlocation={iconlocation}
           variant={variant}
           onClick={onClick}
-          helperfooter={helperfooter}
           {...restProps}
         />
       ),

package/src/components/Nav/HorizontalVariant/index.tsx

@@ -1,7 +1,7 @@
 'use client'
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { Box, Tabs, Tab } from '@mui/material'
-import { get, set, JSONValue } from 'goobs-cache'
+import { session } from 'goobs-cache'
 import { NavProps, SubNav, View } from '../index'
 
 /**
@@ -47,58 +47,32 @@ function HorizontalVariant({
   /**
    * State to keep track of active tab values for different navigation components.
    */
-  const [activeTabValues, setActiveTabValues] = useState<
+  const activeTabValuesAtom = session.atom<
     Record<string, ActiveTabValue | null>
   >({})
+  const [activeTabValues, setActiveTabValues] =
+    session.useAtom(activeTabValuesAtom)
 
   /**
-   * Effect hook to fetch and set the active tab values when the component mounts.
+   * Effect hook to initialize the active tab values when the component mounts.
    */
   useEffect(() => {
-    /**
-     * Asynchronously fetches the active tab values from the cache.
-     */
-    const fetchActiveTabValues = async () => {
-      const result = await get('activeTabValues', 'tabStore', 'client')
-      if (
-        result &&
-        typeof result === 'object' &&
-        'type' in result &&
-        result.type === 'json' &&
-        'value' in result &&
-        typeof result.value === 'object'
-      ) {
-        setActiveTabValues(
-          result.value as Record<string, ActiveTabValue | null>
-        )
-      }
-    }
-
-    fetchActiveTabValues()
+    // The initialization is now handled by the session atom
+    // No need to fetch from cache as it's automatically handled by goobs-cache
   }, [])
 
   /**
    * Handles tab change events.
-   * Updates the active tab values in the state and cache.
+   * Updates the active tab values in the state.
    *
    * @param {React.SyntheticEvent} event - The event object.
    * @param {string} newValue - The new value of the selected tab.
    */
-  const handleTabChange = async (
-    event: React.SyntheticEvent,
-    newValue: string
-  ) => {
-    const updatedActiveTabValues = {
-      ...activeTabValues,
+  const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
+    setActiveTabValues(prev => ({
+      ...prev,
       [navname ?? '']: { tabId: newValue },
-    }
-    setActiveTabValues(updatedActiveTabValues)
-    await set(
-      'activeTabValues',
-      'tabStore',
-      { type: 'json', value: updatedActiveTabValues } as JSONValue,
-      'client'
-    )
+    }))
   }
 
   /**