From d0b3edaa2f627c98d4feecea482ba92fcd0a7637 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 31 May 2020 10:23:13 +0200
Subject: [PATCH] Updated DeleteShortUrlModal to be a functional component

---
 src/short-urls/helpers/DeleteShortUrlModal.js | 132 +++++++++---------
 1 file changed, 64 insertions(+), 68 deletions(-)

diff --git a/src/short-urls/helpers/DeleteShortUrlModal.js b/src/short-urls/helpers/DeleteShortUrlModal.js
index 6121b9a2..a41df3f9 100644
--- a/src/short-urls/helpers/DeleteShortUrlModal.js
+++ b/src/short-urls/helpers/DeleteShortUrlModal.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { identity, pipe } from 'ramda';
@@ -7,21 +7,28 @@ import { shortUrlDeletionType } from '../reducers/shortUrlDeletion';
 
 const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
 
-export default class DeleteShortUrlModal extends React.Component {
-  static propTypes = {
-    shortUrl: shortUrlType,
-    toggle: PropTypes.func,
-    isOpen: PropTypes.bool,
-    shortUrlDeletion: shortUrlDeletionType,
-    deleteShortUrl: PropTypes.func,
-    resetDeleteShortUrl: PropTypes.func,
-  };
+const propTypes = {
+  shortUrl: shortUrlType,
+  toggle: PropTypes.func,
+  isOpen: PropTypes.bool,
+  shortUrlDeletion: shortUrlDeletionType,
+  deleteShortUrl: PropTypes.func,
+  resetDeleteShortUrl: PropTypes.func,
+};
 
-  state = { inputValue: '' };
-  handleDeleteUrl = (e) => {
+const DeleteShortUrlModal = ({ shortUrl, toggle, isOpen, shortUrlDeletion, resetDeleteShortUrl, deleteShortUrl }) => {
+  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();
 
-    const { deleteShortUrl, shortUrl, toggle } = this.props;
     const { shortCode, domain } = shortUrl;
 
     deleteShortUrl(shortCode, domain)
@@ -29,62 +36,51 @@ export default class DeleteShortUrlModal extends React.Component {
       .catch(identity);
   };
 
-  componentWillUnmount() {
-    const { resetDeleteShortUrl } = this.props;
+  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>
 
-    resetDeleteShortUrl();
-  }
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Insert the short code of the URL"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+          />
 
-  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);
+          {hasThresholdError && (
+            <div className="p-2 mt-2 bg-warning text-center">
+              {errorData.threshold && `This short URL has received more than ${errorData.threshold} visits, and therefore, it cannot be deleted.`}
+              {!errorData.threshold && 'This short URL has received too many visits, and therefore, it cannot be deleted.'}
+            </div>
+          )}
+          {hasErrorOtherThanThreshold && (
+            <div className="p-2 mt-2 bg-danger text-white text-center">
+              Something went wrong while deleting the URL :(
+            </div>
+          )}
+        </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>
+  );
+};
 
-    return (
-      <Modal isOpen={isOpen} toggle={close} centered>
-        <form onSubmit={this.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>
+DeleteShortUrlModal.propTypes = propTypes;
 
-            <input
-              type="text"
-              className="form-control"
-              placeholder="Insert the short code of the URL"
-              value={this.state.inputValue}
-              onChange={(e) => this.setState({ inputValue: e.target.value })}
-            />
-
-            {hasThresholdError && (
-              <div className="p-2 mt-2 bg-warning text-center">
-                {errorData.threshold && `This short URL has received more than ${errorData.threshold} visits, and therefore, it cannot be deleted.`}
-                {!errorData.threshold && 'This short URL has received too many visits, and therefore, it cannot be deleted.'}
-              </div>
-            )}
-            {hasErrorOtherThanThreshold && (
-              <div className="p-2 mt-2 bg-danger text-white text-center">
-                Something went wrong while deleting the URL :(
-              </div>
-            )}
-          </ModalBody>
-          <ModalFooter>
-            <button type="button" className="btn btn-link" onClick={close}>Cancel</button>
-            <button
-              type="submit"
-              className="btn btn-danger"
-              disabled={this.state.inputValue !== shortUrl.shortCode || shortUrlDeletion.loading}
-            >
-              {shortUrlDeletion.loading ? 'Deleting...' : 'Delete'}
-            </button>
-          </ModalFooter>
-        </form>
-      </Modal>
-    );
-  }
-}
+export default DeleteShortUrlModal;