Created rangeOf helper function which does a range + map

src/index.scss

@@ -51,3 +51,7 @@ body,
     margin: 0 auto !important;
   }
 }
+
+.pagination .page-link {
+  cursor: pointer;
+}

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) => (
       <PaginationItem key={pageNumber} active={currentPage === pageNumber}>
         <PaginationLink
           tag={Link}

src/utils/services/ColorGenerator.js

@@ -1,15 +1,11 @@
-import { range } from 'ramda';
 import PropTypes from 'prop-types';
+import { rangeOf } from '../utils';
 
 const HEX_COLOR_LENGTH = 6;
 const { floor, random } = Math;
 const letters = '0123456789ABCDEF';
 const buildRandomColor = () =>
-  `#${
-    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 {

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);

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('<TagsList />', () => {
   let wrapper;
@@ -53,7 +54,7 @@ describe('<TagsList />', () => {
   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');
 

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',
+      ]);
+    });
+  });
 });