diff --git a/CHANGELOG.md b/CHANGELOG.md index 226bdd77..a33da748 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), #### Added * [#54](https://github.com/shlinkio/shlink-web-client/issues/54) Added stats by city graphic in visits page. +* [#55](https://github.com/shlinkio/shlink-web-client/issues/55) Added map in visits page locating cities from which visits have occurred. #### Changed diff --git a/package.json b/package.json index 723df2fa..a5a03091 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "chart.js": "^2.7.2", "classnames": "^2.2.6", "csvjson": "^5.1.0", + "leaflet": "^1.4.0", "moment": "^2.22.2", "promise": "^8.0.1", "prop-types": "^15.6.2", @@ -41,6 +42,7 @@ "react-copy-to-clipboard": "^5.0.1", "react-datepicker": "~1.5.0", "react-dom": "^16.7.0", + "react-leaflet": "^2.1.4", "react-moment": "^0.7.6", "react-redux": "^5.0.7", "react-router-dom": "^4.2.2", diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss index 0319f1fb..43bb7682 100644 --- a/src/common/AsideMenu.scss +++ b/src/common/AsideMenu.scss @@ -1,5 +1,4 @@ @import '../utils/base'; -@import '../utils/mixins/box-shadow'; @import '../utils/mixins/vertical-align'; $asideMenuMobileWidth: 280px; @@ -26,8 +25,7 @@ $asideMenuMobileWidth: 280px; width: $asideMenuMobileWidth !important; transition: left 300ms; top: $headerHeight - 3px; - - @include box-shadow(-10px 0 50px 11px rgba(0, 0, 0, .55)); + box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55); } } diff --git a/src/index.js b/src/index.js index 8f30306f..c875ae06 100644 --- a/src/index.js +++ b/src/index.js @@ -7,10 +7,15 @@ import { homepage } from '../package.json'; import registerServiceWorker from './registerServiceWorker'; import container from './container'; import store from './container/store'; -import '../node_modules/react-datepicker/dist/react-datepicker.css'; +import { fixLeafletIcons } from './utils/utils'; +import 'react-datepicker/dist/react-datepicker.css'; +import 'leaflet/dist/leaflet.css'; import './common/react-tagsinput.scss'; import './index.scss'; +// This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS +fixLeafletIcons(); + const { App, ScrollToTop } = container; render( diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js index fbea083e..42f41410 100644 --- a/src/servers/CreateServer.js +++ b/src/servers/CreateServer.js @@ -2,12 +2,11 @@ import { assoc, dissoc, pipe } from 'ramda'; import React from 'react'; import { v4 as uuid } from 'uuid'; import PropTypes from 'prop-types'; -import { stateFlagTimeout } from '../utils/utils'; import './CreateServer.scss'; const SHOW_IMPORT_MSG_TIME = 4000; -const CreateServer = (ImportServersBtn) => class CreateServer extends React.Component { +const CreateServer = (ImportServersBtn, stateFlagTimeout) => class CreateServer extends React.Component { static propTypes = { createServer: PropTypes.func, history: PropTypes.shape({ diff --git a/src/servers/services/provideServices.js b/src/servers/services/provideServices.js index c12f1b35..ff18b1b5 100644 --- a/src/servers/services/provideServices.js +++ b/src/servers/services/provideServices.js @@ -12,7 +12,7 @@ import ServersExporter from './ServersExporter'; const provideServices = (bottle, connect, withRouter) => { // Components - bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn'); + bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'stateFlagTimeout'); bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ])); bottle.serviceFactory('ServersDropdown', ServersDropdown, 'ServersExporter'); diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js index fdcd5bca..89838947 100644 --- a/src/short-urls/CreateShortUrl.js +++ b/src/short-urls/CreateShortUrl.js @@ -5,13 +5,12 @@ import React from 'react'; import { Collapse } from 'reactstrap'; import * as PropTypes from 'prop-types'; import DateInput from '../utils/DateInput'; -import CreateShortUrlResult from './helpers/CreateShortUrlResult'; import { createShortUrlResultType } from './reducers/shortUrlCreation'; const normalizeTag = pipe(trim, replace(/ /g, '-')); const formatDate = (date) => isNil(date) ? date : date.format(); -const CreateShortUrl = (TagsSelector) => class CreateShortUrl extends React.Component { +const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShortUrl extends React.Component { static propTypes = { createShortUrl: PropTypes.func, shortUrlCreationResult: createShortUrlResultType, diff --git a/src/short-urls/helpers/CreateShortUrlResult.js b/src/short-urls/helpers/CreateShortUrlResult.js index 5e43e8cd..6bebb8f1 100644 --- a/src/short-urls/helpers/CreateShortUrlResult.js +++ b/src/short-urls/helpers/CreateShortUrlResult.js @@ -6,10 +6,9 @@ import { CopyToClipboard } from 'react-copy-to-clipboard'; import { Card, CardBody, Tooltip } from 'reactstrap'; import PropTypes from 'prop-types'; import { createShortUrlResultType } from '../reducers/shortUrlCreation'; -import { stateFlagTimeout } from '../../utils/utils'; import './CreateShortUrlResult.scss'; -export default class CreateShortUrlResult extends React.Component { +const CreateShortUrlResult = (stateFlagTimeout) => class CreateShortUrlResult extends React.Component { static propTypes = { resetCreateShortUrl: PropTypes.func, error: PropTypes.bool, @@ -61,4 +60,6 @@ export default class CreateShortUrlResult extends React.Component { ); } -} +}; + +export default CreateShortUrlResult; diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js index 9d9e874d..80bc60ef 100644 --- a/src/short-urls/helpers/ShortUrlsRow.js +++ b/src/short-urls/helpers/ShortUrlsRow.js @@ -6,11 +6,14 @@ import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams'; import { serverType } from '../../servers/prop-types'; import ExternalLink from '../../utils/ExternalLink'; import { shortUrlType } from '../reducers/shortUrlsList'; -import { stateFlagTimeout } from '../../utils/utils'; import Tag from '../../tags/helpers/Tag'; import './ShortUrlsRow.scss'; -const ShortUrlsRow = (ShortUrlsRowMenu, colorGenerator) => class ShortUrlsRow extends React.Component { +const ShortUrlsRow = ( + ShortUrlsRowMenu, + colorGenerator, + stateFlagTimeout +) => class ShortUrlsRow extends React.Component { static propTypes = { refreshList: PropTypes.func, shortUrlsListParams: shortUrlsListParamsType, diff --git a/src/short-urls/services/provideServices.js b/src/short-urls/services/provideServices.js index c86811f4..05518828 100644 --- a/src/short-urls/services/provideServices.js +++ b/src/short-urls/services/provideServices.js @@ -8,6 +8,7 @@ import ShortUrlsRowMenu from '../helpers/ShortUrlsRowMenu'; import CreateShortUrl from '../CreateShortUrl'; import DeleteShortUrlModal from '../helpers/DeleteShortUrlModal'; import EditTagsModal from '../helpers/EditTagsModal'; +import CreateShortUrlResult from '../helpers/CreateShortUrlResult'; import { listShortUrls } from '../reducers/shortUrlsList'; import { createShortUrl, resetCreateShortUrl } from '../reducers/shortUrlCreation'; import { deleteShortUrl, resetDeleteShortUrl, shortUrlDeleted } from '../reducers/shortUrlDeletion'; @@ -30,11 +31,12 @@ const provideServices = (bottle, connect) => { [ 'listShortUrls', 'resetShortUrlParams' ] )); - bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator'); + bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'stateFlagTimeout'); bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'EditTagsModal'); + bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'stateFlagTimeout'); - bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector'); + bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector', 'CreateShortUrlResult'); bottle.decorator( 'CreateShortUrl', connect([ 'shortUrlCreationResult' ], [ 'createShortUrl', 'resetCreateShortUrl' ]) diff --git a/src/utils/mixins/border-radius.scss b/src/utils/mixins/border-radius.scss deleted file mode 100644 index 7523e870..00000000 --- a/src/utils/mixins/border-radius.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin border-radius($radius) { - border-radius: $radius; - -webkit-border-radius: $radius; -} diff --git a/src/utils/mixins/box-shadow.scss b/src/utils/mixins/box-shadow.scss deleted file mode 100644 index 464f8ece..00000000 --- a/src/utils/mixins/box-shadow.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin box-shadow($shadow) { - -webkit-box-shadow: $shadow; - box-shadow: $shadow; -} diff --git a/src/utils/mixins/fit-with-margin.scss b/src/utils/mixins/fit-with-margin.scss new file mode 100644 index 00000000..ec124dec --- /dev/null +++ b/src/utils/mixins/fit-with-margin.scss @@ -0,0 +1,8 @@ +@mixin fit-with-margin($margin) { + $offset: $margin * 2; + + width: calc(100% - #{$offset}); + max-width: calc(100% - #{$offset}); + height: calc(100% - #{$offset}); + margin: $margin; +} diff --git a/src/utils/services/provideServices.js b/src/utils/services/provideServices.js index fddb74bd..4c165f37 100644 --- a/src/utils/services/provideServices.js +++ b/src/utils/services/provideServices.js @@ -1,4 +1,5 @@ import axios from 'axios'; +import { stateFlagTimeout } from '../utils'; import Storage from './Storage'; import ColorGenerator from './ColorGenerator'; import buildShlinkApiClient from './ShlinkApiClientBuilder'; @@ -10,6 +11,9 @@ const provideServices = (bottle) => { bottle.constant('axios', axios); bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'axios'); + + bottle.constant('setTimeout', global.setTimeout); + bottle.serviceFactory('stateFlagTimeout', stateFlagTimeout, 'setTimeout'); }; export default provideServices; diff --git a/src/utils/utils.js b/src/utils/utils.js index 42e65983..e9d60fbd 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -1,6 +1,16 @@ +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'; + const DEFAULT_TIMEOUT_DELAY = 2000; -export const stateFlagTimeout = (setState, flagName, initialValue = true, delay = DEFAULT_TIMEOUT_DELAY) => { +export const stateFlagTimeout = (setTimeout) => ( + setState, + flagName, + initialValue = true, + delay = DEFAULT_TIMEOUT_DELAY +) => { setState({ [flagName]: initialValue }); setTimeout(() => setState({ [flagName]: !initialValue }), delay); }; @@ -17,3 +27,13 @@ export const determineOrderDir = (clickedField, currentOrderField, currentOrderD return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC'; }; + +export const fixLeafletIcons = () => { + delete L.Icon.Default.prototype._getIconUrl; + + L.Icon.Default.mergeOptions({ + iconRetinaUrl: marker2x, + iconUrl: marker, + shadowUrl: markerShadow, + }); +}; diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index 94e94347..d3644404 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -1,6 +1,6 @@ import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { isEmpty, mapObjIndexed } from 'ramda'; +import { isEmpty, mapObjIndexed, values } from 'ramda'; import React from 'react'; import { Card } from 'reactstrap'; import PropTypes from 'prop-types'; @@ -12,6 +12,7 @@ import { VisitsHeader } from './VisitsHeader'; import GraphCard from './GraphCard'; import { shortUrlDetailType } from './reducers/shortUrlDetail'; import './ShortUrlVisits.scss'; +import OpenMapModalBtn from './helpers/OpenMapModalBtn'; const ShortUrlVisits = ({ processOsStats, @@ -19,6 +20,7 @@ const ShortUrlVisits = ({ processCountriesStats, processCitiesStats, processReferrersStats, + processCitiesStatsForMap, }) => class ShortUrlVisits extends React.Component { static propTypes = { match: PropTypes.shape({ @@ -101,6 +103,14 @@ const ShortUrlVisits = ({ ( + + ), + ]} sortingItems={{ name: 'City name', amount: 'Visits amount', diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js index 9b75d7da..1a30218b 100644 --- a/src/visits/SortableBarGraph.js +++ b/src/visits/SortableBarGraph.js @@ -1,14 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { fromPairs, head, identity, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda'; +import { fromPairs, head, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda'; import SortingDropdown from '../utils/SortingDropdown'; import GraphCard from './GraphCard'; +const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : value; + export default class SortableBarGraph extends React.Component { static propTypes = { stats: PropTypes.object.isRequired, title: PropTypes.string.isRequired, sortingItems: PropTypes.object.isRequired, + extraHeaderContent: PropTypes.arrayOf(PropTypes.func), }; state = { @@ -17,13 +20,12 @@ export default class SortableBarGraph extends React.Component { }; render() { - const { stats, sortingItems, title } = this.props; + const { stats, sortingItems, title, extraHeaderContent } = this.props; const sortStats = () => { if (!this.state.orderField) { return stats; } - const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value); const sortedPairs = sortBy( pipe( prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1), @@ -48,6 +50,11 @@ export default class SortableBarGraph extends React.Component { onChange={(orderField, orderDir) => this.setState({ orderField, orderDir })} /> + {extraHeaderContent && extraHeaderContent.map((content, index) => ( +
+ {content()} +
+ ))} ); } diff --git a/src/visits/helpers/MapModal.js b/src/visits/helpers/MapModal.js new file mode 100644 index 00000000..a79cb672 --- /dev/null +++ b/src/visits/helpers/MapModal.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { Modal, ModalBody } from 'reactstrap'; +import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; +import * as PropTypes from 'prop-types'; +import './MapModal.scss'; + +const propTypes = { + toggle: PropTypes.func, + isOpen: PropTypes.bool, + title: PropTypes.string, + locations: PropTypes.arrayOf(PropTypes.shape({ + cityName: PropTypes.string.isRequired, + latLong: PropTypes.arrayOf(PropTypes.number).isRequired, + count: PropTypes.number.isRequired, + })), +}; +const defaultProps = { + locations: [], +}; + +const OpenStreetMapTile = () => ( + +); + +const MapModal = ({ toggle, isOpen, title, locations }) => ( + + +

+ {title} + +

+ + + {locations.map(({ cityName, latLong, count }, index) => ( + + {count} visit{count > 1 ? 's' : ''} from {cityName} + + ))} + + + +); + +MapModal.propTypes = propTypes; +MapModal.defaultProps = defaultProps; + +export default MapModal; diff --git a/src/visits/helpers/MapModal.scss b/src/visits/helpers/MapModal.scss new file mode 100644 index 00000000..d37029c6 --- /dev/null +++ b/src/visits/helpers/MapModal.scss @@ -0,0 +1,45 @@ +@import '../../utils/base'; +@import '../../utils/mixins/fit-with-margin'; + +.map-modal__modal { + @media (min-width: $mdMin) { + $margin: 20px; + + @include fit-with-margin($margin); + } + + @media (max-width: $smMax) { + $margin: 10px; + + @include fit-with-margin($margin); + } +} + +.map-modal__modal-content { + height: 100%; +} + +.map-modal__modal-title { + position: absolute; + width: 100%; + z-index: 1001; + padding: .5rem 1rem 1rem; + margin: 0; + color: #fff; + background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); +} + +.map-modal__modal-body { + padding: 0; + display: flex; + overflow: hidden; +} + +.map-modal__modal .leaflet-container { + flex: 1 1 auto; + border-radius: .3rem; +} + +.map-modal__modal .leaflet-top .leaflet-control { + margin-top: 60px; +} diff --git a/src/visits/helpers/OpenMapModalBtn.js b/src/visits/helpers/OpenMapModalBtn.js new file mode 100644 index 00000000..afe00d1c --- /dev/null +++ b/src/visits/helpers/OpenMapModalBtn.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons'; +import { UncontrolledTooltip } from 'reactstrap'; +import * as PropTypes from 'prop-types'; +import MapModal from './MapModal'; +import './OpenMapModalBtn.scss'; + +export default class OpenMapModalBtn extends React.Component { + static propTypes = { + modalTitle: PropTypes.string.isRequired, + locations: PropTypes.arrayOf(PropTypes.object), + }; + + state = { mapIsOpened: false }; + + render() { + const { modalTitle, locations = [] } = this.props; + const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened })); + const buttonRef = React.createRef(); + + return ( + + + buttonRef.current}>Show in map + + + ); + } +} diff --git a/src/visits/helpers/OpenMapModalBtn.scss b/src/visits/helpers/OpenMapModalBtn.scss new file mode 100644 index 00000000..1da946fe --- /dev/null +++ b/src/visits/helpers/OpenMapModalBtn.scss @@ -0,0 +1,4 @@ +.open-map-modal-btn__btn { + padding: 0; + margin-right: 1rem; +} diff --git a/src/visits/services/VisitsParser.js b/src/visits/services/VisitsParser.js index 39b550f3..174291d1 100644 --- a/src/visits/services/VisitsParser.js +++ b/src/visits/services/VisitsParser.js @@ -76,15 +76,18 @@ export const processReferrersStats = (visits) => visits, ); +const visitLocationHasProperty = (visitLocation, propertyName) => + !isNil(visitLocation) + && !isNil(visitLocation[propertyName]) + && !isEmpty(visitLocation[propertyName]); + const buildLocationStatsProcessorByProperty = (propertyName) => (visits) => reduce( (stats, { visitLocation }) => { - const notHasCountry = isNil(visitLocation) - || isNil(visitLocation[propertyName]) - || isEmpty(visitLocation[propertyName]); - const country = notHasCountry ? 'Unknown' : visitLocation[propertyName]; + const hasLocationProperty = visitLocationHasProperty(visitLocation, propertyName); + const value = hasLocationProperty ? visitLocation[propertyName] : 'Unknown'; - return assoc(country, (stats[country] || 0) + 1, stats); + return assoc(value, (stats[value] || 0) + 1, stats); }, {}, visits, @@ -93,3 +96,25 @@ const buildLocationStatsProcessorByProperty = (propertyName) => (visits) => export const processCountriesStats = buildLocationStatsProcessorByProperty('countryName'); export const processCitiesStats = buildLocationStatsProcessorByProperty('cityName'); + +export const processCitiesStatsForMap = (visits) => + reduce( + (stats, { visitLocation }) => { + if (!visitLocationHasProperty(visitLocation, 'cityName')) { + return stats; + } + + const { cityName, latitude, longitude } = visitLocation; + const currentCity = stats[cityName] || { + cityName, + count: 0, + latLong: [ parseFloat(latitude), parseFloat(longitude) ], + }; + + currentCity.count++; + + return assoc(cityName, currentCity, stats); + }, + {}, + visits, + ); diff --git a/test/short-urls/helpers/CreateShortUrlResult.test.js b/test/short-urls/helpers/CreateShortUrlResult.test.js index b4ff4b50..e256969f 100644 --- a/test/short-urls/helpers/CreateShortUrlResult.test.js +++ b/test/short-urls/helpers/CreateShortUrlResult.test.js @@ -3,17 +3,24 @@ import { shallow } from 'enzyme'; import { identity } from 'ramda'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { Tooltip } from 'reactstrap'; -import CreateShortUrlResult from '../../../src/short-urls/helpers/CreateShortUrlResult'; +import * as sinon from 'sinon'; +import createCreateShortUrlResult from '../../../src/short-urls/helpers/CreateShortUrlResult'; describe('', () => { let wrapper; + const stateFlagTimeout = sinon.spy(); const createWrapper = (result, error = false) => { + const CreateShortUrlResult = createCreateShortUrlResult(stateFlagTimeout); + wrapper = shallow(); return wrapper; }; - afterEach(() => wrapper && wrapper.unmount()); + afterEach(() => { + stateFlagTimeout.resetHistory(); + wrapper && wrapper.unmount(); + }); it('renders an error when error is true', () => { const wrapper = createWrapper({}, true); @@ -37,12 +44,12 @@ describe('', () => { expect(wrapper.find(Tooltip)).toHaveLength(1); }); - it('Shows tooltip when copy to clipboard button is clicked', () => { + it('Invokes tooltip timeout when copy to clipboard button is clicked', () => { const wrapper = createWrapper({ shortUrl: 'https://doma.in/abc123' }); const copyBtn = wrapper.find(CopyToClipboard); - expect(wrapper.state('showCopyTooltip')).toEqual(false); + expect(stateFlagTimeout.callCount).toEqual(0); copyBtn.simulate('copy'); - expect(wrapper.state('showCopyTooltip')).toEqual(true); + expect(stateFlagTimeout.callCount).toEqual(1); }); }); diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js new file mode 100644 index 00000000..94a40578 --- /dev/null +++ b/test/utils/utils.test.js @@ -0,0 +1,60 @@ +import * as sinon from 'sinon'; +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'; + +describe('utils', () => { + describe('stateFlagTimeout', () => { + it('sets state and initializes timeout with provided delay', () => { + const setTimeout = sinon.fake((callback) => callback()); + const setState = sinon.spy(); + const stateFlagTimeout = stateFlagTimeoutFactory(setTimeout); + const delay = 5000; + const expectedSetStateCalls = 2; + + stateFlagTimeout(setState, 'foo', false, delay); + + expect(setState.callCount).toEqual(expectedSetStateCalls); + expect(setState.getCall(0).args).toEqual([{ foo: false }]); + expect(setState.getCall(1).args).toEqual([{ foo: true }]); + expect(setTimeout.callCount).toEqual(1); + expect(setTimeout.getCall(0).args[1]).toEqual(delay); + }); + }); + + describe('determineOrderDir', () => { + it('returns ASC when current order field and selected field are different', () => { + expect(determineOrderDir('foo', 'bar')).toEqual('ASC'); + expect(determineOrderDir('bar', 'foo')).toEqual('ASC'); + }); + + it('returns ASC when no current order dir is provided', () => { + expect(determineOrderDir('foo', 'foo')).toEqual('ASC'); + expect(determineOrderDir('bar', 'bar')).toEqual('ASC'); + }); + + it('returns DESC when current order field and selected field are equal and current order dir is ASC', () => { + expect(determineOrderDir('foo', 'foo', 'ASC')).toEqual('DESC'); + expect(determineOrderDir('bar', 'bar', 'ASC')).toEqual('DESC'); + }); + + it('returns undefined when current order field and selected field are equal and current order dir is DESC', () => { + expect(determineOrderDir('foo', 'foo', 'DESC')).toBeUndefined(); + expect(determineOrderDir('bar', 'bar', 'DESC')).toBeUndefined(); + }); + }); + + 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/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js index 152b4c71..843bc68a 100644 --- a/test/visits/ShortUrlVisits.test.js +++ b/test/visits/ShortUrlVisits.test.js @@ -24,6 +24,7 @@ describe('', () => { processOsStats: statsProcessor, processReferrersStats: statsProcessor, processCitiesStats: statsProcessor, + processCitiesStatsForMap: statsProcessor, }); wrapper = shallow( @@ -92,4 +93,13 @@ describe('', () => { expect(getShortUrlVisitsMock.callCount).toEqual(expectedGetShortUrlVisitsCalls); expect(wrapper.state('startDate')).toEqual('2016-01-03T00:00:00+01:00'); }); + + it('holds the map button content generator on cities graph extraHeaderContent', () => { + const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); + const citiesGraph = wrapper.find(SortableBarGraph).find('[title="Cities"]'); + const extraHeaderContent = citiesGraph.prop('extraHeaderContent'); + + expect(extraHeaderContent).toHaveLength(1); + expect(typeof extraHeaderContent[0]).toEqual('function'); + }); }); diff --git a/test/visits/helpers/MapModal.test.js b/test/visits/helpers/MapModal.test.js new file mode 100644 index 00000000..41a6a370 --- /dev/null +++ b/test/visits/helpers/MapModal.test.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { Modal } from 'reactstrap'; +import { Marker, Popup } from 'react-leaflet'; +import MapModal from '../../../src/visits/helpers/MapModal'; + +describe('', () => { + let wrapper; + const toggle = () => ''; + const isOpen = true; + const title = 'Foobar'; + const zaragozaLat = 41.6563497; + const zaragozaLong = -0.876566; + const newYorkLat = 40.730610; + const newYorkLong = -73.935242; + const locations = [ + { + cityName: 'Zaragoza', + count: 54, + latLong: [ zaragozaLat, zaragozaLong ], + }, + { + cityName: 'New York', + count: 7, + latLong: [ newYorkLat, newYorkLong ], + }, + ]; + + beforeEach(() => { + wrapper = shallow(); + }); + + afterEach(() => wrapper.unmount()); + + it('renders modal with provided props', () => { + const modal = wrapper.find(Modal); + const headerheader = wrapper.find('.map-modal__modal-title'); + + expect(modal.prop('toggle')).toEqual(toggle); + expect(modal.prop('isOpen')).toEqual(isOpen); + expect(headerheader.find('.close').prop('onClick')).toEqual(toggle); + expect(headerheader.text()).toContain(title); + }); + + it('renders open street map tile', () => { + expect(wrapper.find('OpenStreetMapTile')).toHaveLength(1); + }); + + it('renders proper amount of markers', () => { + const markers = wrapper.find(Marker); + + expect(markers).toHaveLength(locations.length); + locations.forEach(({ latLong, count, cityName }, index) => { + const marker = markers.at(index); + const popup = marker.find(Popup); + + expect(marker.prop('position')).toEqual(latLong); + expect(popup.text()).toEqual(`${count} visits from ${cityName}`); + }); + }); +}); diff --git a/test/visits/helpers/OpenMapModalBtn.test.js b/test/visits/helpers/OpenMapModalBtn.test.js new file mode 100644 index 00000000..3548992b --- /dev/null +++ b/test/visits/helpers/OpenMapModalBtn.test.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { UncontrolledTooltip } from 'reactstrap'; +import OpenMapModalBtn from '../../../src/visits/helpers/OpenMapModalBtn'; +import MapModal from '../../../src/visits/helpers/MapModal'; + +describe('', () => { + let wrapper; + const title = 'Foo'; + const locations = []; + + beforeEach(() => { + wrapper = shallow(); + }); + + afterEach(() => wrapper.unmount()); + + it('Renders expected content', () => { + const button = wrapper.find('.open-map-modal-btn__btn'); + const tooltip = wrapper.find(UncontrolledTooltip); + const modal = wrapper.find(MapModal); + + expect(button).toHaveLength(1); + expect(tooltip).toHaveLength(1); + expect(modal).toHaveLength(1); + }); + + it('changes modal visibility when toggled', () => { + const modal = wrapper.find(MapModal); + + expect(wrapper.state('mapIsOpened')).toEqual(false); + modal.prop('toggle')(); + expect(wrapper.state('mapIsOpened')).toEqual(true); + }); + + it('sets provided props to the map', () => { + const modal = wrapper.find(MapModal); + + expect(modal.prop('title')).toEqual(title); + expect(modal.prop('locations')).toEqual(locations); + }); +}); diff --git a/test/visits/services/VisitsParser.test.js b/test/visits/services/VisitsParser.test.js index 6e62d76e..f5002e7c 100644 --- a/test/visits/services/VisitsParser.test.js +++ b/test/visits/services/VisitsParser.test.js @@ -4,6 +4,7 @@ import { processReferrersStats, processCountriesStats, processCitiesStats, + processCitiesStatsForMap, } from '../../../src/visits/services/VisitsParser'; describe('VisitsParser', () => { @@ -14,6 +15,8 @@ describe('VisitsParser', () => { visitLocation: { countryName: 'Spain', cityName: 'Zaragoza', + latitude: '123.45', + longitude: '-543.21', }, }, { @@ -22,6 +25,8 @@ describe('VisitsParser', () => { visitLocation: { countryName: 'United States', cityName: 'New York', + latitude: '1029', + longitude: '6758', }, }, { @@ -36,6 +41,8 @@ describe('VisitsParser', () => { visitLocation: { countryName: 'Spain', cityName: 'Zaragoza', + latitude: '123.45', + longitude: '-543.21', }, }, { @@ -92,4 +99,26 @@ describe('VisitsParser', () => { }); }); }); + + describe('processCitiesStatsForMap', () => { + it('properly parses cities stats with lat and long', () => { + const zaragozaLat = 123.45; + const zaragozaLong = -543.21; + const newYorkLat = 1029; + const newYorkLong = 6758; + + expect(processCitiesStatsForMap(visits)).toEqual({ + 'Zaragoza': { + cityName: 'Zaragoza', + count: 2, + latLong: [ zaragozaLat, zaragozaLong ], + }, + 'New York': { + cityName: 'New York', + count: 1, + latLong: [ newYorkLat, newYorkLong ], + }, + }); + }); + }); }); diff --git a/yarn.lock b/yarn.lock index 34d65aae..dd1250a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -736,7 +736,7 @@ dependencies: regenerator-runtime "^0.12.0" -"@babel/runtime@^7.1.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f" dependencies: @@ -4356,7 +4356,7 @@ hoist-non-react-statics@^2.5.0: version "2.5.5" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" -hoist-non-react-statics@^3.1.0: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz#c09c0555c84b38a7ede6912b61efddafd6e75e1e" dependencies: @@ -5720,6 +5720,11 @@ lcid@^2.0.0: dependencies: invert-kv "^2.0.0" +leaflet@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.4.0.tgz#d5f56eeb2aa32787c24011e8be4c77e362ae171b" + integrity sha512-x9j9tGY1+PDLN9pcWTx9/y6C5nezoTMB8BLK5jTakx+H7bPlnbCHfi9Hjg+Qt36sgDz/cb9lrSpNQXmk45Tvhw== + left-pad@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e" @@ -5804,6 +5809,11 @@ locate-path@^3.0.0: p-locate "^3.0.0" path-exists "^3.0.0" +lodash-es@^4.0.0: + version "4.17.11" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0" + integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q== + lodash._reinterpolate@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" @@ -7589,11 +7599,6 @@ postcss-reduce-initial@^4.0.2: postcss-reduce-transforms@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.1.tgz#8600d5553bdd3ad640f43bff81eb52f8760d4561" - dependencies: - cssnano-util-get-match "^4.0.0" - has "^1.0.0" - postcss "^7.0.0" - postcss-value-parser "^3.0.0" postcss-replace-overflow-wrap@^3.0.0: version "3.0.0" @@ -8062,6 +8067,17 @@ react-is@^16.3.2, react-is@^16.6.0, react-is@^16.6.1, react-is@^16.7.0: version "16.7.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa" +react-leaflet@^2.1.4: + version "2.1.4" + resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-2.1.4.tgz#44192a972892c690d4148e48dacd613168fd8cc4" + integrity sha512-OJvLq13ID5X6H/AM7woPmuqK7qEjT7RE81kysYU3X4HACsumAmvRuWffffxQ8Fl+m2cxkqF78eRmsWj5w9r1xw== + dependencies: + "@babel/runtime" "^7.2.0" + hoist-non-react-statics "^3.2.1" + lodash "^4.0.0" + lodash-es "^4.0.0" + warning "^4.0.0" + react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -8897,11 +8913,6 @@ shebang-regex@^1.0.0: shell-quote@1.6.1: version "1.6.1" resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767" - dependencies: - array-filter "~0.0.0" - array-map "~0.0.0" - array-reduce "~0.0.0" - jsonify "~0.0.0" shellwords@^0.1.1: version "0.1.1" @@ -10109,7 +10120,7 @@ warning@^3.0.0: dependencies: loose-envify "^1.0.0" -warning@^4.0.1: +warning@^4.0.0, warning@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.2.tgz#aa6876480872116fa3e11d434b0d0d8d91e44607" dependencies: