diff --git a/src/utils/helpers/numbers.js b/src/utils/helpers/numbers.js
new file mode 100644
index 00000000..7cfe751b
--- /dev/null
+++ b/src/utils/helpers/numbers.js
@@ -0,0 +1,4 @@
+const TEN_ROUNDING_NUMBER = 10;
+const { ceil } = Math;
+
+export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
diff --git a/src/utils/utils.js b/src/utils/utils.js
index ee2ee170..db527df6 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -4,9 +4,7 @@ import marker from 'leaflet/dist/images/marker-icon.png';
import markerShadow from 'leaflet/dist/images/marker-shadow.png';
import { isEmpty, isNil, range } from 'ramda';
-const TEN_ROUNDING_NUMBER = 10;
const DEFAULT_TIMEOUT_DELAY = 2000;
-const { ceil } = Math;
export const stateFlagTimeout = (setTimeout) => (
setState,
@@ -43,6 +41,4 @@ export const fixLeafletIcons = () => {
export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1).map(mappingFn);
-export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
-
export const hasValue = (value) => !isNil(value) && !isEmpty(value);
diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js
index 7e236e76..3a538296 100644
--- a/src/visits/SortableBarGraph.js
+++ b/src/visits/SortableBarGraph.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type } from 'ramda';
import SortingDropdown from '../utils/SortingDropdown';
import PaginationDropdown from '../utils/PaginationDropdown';
-import { rangeOf, roundTen } from '../utils/utils';
+import { rangeOf } from '../utils/utils';
+import { roundTen } from '../utils/helpers/numbers';
import SimplePaginator from '../common/SimplePaginator';
import GraphCard from './GraphCard';
diff --git a/src/visits/VisitsTable.js b/src/visits/VisitsTable.js
index 82fa3261..0f23837d 100644
--- a/src/visits/VisitsTable.js
+++ b/src/visits/VisitsTable.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import Moment from 'react-moment';
import classNames from 'classnames';
-import { map } from 'ramda';
+import { map, min } from 'ramda';
import {
faCaretDown as caretDownIcon,
faCaretUp as caretUpIcon,
@@ -90,24 +90,24 @@ const VisitsTable = ({ visits, onVisitSelected }) => {
- {renderOrderIcon('date')}
Date
+ {renderOrderIcon('date')}
|
- {renderOrderIcon('location')}
Location
+ {renderOrderIcon('location')}
|
- {renderOrderIcon('browser')}
Browser
+ {renderOrderIcon('browser')}
|
- {renderOrderIcon('os')}
OS
+ {renderOrderIcon('os')}
|
- {renderOrderIcon('referer')}
Referrer
+ {renderOrderIcon('referer')}
|
@@ -159,7 +159,9 @@ const VisitsTable = ({ visits, onVisitSelected }) => {
- Visits {currentPage.start + 1} to {currentPage.end} of {currentPage.total}
+ Visits {currentPage.start + 1} to{' '}
+ {min(currentPage.end, currentPage.total)} of{' '}
+ {currentPage.total}
diff --git a/test/utils/helpers/numbers.test.js b/test/utils/helpers/numbers.test.js
new file mode 100644
index 00000000..3802f6d6
--- /dev/null
+++ b/test/utils/helpers/numbers.test.js
@@ -0,0 +1,20 @@
+import { roundTen } from '../../../src/utils/helpers/numbers';
+
+describe('numbers', () => {
+ describe('roundTen', () => {
+ it('rounds provided number to the next multiple of ten', () => {
+ const expectationsPairs = [
+ [ 10, 10 ],
+ [ 12, 20 ],
+ [ 158, 160 ],
+ [ 5, 10 ],
+ [ -42, -40 ],
+ ];
+
+ expect.assertions(expectationsPairs.length);
+ expectationsPairs.forEach(([ number, expected ]) => {
+ expect(roundTen(number)).toEqual(expected);
+ });
+ });
+ });
+});
diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
index 94ac847c..512053fe 100644
--- a/test/utils/utils.test.js
+++ b/test/utils/utils.test.js
@@ -7,7 +7,6 @@ import {
determineOrderDir,
fixLeafletIcons,
rangeOf,
- roundTen,
} from '../../src/utils/utils';
describe('utils', () => {
@@ -86,21 +85,4 @@ describe('utils', () => {
]);
});
});
-
- describe('roundTen', () => {
- it('rounds provided number to the next multiple of ten', () => {
- const expectationsPairs = [
- [ 10, 10 ],
- [ 12, 20 ],
- [ 158, 160 ],
- [ 5, 10 ],
- [ -42, -40 ],
- ];
-
- expect.assertions(expectationsPairs.length);
- expectationsPairs.forEach(([ number, expected ]) => {
- expect(roundTen(number)).toEqual(expected);
- });
- });
- });
});
diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js
index 785f216a..48c7abc4 100644
--- a/test/visits/ShortUrlVisits.test.js
+++ b/test/visits/ShortUrlVisits.test.js
@@ -43,7 +43,7 @@ describe('', () => {
});
it('renders a preloader when visits are loading', () => {
- const wrapper = createComponent({ loading: true });
+ const wrapper = createComponent({ loading: true, visits: [] });
const loadingMessage = wrapper.find(Message);
expect(loadingMessage).toHaveLength(1);
@@ -51,7 +51,7 @@ describe('', () => {
});
it('renders a warning when loading large amounts of visits', () => {
- const wrapper = createComponent({ loading: true, loadingLarge: true });
+ const wrapper = createComponent({ loading: true, loadingLarge: true, visits: [] });
const loadingMessage = wrapper.find(Message);
expect(loadingMessage).toHaveLength(1);
@@ -59,7 +59,7 @@ describe('', () => {
});
it('renders an error message when visits could not be loaded', () => {
- const wrapper = createComponent({ loading: false, error: true });
+ const wrapper = createComponent({ loading: false, error: true, visits: [] });
const errorMessage = wrapper.find(Card);
expect(errorMessage).toHaveLength(1);