import isUndefined from 'lodash/isUndefined'; import { useRef, useState } from 'react'; import { FaPencilAlt } from 'react-icons/fa'; import { MdAddCircle } from 'react-icons/md'; import { Organization } from '../../../types'; import Modal from '../../common/Modal'; import OrganizationForm from './Form'; import styles from './Modal.module.css'; interface Props { open: boolean; organization?: Organization; onSuccess?: () => void; onClose: () => void; onAuthError: () => void; } const OrganizationModal = (props: Props) => { const form = useRef<HTMLFormElement>(null); const [isSending, setIsSending] = useState(false); const [apiError, setApiError] = useState<null | string>(null); const onCloseModal = () => { props.onClose(); }; const submitForm = () => { if (form.current) { form.current.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true })); } }; return ( <Modal header={ <div className={`h3 m-2 flex-grow-1 ${styles.title}`}> {isUndefined(props.organization) ? <>Add organization</> : <>Update organization</>} </div> } open={props.open} modalClassName={styles.modal} closeButton={ <button className="btn btn-sm btn-outline-secondary" type="button" disabled={isSending} onClick={submitForm} aria-label={`${isUndefined(props.organization) ? 'Add' : 'Update'} organization`} > {isSending ? ( <> <span className="spinner-grow spinner-grow-sm" role="status" aria-hidden="true" /> <span className="ms-2"> {isUndefined(props.organization) ? <>Adding organization</> : <>Updating organization</>} </span> </> ) : ( <div className="d-flex flex-row align-items-center text-uppercase"> {isUndefined(props.organization) ? ( <> <MdAddCircle className="me-2" /> <div>Add</div> </> ) : ( <> <FaPencilAlt className="me-2" /> <div>Update</div> </> )} </div> )} </button> } onClose={onCloseModal} error={apiError} cleanError={() => setApiError(null)} > <div className="w-100"> <OrganizationForm ref={form} organization={props.organization} onSuccess={() => { if (!isUndefined(props.onSuccess)) { props.onSuccess(); } onCloseModal(); }} setIsSending={setIsSending} onAuthError={props.onAuthError} setApiError={setApiError} /> </div> </Modal> ); }; export default OrganizationModal;