forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-19 05:53:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated DeleteShortUrlModal to be a functional component

Browse Source
This commit is contained in:
Alejandro Celaya
2020-05-31 10:23:13 +02:00
parent 2268b85ade
commit d0b3edaa2f
1 changed files with 64 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/short-urls/helpers/DeleteShortUrlModal.js
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { useEffect, useState } from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { identity, pipe } from 'ramda'; import { identity, pipe } from 'ramda';
@@ -7,8 +7,7 @@ import { shortUrlDeletionType } from '../reducers/shortUrlDeletion';
const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION'; const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
export default class DeleteShortUrlModal extends React.Component { const propTypes = {
static propTypes = {
shortUrl: shortUrlType, shortUrl: shortUrlType,
toggle: PropTypes.func, toggle: PropTypes.func,
isOpen: PropTypes.bool, isOpen: PropTypes.bool,
@@ -17,11 +16,19 @@ export default class DeleteShortUrlModal extends React.Component {
resetDeleteShortUrl: PropTypes.func, resetDeleteShortUrl: PropTypes.func,
}; };
state = { inputValue: '' }; const DeleteShortUrlModal = ({ shortUrl, toggle, isOpen, shortUrlDeletion, resetDeleteShortUrl, deleteShortUrl }) => {
handleDeleteUrl = (e) => { const [ inputValue, setInputValue ] = useState('');
useEffect(() => resetDeleteShortUrl, []);
const { error, errorData } = shortUrlDeletion;
const errorCode = error && (errorData.type || errorData.error);
const hasThresholdError = errorCode === THRESHOLD_REACHED;
const hasErrorOtherThanThreshold = error && errorCode !== THRESHOLD_REACHED;
const close = pipe(resetDeleteShortUrl, toggle);
const handleDeleteUrl = (e) => {
e.preventDefault(); e.preventDefault();
const { deleteShortUrl, shortUrl, toggle } = this.props;
const { shortCode, domain } = shortUrl; const { shortCode, domain } = shortUrl;
deleteShortUrl(shortCode, domain) deleteShortUrl(shortCode, domain)
@@ -29,23 +36,9 @@ export default class DeleteShortUrlModal extends React.Component {
.catch(identity); .catch(identity);
}; };
componentWillUnmount() {
const { resetDeleteShortUrl } = this.props;
resetDeleteShortUrl();
}
render() {
const { shortUrl, toggle, isOpen, shortUrlDeletion, resetDeleteShortUrl } = this.props;
const { error, errorData } = shortUrlDeletion;
const errorCode = error && (errorData.type || errorData.error);
const hasThresholdError = errorCode === THRESHOLD_REACHED;
const hasErrorOtherThanThreshold = error && errorCode !== THRESHOLD_REACHED;
const close = pipe(resetDeleteShortUrl, toggle);
return ( return (
<Modal isOpen={isOpen} toggle={close} centered> <Modal isOpen={isOpen} toggle={close} centered>
<form onSubmit={this.handleDeleteUrl}> <form onSubmit={handleDeleteUrl}>
<ModalHeader toggle={close}> <ModalHeader toggle={close}>
<span className="text-danger">Delete short URL</span> <span className="text-danger">Delete short URL</span>
</ModalHeader> </ModalHeader>
@@ -57,8 +50,8 @@ export default class DeleteShortUrlModal extends React.Component {
type="text" type="text"
className="form-control" className="form-control"
placeholder="Insert the short code of the URL" placeholder="Insert the short code of the URL"
value={this.state.inputValue} value={inputValue}
onChange={(e) => this.setState({ inputValue: e.target.value })} onChange={(e) => setInputValue(e.target.value)}
/> />
{hasThresholdError && ( {hasThresholdError && (
@@ -78,7 +71,7 @@ export default class DeleteShortUrlModal extends React.Component {
<button <button
type="submit" type="submit"
className="btn btn-danger" className="btn btn-danger"
disabled={this.state.inputValue !== shortUrl.shortCode || shortUrlDeletion.loading} disabled={inputValue !== shortUrl.shortCode || shortUrlDeletion.loading}
> >
{shortUrlDeletion.loading ? 'Deleting...' : 'Delete'} {shortUrlDeletion.loading ? 'Deleting...' : 'Delete'}
</button> </button>
@@ -86,5 +79,8 @@ export default class DeleteShortUrlModal extends React.Component {
</form> </form>
</Modal> </Modal>
); );
} };
}
DeleteShortUrlModal.propTypes = propTypes;
export default DeleteShortUrlModal;