import isTruthy from 'proton-shared/lib/helpers/isTruthy' ; import { useLoading } from 'react-components' ; import { useState } from 'react' ; import { EventModelErrors } from 'proton-shared/lib/interfaces/calendar' ; import { TITLE_INPUT_ID } from 'proton-shared/lib/calendar/constants' ; import { NOTIFICATION_ID } from 'react-components/containers/calendar/notifications/Notifications' ; import { InviteActions } from '../../../interfaces/Invite' ; import { COUNT_ID , UNTIL_ID } from '../rows/EndsRow' ; const focusInput = ( el , id ) => { el ?. querySelector < HTMLInputElement > ( `#${ id }` ) ?. focus ( ) ; } ; const handleValidation = ( errors , containerEl ) => { if ( Object . values ( errors ) . filter ( isTruthy ) . length > 0 ) { for ( const [ errorId , formId ] of [ [ 'title' , TITLE_INPUT_ID ] , [ 'until' , UNTIL_ID ] , [ 'count' , COUNT_ID ] , [ 'notifications' , NOTIFICATION_ID ] , ] ) { if ( errors [ errorId as keyof EventModelErrors ] ) { focusInput ( containerEl , formId ) ; return true ; } } return true ; } return false ; } ; export enum ACTION { SUBMIT , DELETE } interface Arguments { containerEl : HTMLElement | null ; errors : EventModelErrors ; onSave : ( inviteActions : InviteActions ) => Promise < void > ; onDelete ? : ( inviteActions : InviteActions ) => Promise < void > ; } export const useForm = ( { containerEl , errors , onSave , onDelete } ) => { const [ isSubmitted , setIsSubmitted ] = useState ( false ) ; const [ loadingAction , withLoadingAction ] = useLoading ( ) ; const [ lastAction , setLastAction ] = useState < ACTION | null > ( null ) ; const handleSubmit = ( inviteActions ) => { setIsSubmitted ( true ) ; setLastAction ( ACTION . SUBMIT ) ; if ( handleValidation ( errors , containerEl ) ) { return ; } void withLoadingAction ( onSave ( inviteActions ) ) ; } ; const handleDelete = ( inviteActions ) => { setLastAction ( ACTION . DELETE ) ; if ( ! onDelete ) { return ; } void withLoadingAction ( onDelete ( inviteActions ) ) ; } ; return { isSubmitted , loadingAction , handleDelete , handleSubmit , lastAction , } ; } ;