Finished migrating ll short-url helpers to TS

src/servers/data/index.ts

@@ -27,14 +27,14 @@ export type SelectedServer = RegularServer | NotFoundServer | null;
 
 export type ServersMap = Record<string, ServerWithId>;
 
-export const hasServerData = (server: ServerData | NotFoundServer | null): server is ServerData =>
+export const hasServerData = (server: SelectedServer | ServerData): server is ServerData =>
   !!(server as ServerData)?.url && !!(server as ServerData)?.apiKey;
 
-export const isReachableServer = (server: SelectedServer): server is ReachableServer =>
-  !!server?.hasOwnProperty('printableVersion');
-
 export const isServerWithId = (server: SelectedServer | ServerWithId): server is ServerWithId =>
   !!server?.hasOwnProperty('id');
 
+export const isReachableServer = (server: SelectedServer): server is ReachableServer =>
+  !!server?.hasOwnProperty('printableVersion');
+
 export const isNotFoundServer = (server: SelectedServer): server is NotFoundServer =>
   !!server?.hasOwnProperty('serverNotFound');

src/servers/prop-types/index.js

@@ -14,6 +14,7 @@ const notFoundServerType = PropTypes.shape({
   serverNotFound: PropTypes.bool.isRequired,
 });
 
+/** @deprecated Use SelectedServer type instead */
 export const serverType = PropTypes.oneOfType([
   regularServerType,
   notFoundServerType,

src/short-urls/data/index.ts

@@ -16,6 +16,7 @@ export interface ShortUrl {
   shortCode: string;
   shortUrl: string;
   longUrl: string;
+  dateCreated: string;
   visitsCount: number;
   meta: Required<Nullable<ShortUrlMeta>>;
   tags: string[];

src/short-urls/helpers/CreateShortUrlResult.js

@@ -1,67 +0,0 @@
-import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { isNil } from 'ramda';
-import React, { useEffect } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { Card, CardBody, Tooltip } from 'reactstrap';
-import PropTypes from 'prop-types';
-import { createShortUrlResultType } from '../reducers/shortUrlCreation';
-import './CreateShortUrlResult.scss';
-
-const propTypes = {
-  resetCreateShortUrl: PropTypes.func,
-  error: PropTypes.bool,
-  result: createShortUrlResultType,
-};
-
-const CreateShortUrlResult = (useStateFlagTimeout) => {
-  const CreateShortUrlResultComp = ({ error, result, resetCreateShortUrl }) => {
-    const [ showCopyTooltip, setShowCopyTooltip ] = useStateFlagTimeout();
-
-    useEffect(() => {
-      resetCreateShortUrl();
-    }, []);
-
-    if (error) {
-      return (
-        <Card body color="danger" inverse className="bg-danger mt-3">
-          An error occurred while creating the URL :(
-        </Card>
-      );
-    }
-
-    if (isNil(result)) {
-      return null;
-    }
-
-    const { shortUrl } = result;
-
-    return (
-      <Card inverse className="bg-main mt-3">
-        <CardBody>
-          <b>Great!</b> The short URL is <b>{shortUrl}</b>
-
-          <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
-            <button
-              className="btn btn-light btn-sm create-short-url-result__copy-btn"
-              id="copyBtn"
-              type="button"
-            >
-              <FontAwesomeIcon icon={copyIcon} /> Copy
-            </button>
-          </CopyToClipboard>
-
-          <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
-            Copied!
-          </Tooltip>
-        </CardBody>
-      </Card>
-    );
-  };
-
-  CreateShortUrlResultComp.propTypes = propTypes;
-
-  return CreateShortUrlResultComp;
-};
-
-export default CreateShortUrlResult;

src/short-urls/helpers/CreateShortUrlResult.tsx

@@ -0,0 +1,61 @@
+import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { isNil } from 'ramda';
+import React, { useEffect } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { Card, CardBody, Tooltip } from 'reactstrap';
+import { ShortUrlCreation } from '../reducers/shortUrlCreation';
+import './CreateShortUrlResult.scss';
+import { StateFlagTimeout } from '../../utils/helpers/hooks';
+
+interface CreateShortUrlResultProps extends ShortUrlCreation {
+  resetCreateShortUrl: Function;
+}
+
+const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
+  { error, result, resetCreateShortUrl }: CreateShortUrlResultProps,
+) => {
+  const [ showCopyTooltip, setShowCopyTooltip ] = useStateFlagTimeout();
+
+  useEffect(() => {
+    resetCreateShortUrl();
+  }, []);
+
+  if (error) {
+    return (
+      <Card body color="danger" inverse className="bg-danger mt-3">
+        An error occurred while creating the URL :(
+      </Card>
+    );
+  }
+
+  if (isNil(result)) {
+    return null;
+  }
+
+  const { shortUrl } = result;
+
+  return (
+    <Card inverse className="bg-main mt-3">
+      <CardBody>
+        <b>Great!</b> The short URL is <b>{shortUrl}</b>
+
+        <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
+          <button
+            className="btn btn-light btn-sm create-short-url-result__copy-btn"
+            id="copyBtn"
+            type="button"
+          >
+            <FontAwesomeIcon icon={copyIcon} /> Copy
+          </button>
+        </CopyToClipboard>
+
+        <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
+          Copied!
+        </Tooltip>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default CreateShortUrlResult;

src/short-urls/helpers/EditTagsModal.js

@@ -1,56 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import PropTypes from 'prop-types';
-import { ExternalLink } from 'react-external-link';
-import { shortUrlTagsType } from '../reducers/shortUrlTags';
-import { shortUrlType } from '../reducers/shortUrlsList';
-
-const propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  toggle: PropTypes.func.isRequired,
-  shortUrl: shortUrlType.isRequired,
-  shortUrlTags: shortUrlTagsType,
-  editShortUrlTags: PropTypes.func,
-  resetShortUrlsTags: PropTypes.func,
-};
-
-const EditTagsModal = (TagsSelector) => {
-  const EditTagsModalComp = ({ isOpen, toggle, shortUrl, shortUrlTags, editShortUrlTags, resetShortUrlsTags }) => {
-    const [ selectedTags, setSelectedTags ] = useState(shortUrl.tags || []);
-
-    useEffect(() => resetShortUrlsTags, []);
-
-    const url = shortUrl && (shortUrl.shortUrl || '');
-    const saveTags = () => editShortUrlTags(shortUrl.shortCode, shortUrl.domain, selectedTags)
-      .then(toggle)
-      .catch(() => {});
-
-    return (
-      <Modal isOpen={isOpen} toggle={toggle} centered>
-        <ModalHeader toggle={toggle}>
-          Edit tags for <ExternalLink href={url} />
-        </ModalHeader>
-        <ModalBody>
-          <TagsSelector tags={selectedTags} onChange={(tags) => setSelectedTags(tags)} />
-          {shortUrlTags.error && (
-            <div className="p-2 mt-2 bg-danger text-white text-center">
-              Something went wrong while saving the tags :(
-            </div>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          <button className="btn btn-link" onClick={toggle}>Cancel</button>
-          <button className="btn btn-primary" type="button" disabled={shortUrlTags.saving} onClick={saveTags}>
-            {shortUrlTags.saving ? 'Saving tags...' : 'Save tags'}
-          </button>
-        </ModalFooter>
-      </Modal>
-    );
-  };
-
-  EditTagsModalComp.propTypes = propTypes;
-
-  return EditTagsModalComp;
-};
-
-export default EditTagsModal;

src/short-urls/helpers/EditTagsModal.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useEffect, useState } from 'react';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { ExternalLink } from 'react-external-link';
+import { ShortUrlTags } from '../reducers/shortUrlTags';
+import { ShortUrlModalProps } from '../data';
+import { OptionalString } from '../../utils/utils';
+
+interface EditTagsModalProps extends ShortUrlModalProps {
+  shortUrlTags: ShortUrlTags;
+  editShortUrlTags: (shortCode: string, domain: OptionalString, tags: string[]) => Promise<void>;
+  resetShortUrlsTags: () => void;
+}
+
+const EditTagsModal = (TagsSelector: FC<any>) => ( // TODO Use TagsSelector type when available
+  { isOpen, toggle, shortUrl, shortUrlTags, editShortUrlTags, resetShortUrlsTags }: EditTagsModalProps,
+) => {
+  const [ selectedTags, setSelectedTags ] = useState<string[]>(shortUrl.tags || []);
+
+  useEffect(() => resetShortUrlsTags, []);
+
+  const url = shortUrl?.shortUrl ?? '';
+  const saveTags = async () => editShortUrlTags(shortUrl.shortCode, shortUrl.domain, selectedTags)
+    .then(toggle)
+    .catch(() => {});
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} centered>
+      <ModalHeader toggle={toggle}>
+        Edit tags for <ExternalLink href={url} />
+      </ModalHeader>
+      <ModalBody>
+        <TagsSelector tags={selectedTags} onChange={setSelectedTags} />
+        {shortUrlTags.error && (
+          <div className="p-2 mt-2 bg-danger text-white text-center">
+            Something went wrong while saving the tags :(
+          </div>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <button className="btn btn-link" onClick={toggle}>Cancel</button>
+        <button className="btn btn-primary" type="button" disabled={shortUrlTags.saving} onClick={saveTags}>
+          {shortUrlTags.saving ? 'Saving tags...' : 'Save tags'}
+        </button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default EditTagsModal;

src/short-urls/helpers/PreviewModal.tsx

@@ -1,29 +1,21 @@
 import React from 'react';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
-import PropTypes from 'prop-types';
 import { ExternalLink } from 'react-external-link';
+import { ShortUrlModalProps } from '../data';
 import './PreviewModal.scss';
 
-const propTypes = {
-  url: PropTypes.string,
-  toggle: PropTypes.func,
-  isOpen: PropTypes.bool,
-};
-
-const PreviewModal = ({ url, toggle, isOpen }) => (
+const PreviewModal = ({ shortUrl: { shortUrl }, toggle, isOpen }: ShortUrlModalProps) => (
   <Modal isOpen={isOpen} toggle={toggle} size="lg">
     <ModalHeader toggle={toggle}>
-      Preview for <ExternalLink href={url}>{url}</ExternalLink>
+      Preview for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink>
     </ModalHeader>
     <ModalBody>
       <div className="text-center">
         <p className="preview-modal__loader">Loading...</p>
-        <img src={`${url}/preview`} className="preview-modal__img" alt="Preview" />
+        <img src={`${shortUrl}/preview`} className="preview-modal__img" alt="Preview" />
       </div>
     </ModalBody>
   </Modal>
 );
 
-PreviewModal.propTypes = propTypes;
-
 export default PreviewModal;

src/short-urls/helpers/QrCodeModal.tsx

@@ -1,28 +1,20 @@
 import React from 'react';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
-import PropTypes from 'prop-types';
 import { ExternalLink } from 'react-external-link';
+import { ShortUrlModalProps } from '../data';
 import './QrCodeModal.scss';
 
-const propTypes = {
-  url: PropTypes.string,
-  toggle: PropTypes.func,
-  isOpen: PropTypes.bool,
-};
-
-const QrCodeModal = ({ url, toggle, isOpen }) => (
+const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen }: ShortUrlModalProps) => (
   <Modal isOpen={isOpen} toggle={toggle} centered>
     <ModalHeader toggle={toggle}>
-      QR code for <ExternalLink href={url}>{url}</ExternalLink>
+      QR code for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink>
     </ModalHeader>
     <ModalBody>
       <div className="text-center">
-        <img src={`${url}/qr-code`} className="qr-code-modal__img" alt="QR code" />
+        <img src={`${shortUrl}/qr-code`} className="qr-code-modal__img" alt="QR code" />
       </div>
     </ModalBody>
   </Modal>
 );
 
-QrCodeModal.propTypes = propTypes;
-
 export default QrCodeModal;

src/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -1,24 +1,19 @@
 import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
 import classNames from 'classnames';
-import { serverType } from '../../servers/prop-types';
 import { prettify } from '../../utils/helpers/numbers';
-import { shortUrlType } from '../reducers/shortUrlsList';
-import VisitStatsLink from './VisitStatsLink';
+import VisitStatsLink, { VisitStatsLinkProps } from './VisitStatsLink';
 import './ShortUrlVisitsCount.scss';
 
-const propTypes = {
-  visitsCount: PropTypes.number.isRequired,
-  shortUrl: shortUrlType,
-  selectedServer: serverType,
-  active: PropTypes.bool,
-};
+export interface ShortUrlVisitsCount extends VisitStatsLinkProps {
+  visitsCount: number;
+  active?: boolean;
+}
 
-const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = false }) => {
-  const maxVisits = shortUrl && shortUrl.meta && shortUrl.meta.maxVisits;
+const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = false }: ShortUrlVisitsCount) => {
+  const maxVisits = shortUrl?.meta?.maxVisits;
   const visitsLink = (
     <VisitStatsLink selectedServer={selectedServer} shortUrl={shortUrl}>
       <strong
@@ -34,7 +29,7 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
   }
 
   const prettifiedMaxVisits = prettify(maxVisits);
-  const tooltipRef = useRef();
+  const tooltipRef = useRef<HTMLElement | null>();
 
   return (
     <React.Fragment>
@@ -52,13 +47,11 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
           </sup>
         </small>
       </span>
-      <UncontrolledTooltip target={() => tooltipRef.current} placement="bottom">
+      <UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="bottom">
         This short URL will not accept more than <b>{prettifiedMaxVisits}</b> visits.
       </UncontrolledTooltip>
     </React.Fragment>
   );
 };
 
-ShortUrlVisitsCount.propTypes = propTypes;
-
 export default ShortUrlVisitsCount;

src/short-urls/helpers/ShortUrlsRow.js

@@ -1,98 +0,0 @@
-import { isEmpty } from 'ramda';
-import React, { useEffect, useRef } from 'react';
-import Moment from 'react-moment';
-import PropTypes from 'prop-types';
-import { ExternalLink } from 'react-external-link';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams';
-import { serverType } from '../../servers/prop-types';
-import { shortUrlType } from '../reducers/shortUrlsList';
-import Tag from '../../tags/helpers/Tag';
-import ShortUrlVisitsCount from './ShortUrlVisitsCount';
-import './ShortUrlsRow.scss';
-
-const propTypes = {
-  refreshList: PropTypes.func,
-  shortUrlsListParams: shortUrlsListParamsType,
-  selectedServer: serverType,
-  shortUrl: shortUrlType,
-};
-
-const ShortUrlsRow = (
-  ShortUrlsRowMenu,
-  colorGenerator,
-  useStateFlagTimeout,
-) => {
-  const ShortUrlsRowComp = ({ shortUrl, selectedServer, refreshList, shortUrlsListParams }) => {
-    const [ copiedToClipboard, setCopiedToClipboard ] = useStateFlagTimeout();
-    const [ active, setActive ] = useStateFlagTimeout(false, 500);
-    const isFirstRun = useRef(true);
-
-    const renderTags = (tags) => {
-      if (isEmpty(tags)) {
-        return <i className="indivisible"><small>No tags</small></i>;
-      }
-
-      const selectedTags = shortUrlsListParams.tags || [];
-
-      return tags.map((tag) => (
-        <Tag
-          colorGenerator={colorGenerator}
-          key={tag}
-          text={tag}
-          onClick={() => refreshList({ tags: [ ...selectedTags, tag ] })}
-        />
-      ));
-    };
-
-    useEffect(() => {
-      if (isFirstRun.current) {
-        isFirstRun.current = false;
-      } else {
-        setActive(true);
-      }
-    }, [ shortUrl.visitsCount ]);
-
-    return (
-      <tr className="short-urls-row">
-        <td className="indivisible short-urls-row__cell" data-th="Created at: ">
-          <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
-        </td>
-        <td className="short-urls-row__cell" data-th="Short URL: ">
-          <span className="indivisible short-urls-row__cell--relative">
-            <ExternalLink href={shortUrl.shortUrl} />
-            <CopyToClipboard text={shortUrl.shortUrl} onCopy={setCopiedToClipboard}>
-              <FontAwesomeIcon icon={copyIcon} className="ml-2 short-urls-row__copy-btn" />
-            </CopyToClipboard>
-            <span className="badge badge-warning short-urls-row__copy-hint" hidden={!copiedToClipboard}>
-              Copied short URL!
-            </span>
-          </span>
-        </td>
-        <td className="short-urls-row__cell short-urls-row__cell--break" data-th="Long URL: ">
-          <ExternalLink href={shortUrl.longUrl} />
-        </td>
-        <td className="short-urls-row__cell" data-th="Tags: ">{renderTags(shortUrl.tags)}</td>
-        <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
-          <ShortUrlVisitsCount
-            visitsCount={shortUrl.visitsCount}
-            shortUrl={shortUrl}
-            selectedServer={selectedServer}
-            active={active}
-          />
-        </td>
-        <td className="short-urls-row__cell">
-          <ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
-        </td>
-      </tr>
-    );
-  };
-
-  ShortUrlsRowComp.propTypes = propTypes;
-
-  return ShortUrlsRowComp;
-};
-
-export default ShortUrlsRow;

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -0,0 +1,94 @@
+import { isEmpty } from 'ramda';
+import React, { FC, useEffect, useRef } from 'react';
+import Moment from 'react-moment';
+import { ExternalLink } from 'react-external-link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { ShortUrlsListParams } from '../reducers/shortUrlsListParams';
+import ColorGenerator from '../../utils/services/ColorGenerator';
+import { StateFlagTimeout } from '../../utils/helpers/hooks';
+import Tag from '../../tags/helpers/Tag';
+import { SelectedServer } from '../../servers/data';
+import { ShortUrl } from '../data';
+import ShortUrlVisitsCount from './ShortUrlVisitsCount';
+import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
+import './ShortUrlsRow.scss';
+
+export interface ShortUrlsRowProps {
+  refreshList: Function;
+  shortUrlsListParams: ShortUrlsListParams;
+  selectedServer: SelectedServer;
+  shortUrl: ShortUrl;
+}
+
+const ShortUrlsRow = (
+  ShortUrlsRowMenu: FC<ShortUrlsRowMenuProps>,
+  colorGenerator: ColorGenerator,
+  useStateFlagTimeout: StateFlagTimeout,
+) => ({ shortUrl, selectedServer, refreshList, shortUrlsListParams }: ShortUrlsRowProps) => {
+  const [ copiedToClipboard, setCopiedToClipboard ] = useStateFlagTimeout();
+  const [ active, setActive ] = useStateFlagTimeout(false, 500);
+  const isFirstRun = useRef(true);
+
+  const renderTags = (tags: string[]) => {
+    if (isEmpty(tags)) {
+      return <i className="indivisible"><small>No tags</small></i>;
+    }
+
+    const selectedTags = shortUrlsListParams.tags ?? [];
+
+    return tags.map((tag) => (
+      <Tag
+        colorGenerator={colorGenerator}
+        key={tag}
+        text={tag}
+        onClick={() => refreshList({ tags: [ ...selectedTags, tag ] })}
+      />
+    ));
+  };
+
+  useEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+    } else {
+      setActive();
+    }
+  }, [ shortUrl.visitsCount ]);
+
+  return (
+    <tr className="short-urls-row">
+      <td className="indivisible short-urls-row__cell" data-th="Created at: ">
+        <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
+      </td>
+      <td className="short-urls-row__cell" data-th="Short URL: ">
+        <span className="indivisible short-urls-row__cell--relative">
+          <ExternalLink href={shortUrl.shortUrl} />
+          <CopyToClipboard text={shortUrl.shortUrl} onCopy={setCopiedToClipboard}>
+            <FontAwesomeIcon icon={copyIcon} className="ml-2 short-urls-row__copy-btn" />
+          </CopyToClipboard>
+          <span className="badge badge-warning short-urls-row__copy-hint" hidden={!copiedToClipboard}>
+            Copied short URL!
+          </span>
+        </span>
+      </td>
+      <td className="short-urls-row__cell short-urls-row__cell--break" data-th="Long URL: ">
+        <ExternalLink href={shortUrl.longUrl} />
+      </td>
+      <td className="short-urls-row__cell" data-th="Tags: ">{renderTags(shortUrl.tags)}</td>
+      <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
+        <ShortUrlVisitsCount
+          visitsCount={shortUrl.visitsCount}
+          shortUrl={shortUrl}
+          selectedServer={selectedServer}
+          active={active}
+        />
+      </td>
+      <td className="short-urls-row__cell">
+        <ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
+      </td>
+    </tr>
+  );
+};
+
+export default ShortUrlsRow;

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -1,95 +0,0 @@
-import { faImage as pictureIcon } from '@fortawesome/free-regular-svg-icons';
-import {
-  faTags as tagsIcon,
-  faChartPie as pieChartIcon,
-  faEllipsisV as menuIcon,
-  faQrcode as qrIcon,
-  faMinusCircle as deleteIcon,
-  faEdit as editIcon,
-  faLink as linkIcon,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
-import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
-import { serverType } from '../../servers/prop-types';
-import { shortUrlType } from '../reducers/shortUrlsList';
-import { useToggle } from '../../utils/helpers/hooks';
-import PreviewModal from './PreviewModal';
-import QrCodeModal from './QrCodeModal';
-import VisitStatsLink from './VisitStatsLink';
-import './ShortUrlsRowMenu.scss';
-
-const propTypes = {
-  selectedServer: serverType,
-  shortUrl: shortUrlType,
-};
-
-const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal, EditMetaModal, EditShortUrlModal, ForServerVersion) => {
-  const ShortUrlsRowMenuComp = ({ shortUrl, selectedServer }) => {
-    const [ isOpen, toggle ] = useToggle();
-    const [ isQrModalOpen, toggleQrCode ] = useToggle();
-    const [ isPreviewModalOpen, togglePreview ] = useToggle();
-    const [ isTagsModalOpen, toggleTags ] = useToggle();
-    const [ isMetaModalOpen, toggleMeta ] = useToggle();
-    const [ isDeleteModalOpen, toggleDelete ] = useToggle();
-    const [ isEditModalOpen, toggleEdit ] = useToggle();
-    const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
-
-    return (
-      <ButtonDropdown toggle={toggle} isOpen={isOpen}>
-        <DropdownToggle size="sm" caret outline className="short-urls-row-menu__dropdown-toggle">
-          &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
-        </DropdownToggle>
-        <DropdownMenu right>
-          <DropdownItem tag={VisitStatsLink} selectedServer={selectedServer} shortUrl={shortUrl}>
-            <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
-          </DropdownItem>
-
-          <DropdownItem onClick={toggleTags}>
-            <FontAwesomeIcon icon={tagsIcon} fixedWidth /> Edit tags
-          </DropdownItem>
-          <EditTagsModal shortUrl={shortUrl} isOpen={isTagsModalOpen} toggle={toggleTags} />
-
-          <ForServerVersion minVersion="1.18.0">
-            <DropdownItem onClick={toggleMeta}>
-              <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit metadata
-            </DropdownItem>
-            <EditMetaModal shortUrl={shortUrl} isOpen={isMetaModalOpen} toggle={toggleMeta} />
-          </ForServerVersion>
-
-          <ForServerVersion minVersion="2.1.0">
-            <DropdownItem onClick={toggleEdit}>
-              <FontAwesomeIcon icon={linkIcon} fixedWidth /> Edit long URL
-            </DropdownItem>
-            <EditShortUrlModal shortUrl={shortUrl} isOpen={isEditModalOpen} toggle={toggleEdit} />
-          </ForServerVersion>
-
-          <DropdownItem onClick={toggleQrCode}>
-            <FontAwesomeIcon icon={qrIcon} fixedWidth /> QR code
-          </DropdownItem>
-          <QrCodeModal url={completeShortUrl} isOpen={isQrModalOpen} toggle={toggleQrCode} />
-
-          <ForServerVersion maxVersion="1.x">
-            <DropdownItem onClick={togglePreview}>
-              <FontAwesomeIcon icon={pictureIcon} fixedWidth /> Preview
-            </DropdownItem>
-            <PreviewModal url={completeShortUrl} isOpen={isPreviewModalOpen} toggle={togglePreview} />
-          </ForServerVersion>
-
-          <DropdownItem divider />
-
-          <DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}>
-            <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Delete short URL
-          </DropdownItem>
-          <DeleteShortUrlModal shortUrl={shortUrl} isOpen={isDeleteModalOpen} toggle={toggleDelete} />
-        </DropdownMenu>
-      </ButtonDropdown>
-    );
-  };
-
-  ShortUrlsRowMenuComp.propTypes = propTypes;
-
-  return ShortUrlsRowMenuComp;
-};
-
-export default ShortUrlsRowMenu;

src/short-urls/helpers/ShortUrlsRowMenu.tsx

@@ -0,0 +1,96 @@
+import { faImage as pictureIcon } from '@fortawesome/free-regular-svg-icons';
+import {
+  faTags as tagsIcon,
+  faChartPie as pieChartIcon,
+  faEllipsisV as menuIcon,
+  faQrcode as qrIcon,
+  faMinusCircle as deleteIcon,
+  faEdit as editIcon,
+  faLink as linkIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { FC } from 'react';
+import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+import { useToggle } from '../../utils/helpers/hooks';
+import { ShortUrl, ShortUrlModalProps } from '../data';
+import { Versions } from '../../utils/helpers/version';
+import { SelectedServer } from '../../servers/data';
+import PreviewModal from './PreviewModal';
+import QrCodeModal from './QrCodeModal';
+import VisitStatsLink from './VisitStatsLink';
+import './ShortUrlsRowMenu.scss';
+
+export interface ShortUrlsRowMenuProps {
+  selectedServer: SelectedServer;
+  shortUrl: ShortUrl;
+}
+type ShortUrlModal = FC<ShortUrlModalProps>;
+
+const ShortUrlsRowMenu = (
+  DeleteShortUrlModal: ShortUrlModal,
+  EditTagsModal: ShortUrlModal,
+  EditMetaModal: ShortUrlModal,
+  EditShortUrlModal: ShortUrlModal,
+  ForServerVersion: FC<Versions>,
+) => ({ shortUrl, selectedServer }: ShortUrlsRowMenuProps) => {
+  const [ isOpen, toggle ] = useToggle();
+  const [ isQrModalOpen, toggleQrCode ] = useToggle();
+  const [ isPreviewModalOpen, togglePreview ] = useToggle();
+  const [ isTagsModalOpen, toggleTags ] = useToggle();
+  const [ isMetaModalOpen, toggleMeta ] = useToggle();
+  const [ isDeleteModalOpen, toggleDelete ] = useToggle();
+  const [ isEditModalOpen, toggleEdit ] = useToggle();
+
+  return (
+    <ButtonDropdown toggle={toggle} isOpen={isOpen}>
+      <DropdownToggle size="sm" caret outline className="short-urls-row-menu__dropdown-toggle">
+        &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
+      </DropdownToggle>
+      <DropdownMenu right>
+        <DropdownItem tag={VisitStatsLink} selectedServer={selectedServer} shortUrl={shortUrl}>
+          <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
+        </DropdownItem>
+
+        <DropdownItem onClick={toggleTags}>
+          <FontAwesomeIcon icon={tagsIcon} fixedWidth /> Edit tags
+        </DropdownItem>
+        <EditTagsModal shortUrl={shortUrl} isOpen={isTagsModalOpen} toggle={toggleTags} />
+
+        <ForServerVersion minVersion="1.18.0">
+          <DropdownItem onClick={toggleMeta}>
+            <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit metadata
+          </DropdownItem>
+          <EditMetaModal shortUrl={shortUrl} isOpen={isMetaModalOpen} toggle={toggleMeta} />
+        </ForServerVersion>
+
+        <ForServerVersion minVersion="2.1.0">
+          <DropdownItem onClick={toggleEdit}>
+            <FontAwesomeIcon icon={linkIcon} fixedWidth /> Edit long URL
+          </DropdownItem>
+          <EditShortUrlModal shortUrl={shortUrl} isOpen={isEditModalOpen} toggle={toggleEdit} />
+        </ForServerVersion>
+
+        <DropdownItem onClick={toggleQrCode}>
+          <FontAwesomeIcon icon={qrIcon} fixedWidth /> QR code
+        </DropdownItem>
+        <QrCodeModal shortUrl={shortUrl} isOpen={isQrModalOpen} toggle={toggleQrCode} />
+
+        <ForServerVersion maxVersion="1.x">
+          <DropdownItem onClick={togglePreview}>
+            <FontAwesomeIcon icon={pictureIcon} fixedWidth /> Preview
+          </DropdownItem>
+          <PreviewModal shortUrl={shortUrl} isOpen={isPreviewModalOpen} toggle={togglePreview} />
+        </ForServerVersion>
+
+        <DropdownItem divider />
+
+        <DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}>
+          <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Delete short URL
+        </DropdownItem>
+        <DeleteShortUrlModal shortUrl={shortUrl} isOpen={isDeleteModalOpen} toggle={toggleDelete} />
+      </DropdownMenu>
+    </ButtonDropdown>
+  );
+};
+
+export default ShortUrlsRowMenu;

src/short-urls/helpers/VisitStatsLink.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { serverType } from '../../servers/prop-types';
-import { shortUrlType } from '../reducers/shortUrlsList';
-
-const propTypes = {
-  shortUrl: shortUrlType,
-  selectedServer: serverType,
-  children: PropTypes.node.isRequired,
-};
-
-const buildVisitsUrl = ({ id }, { shortCode, domain }) => {
-  const query = domain ? `?domain=${domain}` : '';
-
-  return `/server/${id}/short-code/${shortCode}/visits${query}`;
-};
-
-const VisitStatsLink = ({ selectedServer, shortUrl, children, ...rest }) => {
-  if (!selectedServer || !shortUrl) {
-    return <span {...rest}>{children}</span>;
-  }
-
-  return <Link to={buildVisitsUrl(selectedServer, shortUrl)} {...rest}>{children}</Link>;
-};
-
-VisitStatsLink.propTypes = propTypes;
-
-export default VisitStatsLink;

src/short-urls/helpers/VisitStatsLink.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { isServerWithId, SelectedServer, ServerWithId } from '../../servers/data';
+import { ShortUrl } from '../data';
+
+export interface VisitStatsLinkProps {
+  shortUrl?: ShortUrl | null;
+  selectedServer?: SelectedServer;
+}
+
+const buildVisitsUrl = ({ id }: ServerWithId, { shortCode, domain }: ShortUrl) => {
+  const query = domain ? `?domain=${domain}` : '';
+
+  return `/server/${id}/short-code/${shortCode}/visits${query}`;
+};
+
+const VisitStatsLink: FC<VisitStatsLinkProps & Record<string | number, any>> = (
+  { selectedServer, shortUrl, children, ...rest },
+) => {
+  if (!selectedServer || !isServerWithId(selectedServer) || !shortUrl) {
+    return <span {...rest}>{children}</span>;
+  }
+
+  return <Link to={buildVisitsUrl(selectedServer, shortUrl)} {...rest}>{children}</Link>;
+};
+
+export default VisitStatsLink;

src/short-urls/reducers/shortUrlTags.ts

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import { Action, Dispatch } from 'redux';
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
 import { GetState } from '../../container/types';
@@ -13,14 +12,6 @@ export const SHORT_URL_TAGS_EDITED = 'shlink/shortUrlTags/SHORT_URL_TAGS_EDITED'
 export const RESET_EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/RESET_EDIT_SHORT_URL_TAGS';
 /* eslint-enable padding-line-between-statements */
 
-/** @deprecated Use ShortUrlTags interface */
-export const shortUrlTagsType = PropTypes.shape({
-  shortCode: PropTypes.string,
-  tags: PropTypes.arrayOf(PropTypes.string).isRequired,
-  saving: PropTypes.bool.isRequired,
-  error: PropTypes.bool.isRequired,
-});
-
 export interface ShortUrlTags {
   shortCode: string | null;
   tags: string[];

src/short-urls/reducers/shortUrlsList.ts

@@ -6,12 +6,12 @@ import { CREATE_VISIT, CreateVisitAction } from '../../visits/reducers/visitCrea
 import { ShortUrl, ShortUrlIdentifier } from '../data';
 import { buildReducer } from '../../utils/helpers/redux';
 import { GetState } from '../../container/types';
+import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
 import { EditShortUrlTagsAction, SHORT_URL_TAGS_EDITED } from './shortUrlTags';
 import { SHORT_URL_DELETED } from './shortUrlDeletion';
 import { SHORT_URL_META_EDITED, ShortUrlMetaEditedAction, shortUrlMetaType } from './shortUrlMeta';
 import { SHORT_URL_EDITED, ShortUrlEditedAction } from './shortUrlEdition';
 import { ShortUrlsListParams } from './shortUrlsListParams';
-import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
 
 /* eslint-disable padding-line-between-statements */
 export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';

src/utils/helpers/leaflet.ts

@@ -1,12 +1,10 @@
-// TODO Migrate this file to Typescript
-
 import L from 'leaflet';
 import marker2x from 'leaflet/dist/images/marker-icon-2x.png';
 import marker from 'leaflet/dist/images/marker-icon.png';
 import markerShadow from 'leaflet/dist/images/marker-shadow.png';
 
 export const fixLeafletIcons = () => {
-  delete L.Icon.Default.prototype._getIconUrl;
+  delete (L.Icon.Default.prototype as any)._getIconUrl;
 
   L.Icon.Default.mergeOptions({
     iconRetinaUrl: marker2x,