From 62df46d648b5c7114f5bf922a029045ec1ec89f2 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 22 Aug 2020 18:32:48 +0200 Subject: [PATCH] Refactored many helpers to Typescript --- package-lock.json | 15 +++++++++ package.json | 1 + src/index.tsx | 2 +- src/utils/helpers/date.ts | 2 +- src/utils/helpers/leaflet.js | 16 ++++++++++ src/utils/helpers/numbers.js | 8 ----- src/utils/helpers/numbers.ts | 7 ++++ src/utils/helpers/pagination.js | 27 ---------------- src/utils/helpers/pagination.ts | 29 +++++++++++++++++ src/utils/helpers/version.js | 27 ---------------- src/utils/helpers/version.ts | 32 +++++++++++++++++++ src/utils/utils.js | 32 ------------------- src/utils/utils.ts | 23 +++++++++++++ .../helpers/{date.test.js => date.test.ts} | 0 test/utils/helpers/leaflet.test.js | 19 +++++++++++ .../{numbers.test.js => numbers.test.ts} | 0 .../{version.test.js => version.test.ts} | 0 test/utils/utils.test.js | 18 +---------- 18 files changed, 145 insertions(+), 113 deletions(-) create mode 100644 src/utils/helpers/leaflet.js delete mode 100644 src/utils/helpers/numbers.js create mode 100644 src/utils/helpers/numbers.ts delete mode 100644 src/utils/helpers/pagination.js create mode 100644 src/utils/helpers/pagination.ts delete mode 100644 src/utils/helpers/version.js create mode 100644 src/utils/helpers/version.ts delete mode 100644 src/utils/utils.js create mode 100644 src/utils/utils.ts rename test/utils/helpers/{date.test.js => date.test.ts} (100%) create mode 100644 test/utils/helpers/leaflet.test.js rename test/utils/helpers/{numbers.test.js => numbers.test.ts} (100%) rename test/utils/helpers/{version.test.js => version.test.ts} (100%) diff --git a/package-lock.json b/package-lock.json index 26e614cf..e67e9e4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3090,6 +3090,12 @@ "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==", "dev": true }, + "@types/geojson": { + "version": "7946.0.7", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz", + "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==", + "dev": true + }, "@types/glob": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz", @@ -3299,6 +3305,15 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, + "@types/leaflet": { + "version": "1.5.17", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.17.tgz", + "integrity": "sha512-2XYq9k6kNjhNI7PaTz8Rdxcc8Vzwu97OaS9CtcrTxnTSxFUGwjlGjTDvhTLJU+JRSfZ4lBwGcl0SjZHALdVr6g==", + "dev": true, + "requires": { + "@types/geojson": "*" + } + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", diff --git a/package.json b/package.json index b21786c2..8454ae72 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "@types/classnames": "^2.2.10", "@types/enzyme": "^3.10.5", "@types/jest": "^26.0.10", + "@types/leaflet": "^1.5.17", "@types/moment": "^2.13.0", "@types/ramda": "^0.27.14", "@types/react": "^16.9.46", diff --git a/src/index.tsx b/src/index.tsx index 822c2988..836dfa75 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,7 +6,7 @@ import { homepage } from '../package.json'; import registerServiceWorker from './registerServiceWorker'; import container from './container'; import store from './container/store'; -import { fixLeafletIcons } from './utils/utils'; +import { fixLeafletIcons } from './utils/helpers/leaflet'; import 'bootstrap/dist/css/bootstrap.min.css'; import 'react-datepicker/dist/react-datepicker.css'; import 'leaflet/dist/leaflet.css'; diff --git a/src/utils/helpers/date.ts b/src/utils/helpers/date.ts index f8da9a77..c4a44b3c 100644 --- a/src/utils/helpers/date.ts +++ b/src/utils/helpers/date.ts @@ -10,4 +10,4 @@ const formatDateFromFormat = (date?: NullableDate, format?: string): NullableDat export const formatDate = (format = 'YYYY-MM-DD') => (date?: NullableDate) => formatDateFromFormat(date, format); -export const formatIsoDate = (date: NullableDate) => formatDateFromFormat(date, undefined); +export const formatIsoDate = (date?: NullableDate) => formatDateFromFormat(date, undefined); diff --git a/src/utils/helpers/leaflet.js b/src/utils/helpers/leaflet.js new file mode 100644 index 00000000..8b9ac82f --- /dev/null +++ b/src/utils/helpers/leaflet.js @@ -0,0 +1,16 @@ +// 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; + + L.Icon.Default.mergeOptions({ + iconRetinaUrl: marker2x, + iconUrl: marker, + shadowUrl: markerShadow, + }); +}; diff --git a/src/utils/helpers/numbers.js b/src/utils/helpers/numbers.js deleted file mode 100644 index b9e0757f..00000000 --- a/src/utils/helpers/numbers.js +++ /dev/null @@ -1,8 +0,0 @@ -const TEN_ROUNDING_NUMBER = 10; -const { ceil } = Math; - -const formatter = new Intl.NumberFormat('en-US'); - -export const prettify = (number) => formatter.format(number); - -export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER; diff --git a/src/utils/helpers/numbers.ts b/src/utils/helpers/numbers.ts new file mode 100644 index 00000000..559184bf --- /dev/null +++ b/src/utils/helpers/numbers.ts @@ -0,0 +1,7 @@ +const TEN_ROUNDING_NUMBER = 10; +const { ceil } = Math; +const formatter = new Intl.NumberFormat('en-US'); + +export const prettify = (number: number) => formatter.format(number); + +export const roundTen = (number: number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER; diff --git a/src/utils/helpers/pagination.js b/src/utils/helpers/pagination.js deleted file mode 100644 index be66f750..00000000 --- a/src/utils/helpers/pagination.js +++ /dev/null @@ -1,27 +0,0 @@ -import { max, min, range } from 'ramda'; - -export const ELLIPSIS = '...'; - -export const progressivePagination = (currentPage, pageCount) => { - const delta = 2; - const pages = range( - max(delta, currentPage - delta), - min(pageCount - 1, currentPage + delta) + 1, - ); - - if (currentPage - delta > delta) { - pages.unshift(ELLIPSIS); - } - if (currentPage + delta < pageCount - 1) { - pages.push(ELLIPSIS); - } - - pages.unshift(1); - pages.push(pageCount); - - return pages; -}; - -export const keyForPage = (pageNumber, index) => pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`; - -export const isPageDisabled = (pageNumber) => pageNumber === ELLIPSIS; diff --git a/src/utils/helpers/pagination.ts b/src/utils/helpers/pagination.ts new file mode 100644 index 00000000..46a5d1b3 --- /dev/null +++ b/src/utils/helpers/pagination.ts @@ -0,0 +1,29 @@ +import { max, min, range } from 'ramda'; + +export const ELLIPSIS = '...'; + +type NumberOrEllipsis = number | '...'; + +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, + ); + + if (currentPage - delta > delta) { + pages.unshift(ELLIPSIS); + } + if (currentPage + delta < pageCount - 1) { + pages.push(ELLIPSIS); + } + + pages.unshift(1); + pages.push(pageCount); + + return pages; +}; + +export const keyForPage = (pageNumber: NumberOrEllipsis, index: number) => pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`; + +export const isPageDisabled = (pageNumber: NumberOrEllipsis) => pageNumber === ELLIPSIS; diff --git a/src/utils/helpers/version.js b/src/utils/helpers/version.js deleted file mode 100644 index 5d62603a..00000000 --- a/src/utils/helpers/version.js +++ /dev/null @@ -1,27 +0,0 @@ -import { compare } from 'compare-versions'; -import { identity, memoizeWith } from 'ramda'; -import { hasValue } from '../utils'; - -export const versionMatch = (versionToMatch, { maxVersion, minVersion }) => { - if (!hasValue(versionToMatch)) { - return false; - } - - const matchesMinVersion = !minVersion || compare(versionToMatch, minVersion, '>='); - const matchesMaxVersion = !maxVersion || compare(versionToMatch, maxVersion, '<='); - - return !!(matchesMaxVersion && matchesMinVersion); -}; - -const versionIsValidSemVer = memoizeWith(identity, (version) => { - try { - return compare(version, version, '='); - } catch (e) { - return false; - } -}); - -export const versionToPrintable = (version) => !versionIsValidSemVer(version) ? version : `v${version}`; - -export const versionToSemVer = (defaultValue = 'latest') => - (version) => versionIsValidSemVer(version) ? version : defaultValue; diff --git a/src/utils/helpers/version.ts b/src/utils/helpers/version.ts new file mode 100644 index 00000000..a44a0251 --- /dev/null +++ b/src/utils/helpers/version.ts @@ -0,0 +1,32 @@ +import { compare } from 'compare-versions'; +import { identity, memoizeWith } from 'ramda'; +import { Empty, hasValue } from '../utils'; + +export interface Versions { + maxVersion?: string; + minVersion?: string; +} + +export const versionMatch = (versionToMatch: string | Empty, { maxVersion, minVersion }: Versions): boolean => { + if (!hasValue(versionToMatch)) { + return false; + } + + const matchesMinVersion = !minVersion || compare(versionToMatch, minVersion, '>='); + const matchesMaxVersion = !maxVersion || compare(versionToMatch, maxVersion, '<='); + + return matchesMaxVersion && matchesMinVersion; +}; + +const versionIsValidSemVer = memoizeWith(identity, (version: string) => { + try { + return compare(version, version, '='); + } catch (e) { + return false; + } +}); + +export const versionToPrintable = (version: string) => !versionIsValidSemVer(version) ? version : `v${version}`; + +export const versionToSemVer = (defaultValue = 'latest') => + (version: string) => versionIsValidSemVer(version) ? version : defaultValue; diff --git a/src/utils/utils.js b/src/utils/utils.js deleted file mode 100644 index d8758be1..00000000 --- a/src/utils/utils.js +++ /dev/null @@ -1,32 +0,0 @@ -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'; -import { isEmpty, isNil, range } from 'ramda'; - -export const determineOrderDir = (clickedField, currentOrderField, currentOrderDir) => { - if (currentOrderField !== clickedField) { - return 'ASC'; - } - - const newOrderMap = { - ASC: 'DESC', - DESC: undefined, - }; - - return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC'; -}; - -export const fixLeafletIcons = () => { - delete L.Icon.Default.prototype._getIconUrl; - - L.Icon.Default.mergeOptions({ - iconRetinaUrl: marker2x, - iconUrl: marker, - shadowUrl: markerShadow, - }); -}; - -export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1).map(mappingFn); - -export const hasValue = (value) => !isNil(value) && !isEmpty(value); diff --git a/src/utils/utils.ts b/src/utils/utils.ts new file mode 100644 index 00000000..3fc26d0f --- /dev/null +++ b/src/utils/utils.ts @@ -0,0 +1,23 @@ +import { isEmpty, isNil, range } from 'ramda'; + +export type OrderDir = 'ASC' | 'DESC' | undefined; + +export const determineOrderDir = (currentField: string, newField: string, currentOrderDir: OrderDir): OrderDir => { + if (currentField !== newField) { + return 'ASC'; + } + + const newOrderMap: Record<'ASC' | 'DESC', OrderDir> = { + ASC: 'DESC', + DESC: undefined, + }; + + return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC'; +}; + +export const rangeOf = (size: number, mappingFn: (value: number) => T, startAt = 1): T[] => + range(startAt, size + 1).map(mappingFn); + +export type Empty = null | undefined | '' | never[]; + +export const hasValue = (value: T | Empty): value is T => !isNil(value) && !isEmpty(value); diff --git a/test/utils/helpers/date.test.js b/test/utils/helpers/date.test.ts similarity index 100% rename from test/utils/helpers/date.test.js rename to test/utils/helpers/date.test.ts diff --git a/test/utils/helpers/leaflet.test.js b/test/utils/helpers/leaflet.test.js new file mode 100644 index 00000000..9fc1a4d0 --- /dev/null +++ b/test/utils/helpers/leaflet.test.js @@ -0,0 +1,19 @@ +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'; +import { fixLeafletIcons } from '../../../src/utils/helpers/leaflet'; + +describe('leaflet', () => { + describe('fixLeafletIcons', () => { + it('updates icons used by leaflet', () => { + fixLeafletIcons(); + + const { iconRetinaUrl, iconUrl, shadowUrl } = L.Icon.Default.prototype.options; + + expect(iconRetinaUrl).toEqual(marker2x); + expect(iconUrl).toEqual(marker); + expect(shadowUrl).toEqual(markerShadow); + }); + }); +}); diff --git a/test/utils/helpers/numbers.test.js b/test/utils/helpers/numbers.test.ts similarity index 100% rename from test/utils/helpers/numbers.test.js rename to test/utils/helpers/numbers.test.ts diff --git a/test/utils/helpers/version.test.js b/test/utils/helpers/version.test.ts similarity index 100% rename from test/utils/helpers/version.test.js rename to test/utils/helpers/version.test.ts diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js index 66c92618..04dc4617 100644 --- a/test/utils/utils.test.js +++ b/test/utils/utils.test.js @@ -1,8 +1,4 @@ -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'; -import { determineOrderDir, fixLeafletIcons, rangeOf } from '../../src/utils/utils'; +import { determineOrderDir, rangeOf } from '../../src/utils/utils'; describe('utils', () => { describe('determineOrderDir', () => { @@ -27,18 +23,6 @@ describe('utils', () => { }); }); - describe('fixLeafletIcons', () => { - it('updates icons used by leaflet', () => { - fixLeafletIcons(); - - const { iconRetinaUrl, iconUrl, shadowUrl } = L.Icon.Default.prototype.options; - - expect(iconRetinaUrl).toEqual(marker2x); - expect(iconUrl).toEqual(marker); - expect(shadowUrl).toEqual(markerShadow); - }); - }); - describe('rangeOf', () => { const func = (i) => `result_${i}`; const size = 5;