export function DeleteModal()

in frontend/src/components/deleteModal/index.js [13:89]
75 lines of code
4 McCabe index (conditional complexity)

export function DeleteModal({ id, name, type, className }: Object) {
  const navigate = useNavigate();
  const token = useSelector((state) => state.auth.get('token'));
  const [deleteStatus, setDeleteStatus] = useState(null);
  const [error, setErrorMessage] = useState(null);

  const deleteEntity = () => {
    setDeleteStatus('started');
    fetchLocalJSONAPI(`${type}/${id}/`, token, 'DELETE')
      .then((success) => {
        setDeleteStatus('success');
        if (type === 'notifications') {
          navigate(`/inbox`);
        } else {
          navigate(`/manage/${type}`);
        }
      })
      .catch((e) => {
        setDeleteStatus('failure');
        setErrorMessage(e.message);
      });
  };

  return (
    <Popup
      trigger={<DeleteButton className={`${className || ''} dib ml3`} />}
      modal
      closeOnDocumentClick
      onClose={() => {
        setDeleteStatus(null);
        setErrorMessage(null);
      }}
    >
      {(close) => (
        <div
          className="pv4"
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}
        >
          <div className="cf tc red">
            <AlertIcon height="50px" width="50px" />
          </div>
          <div className="cf blue-dark tc">
            {!deleteStatus && (
              <>
                <h3 className="barlow-condensed f3">
                  <FormattedMessage {...messages[`confirmDeleteTitle_${type}`]} />
                </h3>
                <div className="pt3">
                  <Button
                    className="bg-white blue-dark mr3"
                    onClick={() => {
                      setDeleteStatus(false);
                      close();
                    }}
                  >
                    <FormattedMessage {...messages.cancel} />
                  </Button>
                  <Button className="bg-primary white" onClick={() => deleteEntity()}>
                    <FormattedMessage {...messages.delete} />
                  </Button>
                </div>
              </>
            )}
            {deleteStatus === 'failure' && (
              <>
                <h3 className="barlow-condensed f3">
                  <FormattedMessage {...messages[`failure_${type}`]} />
                </h3>
                <p>{error}</p>
              </>
            )}
          </div>
        </div>
      )}