From a96539129db063dd865e7649176e70d65f58a46b Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Fri, 28 Aug 2020 20:05:01 +0200 Subject: [PATCH] Migrated more common components to TS --- package-lock.json | 6 +-- package.json | 2 +- .../{ShlinkVersions.js => ShlinkVersions.tsx} | 38 +++++++------- ...SimplePaginator.js => SimplePaginator.tsx} | 25 +++++----- src/servers/data/index.ts | 3 ++ src/short-urls/Paginator.js | 4 +- src/utils/helpers/pagination.ts | 19 ++++--- test/common/ShlinkVersions.test.js | 32 ------------ test/common/ShlinkVersions.test.tsx | 49 +++++++++++++++++++ ...nator.test.js => SimplePaginator.test.tsx} | 13 ++--- 10 files changed, 105 insertions(+), 86 deletions(-) rename src/common/{ShlinkVersions.js => ShlinkVersions.tsx} (50%) rename src/common/{SimplePaginator.js => SimplePaginator.tsx} (64%) delete mode 100644 test/common/ShlinkVersions.test.js create mode 100644 test/common/ShlinkVersions.test.tsx rename test/common/{SimplePaginator.test.js => SimplePaginator.test.tsx} (83%) diff --git a/package-lock.json b/package-lock.json index f7749882..5e1b06d6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 95cd3fad..7d8e84be 100644 --- a/package.json +++ b/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", diff --git a/src/common/ShlinkVersions.js b/src/common/ShlinkVersions.tsx similarity index 50% rename from src/common/ShlinkVersions.js rename to src/common/ShlinkVersions.tsx index ae083806..547b447e 100644 --- a/src/common/ShlinkVersions.js +++ b/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) => ( {version} ); -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 ( - Client: - - Server: + {isReachableServer(selectedServer) && + Server: - + } + Client: ); }; -ShlinkVersions.propTypes = propTypes; - export default ShlinkVersions; diff --git a/src/common/SimplePaginator.js b/src/common/SimplePaginator.tsx similarity index 64% rename from src/common/SimplePaginator.js rename to src/common/SimplePaginator.tsx index 0859e4ff..2b648962 100644 --- a/src/common/SimplePaginator.js +++ b/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 = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => { if (pagesCount < 2) { return null; } - const onClick = (page) => () => setCurrentPage(page); + const onClick = (page: NumberOrEllipsis) => () => !pageIsEllipsis(page) && setCurrentPage(page); return ( @@ -27,7 +26,7 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = t {progressivePagination(currentPage, pagesCount).map((pageNumber, index) => ( {pageNumber} @@ -40,6 +39,4 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = t ); }; -SimplePaginator.propTypes = propTypes; - export default SimplePaginator; diff --git a/src/servers/data/index.ts b/src/servers/data/index.ts index 57dbf52a..3c918cbb 100644 --- a/src/servers/data/index.ts +++ b/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'); diff --git a/src/short-urls/Paginator.js b/src/short-urls/Paginator.js index dd976954..4b051811 100644 --- a/src/short-urls/Paginator.js +++ b/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) => ( { - 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}`; diff --git a/test/common/ShlinkVersions.test.js b/test/common/ShlinkVersions.test.js deleted file mode 100644 index 020f50dd..00000000 --- a/test/common/ShlinkVersions.test.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import ShlinkVersions from '../../src/common/ShlinkVersions'; - -describe('', () => { - let wrapper; - const createWrapper = (props) => { - wrapper = shallow(); - - 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); - }); -}); diff --git a/test/common/ShlinkVersions.test.tsx b/test/common/ShlinkVersions.test.tsx new file mode 100644 index 00000000..75d0600a --- /dev/null +++ b/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('', () => { + let wrapper: ShallowWrapper; + const createWrapper = (props: ShlinkVersionsProps) => { + wrapper = shallow(); + + return wrapper; + }; + + afterEach(() => wrapper?.unmount()); + + it.each([ + [ '1.2.3', Mock.of({ printableVersion: 'foo' }), 'v1.2.3', 'foo' ], + [ 'foo', Mock.of({ printableVersion: '1.2.3' }), 'latest', '1.2.3' ], + [ 'latest', Mock.of({ printableVersion: 'latest' }), 'latest', 'latest' ], + [ '5.5.0', Mock.of({ printableVersion: '0.2.8' }), 'v5.5.0', '0.2.8' ], + [ 'not-semver', Mock.of({ 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({ serverNotFound: true }) ], + [ '1.2.3', Mock.of({ 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'); + }); +}); diff --git a/test/common/SimplePaginator.test.js b/test/common/SimplePaginator.test.tsx similarity index 83% rename from test/common/SimplePaginator.test.js rename to test/common/SimplePaginator.test.tsx index ac91dd01..a8408f56 100644 --- a/test/common/SimplePaginator.test.js +++ b/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('', () => { - let wrapper; - const createWrapper = (pagesCount, currentPage = 1) => { + let wrapper: ShallowWrapper; + const createWrapper = (pagesCount: number, currentPage = 1) => { + // @ts-expect-error wrapper = shallow(); 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 }; };