2020-11-14 00:44:26 +03:00
|
|
|
import { useEffect, useState } from 'react';
|
2018-09-16 10:35:39 +03:00
|
|
|
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
|
2020-01-31 22:12:22 +03:00
|
|
|
import { identity, pipe } from 'ramda';
|
2020-08-26 21:37:36 +03:00
|
|
|
import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
|
|
|
|
import { ShortUrlModalProps } from '../data';
|
|
|
|
import { handleEventPreventingDefault, OptionalString } from '../../utils/utils';
|
2020-12-21 19:54:05 +03:00
|
|
|
import { Result } from '../../utils/Result';
|
2020-12-22 11:49:13 +03:00
|
|
|
import { isInvalidDeletionError } from '../../api/utils';
|
2020-12-21 23:19:02 +03:00
|
|
|
import { ShlinkApiError } from '../../api/ShlinkApiError';
|
2020-01-11 14:24:45 +03:00
|
|
|
|
2020-08-26 21:37:36 +03:00
|
|
|
interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
|
|
|
|
shortUrlDeletion: ShortUrlDeletion;
|
|
|
|
deleteShortUrl: (shortCode: string, domain: OptionalString) => Promise<void>;
|
|
|
|
resetDeleteShortUrl: () => void;
|
|
|
|
}
|
2020-05-31 11:23:13 +03:00
|
|
|
|
2020-08-26 21:37:36 +03:00
|
|
|
const DeleteShortUrlModal = (
|
|
|
|
{ shortUrl, toggle, isOpen, shortUrlDeletion, resetDeleteShortUrl, deleteShortUrl }: DeleteShortUrlModalConnectProps,
|
|
|
|
) => {
|
2020-05-31 11:23:13 +03:00
|
|
|
const [ inputValue, setInputValue ] = useState('');
|
2018-09-16 10:35:39 +03:00
|
|
|
|
2020-05-31 11:23:13 +03:00
|
|
|
useEffect(() => resetDeleteShortUrl, []);
|
|
|
|
|
|
|
|
const { error, errorData } = shortUrlDeletion;
|
|
|
|
const close = pipe(resetDeleteShortUrl, toggle);
|
2020-08-26 21:37:36 +03:00
|
|
|
const handleDeleteUrl = handleEventPreventingDefault(() => {
|
2020-02-08 11:57:18 +03:00
|
|
|
const { shortCode, domain } = shortUrl;
|
2018-09-16 11:47:17 +03:00
|
|
|
|
2020-02-08 11:57:18 +03:00
|
|
|
deleteShortUrl(shortCode, domain)
|
2020-01-31 22:12:22 +03:00
|
|
|
.then(toggle)
|
2018-09-16 11:47:17 +03:00
|
|
|
.catch(identity);
|
2020-08-26 21:37:36 +03:00
|
|
|
});
|
2018-09-16 11:47:17 +03:00
|
|
|
|
2020-05-31 11:23:13 +03:00
|
|
|
return (
|
|
|
|
<Modal isOpen={isOpen} toggle={close} centered>
|
|
|
|
<form onSubmit={handleDeleteUrl}>
|
|
|
|
<ModalHeader toggle={close}>
|
|
|
|
<span className="text-danger">Delete short URL</span>
|
|
|
|
</ModalHeader>
|
|
|
|
<ModalBody>
|
|
|
|
<p><b className="text-danger">Caution!</b> You are about to delete a short URL.</p>
|
|
|
|
<p>This action cannot be undone. Once you have deleted it, all the visits stats will be lost.</p>
|
2020-12-21 19:54:05 +03:00
|
|
|
<p>Write <b>{shortUrl.shortCode}</b> to confirm deletion.</p>
|
2018-09-16 10:35:39 +03:00
|
|
|
|
2020-05-31 11:23:13 +03:00
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
className="form-control"
|
2020-12-21 19:54:05 +03:00
|
|
|
placeholder={`Insert the short code (${shortUrl.shortCode})`}
|
2020-05-31 11:23:13 +03:00
|
|
|
value={inputValue}
|
|
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
|
|
/>
|
2018-09-16 10:35:39 +03:00
|
|
|
|
2020-12-21 23:19:02 +03:00
|
|
|
{error && (
|
|
|
|
<Result type={isInvalidDeletionError(errorData) ? 'warning' : 'error'} small className="mt-2">
|
|
|
|
<ShlinkApiError errorData={errorData} fallbackMessage="Something went wrong while deleting the URL :(" />
|
2020-12-21 19:54:05 +03:00
|
|
|
</Result>
|
2020-05-31 11:23:13 +03:00
|
|
|
)}
|
|
|
|
</ModalBody>
|
|
|
|
<ModalFooter>
|
|
|
|
<button type="button" className="btn btn-link" onClick={close}>Cancel</button>
|
|
|
|
<button
|
|
|
|
type="submit"
|
|
|
|
className="btn btn-danger"
|
|
|
|
disabled={inputValue !== shortUrl.shortCode || shortUrlDeletion.loading}
|
|
|
|
>
|
|
|
|
{shortUrlDeletion.loading ? 'Deleting...' : 'Delete'}
|
|
|
|
</button>
|
|
|
|
</ModalFooter>
|
|
|
|
</form>
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
};
|
2018-09-16 10:35:39 +03:00
|
|
|
|
2020-05-31 11:23:13 +03:00
|
|
|
export default DeleteShortUrlModal;
|