Migrated more common components to TS

package-lock.json

@@ -18293,9 +18293,9 @@
       "dev": true
     },
     "react-external-link": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.0.0.tgz",
-      "integrity": "sha512-KkEozBNo4OI+zdNgGX6ua5+w68wEu2RLdnMGF7KIod6+heDMLfK52Xeqtb0GBO/JvC+HTcj5Kdz8ol0oORYIPA=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.1.1.tgz",
+      "integrity": "sha512-e2WnTWkg81cuqxmDfjOalliAE20+Y/uD+lserN4uuwkwu+ciGLB3BMz4m7GnXh2+TowIi4sLtCL7zr7aDnIaqA=="
     },
     "react-is": {
       "version": "16.7.0",

package.json

@@ -52,7 +52,7 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-datepicker": "~1.5.0",
     "react-dom": "^16.13.1",
-    "react-external-link": "^1.0.0",
+    "react-external-link": "^1.1.1",
     "react-leaflet": "^2.4.0",
     "react-moment": "^0.9.5",
     "react-redux": "^7.1.1",

src/common/ShlinkVersions.tsx

@@ -1,45 +1,43 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { pipe } from 'ramda';
 import { ExternalLink } from 'react-external-link';
-import { serverType } from '../servers/prop-types';
 import { versionToPrintable, versionToSemVer } from '../utils/helpers/version';
+import { isReachableServer, SelectedServer } from '../servers/data';
 
 const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';
 const normalizeVersion = pipe(versionToSemVer(), versionToPrintable);
 
-const propTypes = {
-  selectedServer: serverType,
-  className: PropTypes.string,
-  clientVersion: PropTypes.string,
-};
+export interface ShlinkVersionsProps {
+  selectedServer: SelectedServer;
+  clientVersion?: string;
+  className?: string;
+}
 
-const versionLinkPropTypes = {
-  project: PropTypes.oneOf([ 'shlink', 'shlink-web-client' ]).isRequired,
-  version: PropTypes.string.isRequired,
-};
+interface VersionLinkProps {
+  project: 'shlink' | 'shlink-web-client';
+  version: string;
+}
 
-const VersionLink = ({ project, version }) => (
+const VersionLink = ({ project, version }: VersionLinkProps) => (
   <ExternalLink href={`https://github.com/shlinkio/${project}/releases/${version}`} className="text-muted">
     <b>{version}</b>
   </ExternalLink>
 );
 
-VersionLink.propTypes = versionLinkPropTypes;
-
-const ShlinkVersions = ({ selectedServer, className, clientVersion = SHLINK_WEB_CLIENT_VERSION }) => {
-  const { printableVersion: serverVersion } = selectedServer;
+const ShlinkVersions = (
+  { selectedServer, className, clientVersion = SHLINK_WEB_CLIENT_VERSION }: ShlinkVersionsProps,
+) => {
   const normalizedClientVersion = normalizeVersion(clientVersion);
 
   return (
     <small className={classNames('text-muted', className)}>
-      Client: <VersionLink project="shlink-web-client" version={normalizedClientVersion} /> -
-      Server: <VersionLink project="shlink" version={serverVersion} />
+      {isReachableServer(selectedServer) &&
+        <React.Fragment>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </React.Fragment>
+      }
+      Client: <VersionLink project="shlink-web-client" version={normalizedClientVersion} />
     </small>
   );
 };
 
-ShlinkVersions.propTypes = propTypes;
-
 export default ShlinkVersions;

src/common/SimplePaginator.tsx

@@ -1,23 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FC } from 'react';
 import classNames from 'classnames';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
+import { pageIsEllipsis, keyForPage, NumberOrEllipsis, progressivePagination } from '../utils/helpers/pagination';
 import './SimplePaginator.scss';
 
-const propTypes = {
-  pagesCount: PropTypes.number.isRequired,
-  currentPage: PropTypes.number.isRequired,
-  setCurrentPage: PropTypes.func.isRequired,
-  centered: PropTypes.bool,
-};
+interface SimplePaginatorProps {
+  pagesCount: number;
+  currentPage: number;
+  setCurrentPage: (currentPage: number) => void;
+  centered?: boolean;
+}
 
-const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => {
+const SimplePaginator: FC<SimplePaginatorProps> = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => {
   if (pagesCount < 2) {
     return null;
   }
 
-  const onClick = (page) => () => setCurrentPage(page);
+  const onClick = (page: NumberOrEllipsis) => () => !pageIsEllipsis(page) && setCurrentPage(page);
 
   return (
     <Pagination listClassName={classNames('flex-wrap mb-0 simple-paginator', { 'justify-content-center': centered })}>
@@ -27,7 +26,7 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = t
       {progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
         <PaginationItem
           key={keyForPage(pageNumber, index)}
-          disabled={isPageDisabled(pageNumber)}
+          disabled={pageIsEllipsis(pageNumber)}
           active={currentPage === pageNumber}
         >
           <PaginationLink tag="span" onClick={onClick(pageNumber)}>{pageNumber}</PaginationLink>
@@ -40,6 +39,4 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = t
   );
 };
 
-SimplePaginator.propTypes = propTypes;
-
 export default SimplePaginator;

src/servers/data/index.ts

@@ -27,3 +27,6 @@ export type SelectedServer = RegularServer | NotFoundServer | null;
 
 export const hasServerData = (server: ServerData | NotFoundServer | null): server is ServerData =>
   !!(server as ServerData)?.url && !!(server as ServerData)?.apiKey;
+
+export const isReachableServer = (server: SelectedServer): server is ReachableServer =>
+  !!server?.hasOwnProperty('printableVersion');

src/short-urls/Paginator.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
+import { pageIsEllipsis, keyForPage, progressivePagination } from '../utils/helpers/pagination';
 import './Paginator.scss';
 
 const propTypes = {
@@ -24,7 +24,7 @@ const Paginator = ({ paginator = {}, serverId }) => {
     progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
       <PaginationItem
         key={keyForPage(pageNumber, index)}
-        disabled={isPageDisabled(pageNumber)}
+        disabled={pageIsEllipsis(pageNumber)}
         active={currentPage === pageNumber}
       >
         <PaginationLink

src/utils/helpers/pagination.ts

@@ -1,20 +1,23 @@
 import { max, min, range } from 'ramda';
 
+const DELTA = 2;
+
 export const ELLIPSIS = '...';
 
-type NumberOrEllipsis = number | '...';
+type Ellipsis = typeof ELLIPSIS;
+
+export type NumberOrEllipsis = number | Ellipsis;
 
 export const progressivePagination = (currentPage: number, pageCount: number): NumberOrEllipsis[] => {
-  const delta = 2;
   const pages: NumberOrEllipsis[] = range(
-    max(delta, currentPage - delta),
-    min(pageCount - 1, currentPage + delta) + 1,
+    max(DELTA, currentPage - DELTA),
+    min(pageCount - 1, currentPage + DELTA) + 1,
   );
 
-  if (currentPage - delta > delta) {
+  if (currentPage - DELTA > DELTA) {
     pages.unshift(ELLIPSIS);
   }
-  if (currentPage + delta < pageCount - 1) {
+  if (currentPage + DELTA < pageCount - 1) {
     pages.push(ELLIPSIS);
   }
 
@@ -24,6 +27,6 @@ export const progressivePagination = (currentPage: number, pageCount: number): N
   return pages;
 };
 
-export const keyForPage = (pageNumber: NumberOrEllipsis, index: number) => pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`;
+export const pageIsEllipsis = (pageNumber: NumberOrEllipsis): pageNumber is Ellipsis => pageNumber === ELLIPSIS;
 
-export const isPageDisabled = (pageNumber: NumberOrEllipsis) => pageNumber === ELLIPSIS;
+export const keyForPage = (pageNumber: NumberOrEllipsis, index: number) => !pageIsEllipsis(pageNumber) ? `${pageNumber}` : `${pageNumber}_${index}`;

test/common/ShlinkVersions.test.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import ShlinkVersions from '../../src/common/ShlinkVersions';
-
-describe('<ShlinkVersions />', () => {
-  let wrapper;
-  const createWrapper = (props) => {
-    wrapper = shallow(<ShlinkVersions {...props} />);
-
-    return wrapper;
-  };
-
-  afterEach(() => wrapper && wrapper.unmount());
-
-  it.each([
-    [ '1.2.3', 'foo', 'v1.2.3', 'foo' ],
-    [ 'foo', '1.2.3', 'latest', '1.2.3' ],
-    [ 'latest', 'latest', 'latest', 'latest' ],
-    [ '5.5.0', '0.2.8', 'v5.5.0', '0.2.8' ],
-    [ 'not-semver', 'something', 'latest', 'something' ],
-  ])('displays expected versions', (clientVersion, printableVersion, expectedClientVersion, expectedServerVersion) => {
-    const wrapper = createWrapper({ clientVersion, selectedServer: { printableVersion } });
-    const links = wrapper.find('VersionLink');
-    const clientLink = links.at(0);
-    const serverLink = links.at(1);
-
-    expect(clientLink.prop('project')).toEqual('shlink-web-client');
-    expect(clientLink.prop('version')).toEqual(expectedClientVersion);
-    expect(serverLink.prop('project')).toEqual('shlink');
-    expect(serverLink.prop('version')).toEqual(expectedServerVersion);
-  });
-});

test/common/ShlinkVersions.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import ShlinkVersions, { ShlinkVersionsProps } from '../../src/common/ShlinkVersions';
+import { NonReachableServer, NotFoundServer, ReachableServer } from '../../src/servers/data';
+
+describe('<ShlinkVersions />', () => {
+  let wrapper: ShallowWrapper;
+  const createWrapper = (props: ShlinkVersionsProps) => {
+    wrapper = shallow(<ShlinkVersions {...props} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  it.each([
+    [ '1.2.3', Mock.of<ReachableServer>({ printableVersion: 'foo' }), 'v1.2.3', 'foo' ],
+    [ 'foo', Mock.of<ReachableServer>({ printableVersion: '1.2.3' }), 'latest', '1.2.3' ],
+    [ 'latest', Mock.of<ReachableServer>({ printableVersion: 'latest' }), 'latest', 'latest' ],
+    [ '5.5.0', Mock.of<ReachableServer>({ printableVersion: '0.2.8' }), 'v5.5.0', '0.2.8' ],
+    [ 'not-semver', Mock.of<ReachableServer>({ printableVersion: 'something' }), 'latest', 'something' ],
+  ])(
+    'displays expected versions when selected server is reachable',
+    (clientVersion, selectedServer, expectedClientVersion, expectedServerVersion) => {
+      const wrapper = createWrapper({ clientVersion, selectedServer });
+      const links = wrapper.find('VersionLink');
+      const serverLink = links.at(0);
+      const clientLink = links.at(1);
+
+      expect(serverLink.prop('project')).toEqual('shlink');
+      expect(serverLink.prop('version')).toEqual(expectedServerVersion);
+      expect(clientLink.prop('project')).toEqual('shlink-web-client');
+      expect(clientLink.prop('version')).toEqual(expectedClientVersion);
+    },
+  );
+
+  it.each([
+    [ '1.2.3', null ],
+    [ '1.2.3', Mock.of<NotFoundServer>({ serverNotFound: true }) ],
+    [ '1.2.3', Mock.of<NonReachableServer>({ serverNotReachable: true }) ],
+  ])('displays only client version when selected server is not reachable', (clientVersion, selectedServer) => {
+    const wrapper = createWrapper({ clientVersion, selectedServer });
+    const links = wrapper.find('VersionLink');
+
+    expect(links).toHaveLength(1);
+    expect(links.at(0).prop('project')).toEqual('shlink-web-client');
+  });
+});

test/common/SimplePaginator.test.tsx

@@ -1,29 +1,30 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import { identity } from 'ramda';
 import { PaginationItem } from 'reactstrap';
 import SimplePaginator from '../../src/common/SimplePaginator';
 import { ELLIPSIS } from '../../src/utils/helpers/pagination';
 
 describe('<SimplePaginator />', () => {
-  let wrapper;
-  const createWrapper = (pagesCount, currentPage = 1) => {
+  let wrapper: ShallowWrapper;
+  const createWrapper = (pagesCount: number, currentPage = 1) => {
+    // @ts-expect-error
     wrapper = shallow(<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={identity} />);
 
     return wrapper;
   };
 
-  afterEach(() => wrapper && wrapper.unmount());
+  afterEach(() => wrapper?.unmount());
 
   it.each([ -3, -2, 0, 1 ])('renders empty when the amount of pages is smaller than 2', (pagesCount) => {
     expect(createWrapper(pagesCount).text()).toEqual('');
   });
 
   describe('ELLIPSIS are rendered where expected', () => {
-    const getItemsForPages = (pagesCount, currentPage) => {
+    const getItemsForPages = (pagesCount: number, currentPage: number) => {
       const paginator = createWrapper(pagesCount, currentPage);
       const items = paginator.find(PaginationItem);
-      const itemsWithEllipsis = items.filterWhere((item) => item.key() && item.key().includes(ELLIPSIS));
+      const itemsWithEllipsis = items.filterWhere((item) => item?.key()?.includes(ELLIPSIS));
 
       return { items, itemsWithEllipsis };
     };