Migrated short URL helper modal components to TS

src/short-urls/helpers/DeleteShortUrlModal.tsx

@@ -1,40 +1,37 @@
 import React, { useEffect, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import PropTypes from 'prop-types';
 import { identity, pipe } from 'ramda';
-import { shortUrlType } from '../reducers/shortUrlsList';
-import { shortUrlDeletionType } from '../reducers/shortUrlDeletion';
+import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
+import { ShortUrlModalProps } from '../data';
+import { handleEventPreventingDefault, OptionalString } from '../../utils/utils';
 
 const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
 
-const propTypes = {
-  shortUrl: shortUrlType,
-  toggle: PropTypes.func,
-  isOpen: PropTypes.bool,
-  shortUrlDeletion: shortUrlDeletionType,
-  deleteShortUrl: PropTypes.func,
-  resetDeleteShortUrl: PropTypes.func,
-};
+interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
+  shortUrlDeletion: ShortUrlDeletion;
+  deleteShortUrl: (shortCode: string, domain: OptionalString) => Promise<void>;
+  resetDeleteShortUrl: () => void;
+}
 
-const DeleteShortUrlModal = ({ shortUrl, toggle, isOpen, shortUrlDeletion, resetDeleteShortUrl, deleteShortUrl }) => {
+const DeleteShortUrlModal = (
+  { shortUrl, toggle, isOpen, shortUrlDeletion, resetDeleteShortUrl, deleteShortUrl }: DeleteShortUrlModalConnectProps,
+) => {
   const [ inputValue, setInputValue ] = useState('');
 
   useEffect(() => resetDeleteShortUrl, []);
 
   const { error, errorData } = shortUrlDeletion;
-  const errorCode = error && errorData && (errorData.type || errorData.error);
+  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 handleDeleteUrl = handleEventPreventingDefault(() => {
     const { shortCode, domain } = shortUrl;
 
     deleteShortUrl(shortCode, domain)
       .then(toggle)
       .catch(identity);
-  };
+  });
 
   return (
     <Modal isOpen={isOpen} toggle={close} centered>
@@ -56,8 +53,8 @@ const DeleteShortUrlModal = ({ shortUrl, toggle, isOpen, shortUrlDeletion, reset
 
           {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.'}
+              {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 && (
@@ -81,6 +78,4 @@ const DeleteShortUrlModal = ({ shortUrl, toggle, isOpen, shortUrlDeletion, reset
   );
 };
 
-DeleteShortUrlModal.propTypes = propTypes;
-
 export default DeleteShortUrlModal;

src/short-urls/helpers/EditMetaModal.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, SyntheticEvent, useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
@@ -8,16 +8,10 @@ import { isEmpty, pipe } from 'ramda';
 import { ShortUrlMetaEdition } from '../reducers/shortUrlMeta';
 import DateInput from '../../utils/DateInput';
 import { formatIsoDate } from '../../utils/helpers/date';
-import { ShortUrl, ShortUrlMeta } from '../data';
-import { Nullable, OptionalString } from '../../utils/utils';
+import { ShortUrl, ShortUrlMeta, ShortUrlModalProps } from '../data';
+import { handleEventPreventingDefault, Nullable, OptionalString } from '../../utils/utils';
 
-export interface EditMetaModalProps {
-  shortUrl: ShortUrl;
-  isOpen: boolean;
-  toggle: () => void;
-}
-
-interface EditMetaModalConnectProps extends EditMetaModalProps {
+interface EditMetaModalConnectProps extends ShortUrlModalProps {
   shortUrlMeta: ShortUrlMetaEdition;
   resetShortUrlMeta: () => void;
   editShortUrlMeta: (shortCode: string, domain: OptionalString, meta: Nullable<ShortUrlMeta>) => Promise<void>;
@@ -54,7 +48,7 @@ const EditMetaModal = (
           <p>If any of the params is not met, the URL will behave as if it was an invalid short URL.</p>
         </UncontrolledTooltip>
       </ModalHeader>
-      <form onSubmit={pipe((e: SyntheticEvent) => e.preventDefault(), doEdit)}>
+      <form onSubmit={handleEventPreventingDefault(doEdit)}>
         <ModalBody>
           <FormGroup>
             <DateInput

src/short-urls/helpers/EditShortUrlModal.tsx

@@ -1,32 +1,28 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, Button } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
-import { shortUrlType } from '../reducers/shortUrlsList';
-import { ShortUrlEditionType } from '../reducers/shortUrlEdition';
-import { hasValue } from '../../utils/utils';
+import { ShortUrlEdition } from '../reducers/shortUrlEdition';
+import { handleEventPreventingDefault, hasValue, OptionalString } from '../../utils/utils';
+import { ShortUrlModalProps } from '../data';
 
-const propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  toggle: PropTypes.func.isRequired,
-  shortUrl: shortUrlType.isRequired,
-  shortUrlEdition: ShortUrlEditionType,
-  editShortUrl: PropTypes.func,
-};
+interface EditShortUrlModalProps extends ShortUrlModalProps {
+  shortUrlEdition: ShortUrlEdition;
+  editShortUrl: (shortUrl: string, domain: OptionalString, longUrl: string) => Promise<void>;
+}
 
-const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShortUrl }) => {
+const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShortUrl }: EditShortUrlModalProps) => {
   const { saving, error } = shortUrlEdition;
-  const url = shortUrl && (shortUrl.shortUrl || '');
+  const url = shortUrl?.shortUrl ?? '';
   const [ longUrl, setLongUrl ] = useState(shortUrl.longUrl);
 
-  const doEdit = () => editShortUrl(shortUrl.shortCode, shortUrl.domain, longUrl).then(toggle);
+  const doEdit = async () => editShortUrl(shortUrl.shortCode, shortUrl.domain, longUrl).then(toggle);
 
   return (
     <Modal isOpen={isOpen} toggle={toggle} centered>
       <ModalHeader toggle={toggle}>
         Edit long URL for <ExternalLink href={url} />
       </ModalHeader>
-      <form onSubmit={(e) => e.preventDefault() || doEdit()}>
+      <form onSubmit={handleEventPreventingDefault(doEdit)}>
         <ModalBody>
           <FormGroup className="mb-0">
             <Input
@@ -52,6 +48,4 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
   );
 };
 
-EditShortUrlModal.propTypes = propTypes;
-
 export default EditShortUrlModal;