Migrated short URL helper modal components to TS

src/short-urls/helpers/DeleteShortUrlModal.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { identity, pipe } from 'ramda';
+import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
+import { ShortUrlModalProps } from '../data';
+import { handleEventPreventingDefault, OptionalString } from '../../utils/utils';
+
+const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
+
+interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
+  shortUrlDeletion: ShortUrlDeletion;
+  deleteShortUrl: (shortCode: string, domain: OptionalString) => Promise<void>;
+  resetDeleteShortUrl: () => void;
+}
+
+const DeleteShortUrlModal = (
+  { shortUrl, toggle, isOpen, shortUrlDeletion, resetDeleteShortUrl, deleteShortUrl }: DeleteShortUrlModalConnectProps,
+) => {
+  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 = handleEventPreventingDefault(() => {
+    const { shortCode, domain } = shortUrl;
+
+    deleteShortUrl(shortCode, domain)
+      .then(toggle)
+      .catch(identity);
+  });
+
+  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>
+
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Insert the short code of the URL"
+            value={inputValue}
+            onChange={(e) => setInputValue(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={inputValue !== shortUrl.shortCode || shortUrlDeletion.loading}
+          >
+            {shortUrlDeletion.loading ? 'Deleting...' : 'Delete'}
+          </button>
+        </ModalFooter>
+      </form>
+    </Modal>
+  );
+};
+
+export default DeleteShortUrlModal;