React components

AsyncButton.js

import { useState } from 'react'
import { Button, Spinner } from 'react-bootstrap'

function AsyncButton({ onClick, children, externalLoading = false, ...props }) {
  const [internalLoading, setInternalLoading] = useState(false)

  const handleClick = async () => {
    setInternalLoading(true)
    await onClick?.()
    setInternalLoading(false)
  }

  return (
    <Button onClick={handleClick} disabled={internalLoading || externalLoading} {...props}>
      {internalLoading || externalLoading ? <Spinner animation="border" size="sm" /> : children}
    </Button>
  )
}

debouncer.js

function debouncer(fn, miliseconds) {
  let timer = null
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn(...args), miliseconds)
  }
}

FullModal.js

import { useState } from 'react'
import { Modal } from 'react-bootstrap'


function FullModal({ children, title, show, onClose }) {
  return (
    <Modal show={show} fullscreen={true} onHide={onClose}>
      <Modal.Header closeButton>
        <Modal.Title>{title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {children}
      </Modal.Body>
    </Modal>
  )
}


function useModal() {
  const [show, setShow] = useState(false)
  
  return [
    show,
    () => setShow(true),
    () => setShow(false),
  ]
}

// USANDO OS COMPONENTES
function App() {
  const [show1, open1, close1] = useModal()
  const [show2, open2, close2] = useModal()
  const [o, setO] = useState(null)

  return (
    <div>
      <button onClick={() => {
        open1()
        open2()
        setO({ nome: 'João' })        
      }}>
        Travar
      </button>

      <FullModal title='Modal 1' show={show1} onClose={close1}>
        <p>Conteúdo do modal 1</p>
        <div>
          Amigo estou aqui
        </div>
      </FullModal>

      <FullModal title='Modal 2' show={show2} onClose={close2}>
        {o && (
          <>
            <p>Conteúdo do modal 2</p>
            <div>
              Amigo estou aqui {o.nome}
            </div>
          </>
        )}
      </FullModal>
    </div>
  )
}