diff --git a/src/index.scss b/src/index.scss index cc361862..1d07ba5d 100644 --- a/src/index.scss +++ b/src/index.scss @@ -51,3 +51,7 @@ body, margin: 0 auto !important; } } + +.pagination .page-link { + cursor: pointer; +} diff --git a/src/short-urls/Paginator.js b/src/short-urls/Paginator.js index 3890c27b..c1458c02 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 { range } from 'ramda'; +import { rangeOf } from '../utils/utils'; const propTypes = { serverId: PropTypes.string.isRequired, @@ -20,7 +20,7 @@ export default function Paginator({ paginator = {}, serverId }) { } const renderPages = () => - range(1, pagesCount + 1).map((pageNumber) => ( + rangeOf(pagesCount, (pageNumber) => ( - `#${ - range(0, HEX_COLOR_LENGTH) - .map(() => letters[floor(random() * letters.length)]) - .join('') - }`; + `#${rangeOf(HEX_COLOR_LENGTH, () => letters[floor(random() * letters.length)]).join('')}`; const normalizeKey = (key) => key.toLowerCase().trim(); export default class ColorGenerator { diff --git a/src/utils/utils.js b/src/utils/utils.js index e9d60fbd..60f33c16 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -2,6 +2,7 @@ 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 { range } from 'ramda'; const DEFAULT_TIMEOUT_DELAY = 2000; @@ -37,3 +38,5 @@ export const fixLeafletIcons = () => { shadowUrl: markerShadow, }); }; + +export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1).map(mappingFn); diff --git a/test/tags/TagsList.test.js b/test/tags/TagsList.test.js index 0098eee9..df914f7b 100644 --- a/test/tags/TagsList.test.js +++ b/test/tags/TagsList.test.js @@ -1,10 +1,11 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { identity, range } from 'ramda'; +import { identity } from 'ramda'; import * as sinon from 'sinon'; import createTagsList from '../../src/tags/TagsList'; import MuttedMessage from '../../src/utils/MuttedMessage'; import SearchField from '../../src/utils/SearchField'; +import { rangeOf } from '../../src/utils/utils'; describe('', () => { let wrapper; @@ -53,7 +54,7 @@ describe('', () => { it('renders the proper amount of groups and cards based on the amount of tags', () => { const amountOfTags = 10; const amountOfGroups = 4; - const wrapper = createWrapper({ filteredTags: range(0, amountOfTags).map((i) => `tag_${i}`) }); + const wrapper = createWrapper({ filteredTags: rangeOf(amountOfTags, (i) => `tag_${i}`) }); const cards = wrapper.find(TagCard); const groups = wrapper.find('.col-md-6'); diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js index 94a40578..e4c47a90 100644 --- a/test/utils/utils.test.js +++ b/test/utils/utils.test.js @@ -3,7 +3,12 @@ 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 { stateFlagTimeout as stateFlagTimeoutFactory, determineOrderDir, fixLeafletIcons } from '../../src/utils/utils'; +import { + stateFlagTimeout as stateFlagTimeoutFactory, + determineOrderDir, + fixLeafletIcons, + rangeOf, +} from '../../src/utils/utils'; describe('utils', () => { describe('stateFlagTimeout', () => { @@ -57,4 +62,29 @@ describe('utils', () => { expect(shadowUrl).toEqual(markerShadow); }); }); + + describe('rangeOf', () => { + const func = (i) => `result_${i}`; + const size = 5; + + it('builds a range of specified size invike provided function', () => { + expect(rangeOf(size, func)).toEqual([ + 'result_1', + 'result_2', + 'result_3', + 'result_4', + 'result_5', + ]); + }); + + it('builds a range starting at provided pos', () => { + const startAt = 3; + + expect(rangeOf(size, func, startAt)).toEqual([ + 'result_3', + 'result_4', + 'result_5', + ]); + }); + }); });