From 6abc0e7d024a614ac52f77d2cc9d54bbf70e827e Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Mon, 7 Jan 2019 13:35:14 +0100 Subject: [PATCH 01/12] Created component to show a map on a modal window --- package.json | 2 ++ src/index.js | 1 + src/visits/SortableBarGraph.js | 9 +++++++- src/visits/helpers/MapModal.js | 38 ++++++++++++++++++++++++++++++++ src/visits/helpers/MapModal.scss | 38 ++++++++++++++++++++++++++++++++ yarn.lock | 37 ++++++++++++++++++++----------- 6 files changed, 111 insertions(+), 14 deletions(-) create mode 100644 src/visits/helpers/MapModal.js create mode 100644 src/visits/helpers/MapModal.scss 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/index.js b/src/index.js index 8f30306f..a0604e47 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import registerServiceWorker from './registerServiceWorker'; import container from './container'; import store from './container/store'; import '../node_modules/react-datepicker/dist/react-datepicker.css'; +import '../node_modules/leaflet/dist/leaflet.css'; import './common/react-tagsinput.scss'; import './index.scss'; diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js index 9b75d7da..f1637487 100644 --- a/src/visits/SortableBarGraph.js +++ b/src/visits/SortableBarGraph.js @@ -3,6 +3,9 @@ import PropTypes from 'prop-types'; import { fromPairs, head, identity, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda'; import SortingDropdown from '../utils/SortingDropdown'; import GraphCard from './GraphCard'; +import MapModal from './helpers/MapModal'; + +const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value); export default class SortableBarGraph extends React.Component { static propTypes = { @@ -14,6 +17,7 @@ export default class SortableBarGraph extends React.Component { state = { orderField: undefined, orderDir: undefined, + mapIsOpened: false, }; render() { @@ -23,7 +27,6 @@ export default class SortableBarGraph extends React.Component { 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), @@ -35,10 +38,14 @@ export default class SortableBarGraph extends React.Component { return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs)); }; + const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened })); + return ( {title}
+ + ( + + {title} + + + + + + A pretty CSS3 popup.
Easily customizable. + + + + + +); + +MapModal.propTypes = propTypes; + +export default MapModal; diff --git a/src/visits/helpers/MapModal.scss b/src/visits/helpers/MapModal.scss new file mode 100644 index 00000000..642bf797 --- /dev/null +++ b/src/visits/helpers/MapModal.scss @@ -0,0 +1,38 @@ +@import '../../utils/base'; + +.map-modal__modal { + @media (min-width: $mdMin) { + $margin: 20px; + $offset: $margin * 2; + + width: calc(100% - #{$offset}); + max-width: calc(100% - #{$offset}); + height: calc(100% - #{$offset}); + margin: $margin; + } + + @media (max-width: $smMax) { + $margin: 10px; + $offset: $margin * 2; + + width: calc(100% - #{$offset}); + max-width: calc(100% - #{$offset}); + height: calc(100% - #{$offset}); + margin: $margin; + } +} + +.map-modal__modal .modal-content { + height: 100%; +} + +.map-modal__modal .modal-body { + padding: 0; + display: flex; + overflow: hidden; +} + +.map-modal__modal .leaflet-container { + flex: 1 1 auto; + border-radius: 0 0 .3rem .3rem; +} 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: From 2be771cbccfd4d17f1616df9673c357b1ca48cdf Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Mon, 7 Jan 2019 13:45:16 +0100 Subject: [PATCH 02/12] Improved styles --- src/common/AsideMenu.scss | 4 +--- src/utils/mixins/border-radius.scss | 4 ---- src/utils/mixins/box-shadow.scss | 4 ---- src/utils/mixins/fit-with-margin.scss | 8 ++++++++ src/visits/helpers/MapModal.scss | 13 +++---------- 5 files changed, 12 insertions(+), 21 deletions(-) delete mode 100644 src/utils/mixins/border-radius.scss delete mode 100644 src/utils/mixins/box-shadow.scss create mode 100644 src/utils/mixins/fit-with-margin.scss 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/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/visits/helpers/MapModal.scss b/src/visits/helpers/MapModal.scss index 642bf797..7b2aed55 100644 --- a/src/visits/helpers/MapModal.scss +++ b/src/visits/helpers/MapModal.scss @@ -1,24 +1,17 @@ @import '../../utils/base'; +@import '../../utils/mixins/fit-with-margin'; .map-modal__modal { @media (min-width: $mdMin) { $margin: 20px; - $offset: $margin * 2; - width: calc(100% - #{$offset}); - max-width: calc(100% - #{$offset}); - height: calc(100% - #{$offset}); - margin: $margin; + @include fit-with-margin($margin); } @media (max-width: $smMax) { $margin: 10px; - $offset: $margin * 2; - width: calc(100% - #{$offset}); - max-width: calc(100% - #{$offset}); - height: calc(100% - #{$offset}); - margin: $margin; + @include fit-with-margin($margin); } } From 78745366c29c9df250901c3402d72658df4a9d65 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Mon, 7 Jan 2019 19:43:25 +0100 Subject: [PATCH 03/12] Moved button to open map to separated component --- src/visits/ShortUrlVisits.js | 2 ++ src/visits/SortableBarGraph.js | 14 ++++---- src/visits/helpers/MapModal.js | 44 +++++++++++++------------ src/visits/helpers/MapModal.scss | 4 +-- src/visits/helpers/OpenMapModalBtn.js | 31 +++++++++++++++++ src/visits/helpers/OpenMapModalBtn.scss | 4 +++ 6 files changed, 69 insertions(+), 30 deletions(-) create mode 100644 src/visits/helpers/OpenMapModalBtn.js create mode 100644 src/visits/helpers/OpenMapModalBtn.scss diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index 94e94347..1604b5bb 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -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, @@ -101,6 +102,7 @@ const ShortUrlVisits = ({ ]} sortingItems={{ name: 'City name', amount: 'Visits amount', diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js index f1637487..a76bc5bf 100644 --- a/src/visits/SortableBarGraph.js +++ b/src/visits/SortableBarGraph.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import { fromPairs, head, identity, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda'; import SortingDropdown from '../utils/SortingDropdown'; import GraphCard from './GraphCard'; -import MapModal from './helpers/MapModal'; const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value); @@ -12,16 +11,16 @@ export default class SortableBarGraph extends React.Component { stats: PropTypes.object.isRequired, title: PropTypes.string.isRequired, sortingItems: PropTypes.object.isRequired, + extraHeaderContent: PropTypes.arrayOf(PropTypes.func), }; state = { orderField: undefined, orderDir: undefined, - mapIsOpened: false, }; render() { - const { stats, sortingItems, title } = this.props; + const { stats, sortingItems, title, extraHeaderContent } = this.props; const sortStats = () => { if (!this.state.orderField) { return stats; @@ -38,14 +37,10 @@ export default class SortableBarGraph extends React.Component { return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs)); }; - const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened })); - return ( {title}
- - this.setState({ orderField, orderDir })} />
+ {extraHeaderContent && extraHeaderContent.map((content, index) => ( +
+ {content()} +
+ ))} ); } diff --git a/src/visits/helpers/MapModal.js b/src/visits/helpers/MapModal.js index 988c3564..5126f56a 100644 --- a/src/visits/helpers/MapModal.js +++ b/src/visits/helpers/MapModal.js @@ -10,28 +10,30 @@ const propTypes = { title: PropTypes.string, }; -const madridLat = 40.416775; -const madridLong = -3.703790; -const latLong = [ madridLat, madridLong ]; +const MapModal = ({ toggle, isOpen, title }) => { + const madridLat = 40.416775; + const madridLong = -3.703790; + const latLong = [ madridLat, madridLong ]; -const MapModal = ({ toggle, isOpen, title }) => ( - - {title} - - - - - - A pretty CSS3 popup.
Easily customizable. - - - - - -); + return ( + + {title} + + + + + + A pretty CSS3 popup.
Easily customizable. + + + + + + ); +}; MapModal.propTypes = propTypes; diff --git a/src/visits/helpers/MapModal.scss b/src/visits/helpers/MapModal.scss index 7b2aed55..1a23bae4 100644 --- a/src/visits/helpers/MapModal.scss +++ b/src/visits/helpers/MapModal.scss @@ -15,11 +15,11 @@ } } -.map-modal__modal .modal-content { +.map-modal__modal-content { height: 100%; } -.map-modal__modal .modal-body { +.map-modal__modal-body { padding: 0; display: flex; overflow: hidden; diff --git a/src/visits/helpers/OpenMapModalBtn.js b/src/visits/helpers/OpenMapModalBtn.js new file mode 100644 index 00000000..c90fdc9d --- /dev/null +++ b/src/visits/helpers/OpenMapModalBtn.js @@ -0,0 +1,31 @@ +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 = { + title: PropTypes.string.isRequired, + }; + + state = { mapIsOpened: false }; + + render() { + const { title } = 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; +} From 4870801f8f88214a91a96d701c8f0902870efdd7 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Mon, 7 Jan 2019 21:00:28 +0100 Subject: [PATCH 04/12] Implemented map to show visits from every city --- src/index.js | 8 +++-- src/utils/utils.js | 15 ++++++++ src/visits/ShortUrlVisits.js | 12 +++++-- src/visits/helpers/MapModal.js | 51 +++++++++++++++------------ src/visits/helpers/OpenMapModalBtn.js | 5 +-- src/visits/services/VisitsParser.js | 32 ++++++++++++++--- 6 files changed, 90 insertions(+), 33 deletions(-) diff --git a/src/index.js b/src/index.js index a0604e47..c875ae06 100644 --- a/src/index.js +++ b/src/index.js @@ -7,11 +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 '../node_modules/leaflet/dist/leaflet.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/utils/utils.js b/src/utils/utils.js index 42e65983..080005bf 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -1,3 +1,8 @@ +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) => { @@ -17,3 +22,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 1604b5bb..ec1d8a42 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'; @@ -20,6 +20,7 @@ const ShortUrlVisits = ({ processCountriesStats, processCitiesStats, processReferrersStats, + processCitiesStatsForMap, }) => class ShortUrlVisits extends React.Component { static propTypes = { match: PropTypes.shape({ @@ -102,7 +103,14 @@ const ShortUrlVisits = ({ ]} + extraHeaderContent={[ + () => ( + + ), + ]} sortingItems={{ name: 'City name', amount: 'Visits amount', diff --git a/src/visits/helpers/MapModal.js b/src/visits/helpers/MapModal.js index 5126f56a..773bdadc 100644 --- a/src/visits/helpers/MapModal.js +++ b/src/visits/helpers/MapModal.js @@ -8,33 +8,40 @@ const propTypes = { toggle: PropTypes.func, isOpen: PropTypes.bool, title: PropTypes.string, + locations: PropTypes.arrayOf(PropTypes.shape({ + city: PropTypes.string.isRequired, + latLong: PropTypes.arrayOf(PropTypes.number).isRequired, + count: PropTypes.number.isRequired, + })), +}; +const defaultProps = { + locations: [], }; -const MapModal = ({ toggle, isOpen, title }) => { - const madridLat = 40.416775; - const madridLong = -3.703790; - const latLong = [ madridLat, madridLong ]; +const OpenStreetMapTile = () => ( + +); - return ( - - {title} - - - - - - A pretty CSS3 popup.
Easily customizable. - +const MapModal = ({ toggle, isOpen, title, locations }) => ( + + {title} + + + + {locations.map(({ city, latLong, count }, index) => ( + + {count} visit{count > 1 ? 's' : ''} from {city} - - - - ); -}; + ))} + + + +); MapModal.propTypes = propTypes; +MapModal.defaultProps = defaultProps; export default MapModal; diff --git a/src/visits/helpers/OpenMapModalBtn.js b/src/visits/helpers/OpenMapModalBtn.js index c90fdc9d..f775be40 100644 --- a/src/visits/helpers/OpenMapModalBtn.js +++ b/src/visits/helpers/OpenMapModalBtn.js @@ -9,12 +9,13 @@ import './OpenMapModalBtn.scss'; export default class OpenMapModalBtn extends React.Component { static propTypes = { title: PropTypes.string.isRequired, + locations: PropTypes.arrayOf(PropTypes.object), }; state = { mapIsOpened: false }; render() { - const { title } = this.props; + const { title, locations = [] } = this.props; const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened })); const buttonRef = React.createRef(); @@ -24,7 +25,7 @@ export default class OpenMapModalBtn extends React.Component { buttonRef.current}>Show in map - + ); } diff --git a/src/visits/services/VisitsParser.js b/src/visits/services/VisitsParser.js index 39b550f3..6ff5662b 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,22 @@ const buildLocationStatsProcessorByProperty = (propertyName) => (visits) => export const processCountriesStats = buildLocationStatsProcessorByProperty('countryName'); export const processCitiesStats = buildLocationStatsProcessorByProperty('cityName'); + +export const processCitiesStatsForMap = (visits) => + reduce( + (stats, { visitLocation }) => { + const hasCity = visitLocationHasProperty(visitLocation, 'cityName'); + const city = hasCity ? visitLocation.cityName : 'unknown'; + const currentCity = stats[city] || { + city, + count: 0, + latLong: hasCity ? [ parseFloat(visitLocation.latitude), parseFloat(visitLocation.longitude) ] : [ 0, 0 ], + }; + + currentCity.count++; + + return assoc(city, currentCity, stats); + }, + {}, + visits, + ); From 00d386f19f8ead56a0dfc9c6473a4f939e15f395 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Mon, 7 Jan 2019 21:11:09 +0100 Subject: [PATCH 05/12] Skipped locations from unknown cities when processing cities stats for map --- src/visits/helpers/MapModal.js | 6 +++--- src/visits/services/VisitsParser.js | 15 +++++++++------ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/visits/helpers/MapModal.js b/src/visits/helpers/MapModal.js index 773bdadc..3f8407fa 100644 --- a/src/visits/helpers/MapModal.js +++ b/src/visits/helpers/MapModal.js @@ -9,7 +9,7 @@ const propTypes = { isOpen: PropTypes.bool, title: PropTypes.string, locations: PropTypes.arrayOf(PropTypes.shape({ - city: PropTypes.string.isRequired, + cityName: PropTypes.string.isRequired, latLong: PropTypes.arrayOf(PropTypes.number).isRequired, count: PropTypes.number.isRequired, })), @@ -31,9 +31,9 @@ const MapModal = ({ toggle, isOpen, title, locations }) => ( - {locations.map(({ city, latLong, count }, index) => ( + {locations.map(({ cityName, latLong, count }, index) => ( - {count} visit{count > 1 ? 's' : ''} from {city} + {count} visit{count > 1 ? 's' : ''} from {cityName} ))} diff --git a/src/visits/services/VisitsParser.js b/src/visits/services/VisitsParser.js index 6ff5662b..174291d1 100644 --- a/src/visits/services/VisitsParser.js +++ b/src/visits/services/VisitsParser.js @@ -100,17 +100,20 @@ export const processCitiesStats = buildLocationStatsProcessorByProperty('cityNam export const processCitiesStatsForMap = (visits) => reduce( (stats, { visitLocation }) => { - const hasCity = visitLocationHasProperty(visitLocation, 'cityName'); - const city = hasCity ? visitLocation.cityName : 'unknown'; - const currentCity = stats[city] || { - city, + if (!visitLocationHasProperty(visitLocation, 'cityName')) { + return stats; + } + + const { cityName, latitude, longitude } = visitLocation; + const currentCity = stats[cityName] || { + cityName, count: 0, - latLong: hasCity ? [ parseFloat(visitLocation.latitude), parseFloat(visitLocation.longitude) ] : [ 0, 0 ], + latLong: [ parseFloat(latitude), parseFloat(longitude) ], }; currentCity.count++; - return assoc(city, currentCity, stats); + return assoc(cityName, currentCity, stats); }, {}, visits, From 8b8be2d7cafccbaee56233acd1fcac491a8e82eb Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 8 Jan 2019 20:49:47 +0100 Subject: [PATCH 06/12] Updated stateFlagTimeout to get the setTimeout function injected as a dependency --- src/servers/CreateServer.js | 3 +-- src/servers/services/provideServices.js | 2 +- src/short-urls/CreateShortUrl.js | 3 +-- src/short-urls/helpers/CreateShortUrlResult.js | 7 ++++--- src/short-urls/helpers/ShortUrlsRow.js | 7 +++++-- src/short-urls/services/provideServices.js | 6 ++++-- src/utils/services/provideServices.js | 4 ++++ src/utils/utils.js | 7 ++++++- 8 files changed, 26 insertions(+), 13 deletions(-) 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/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 080005bf..e9d60fbd 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -5,7 +5,12 @@ 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); }; From bb6fb6b9ea02038c0075455aa3ed04d2de225ca4 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 8 Jan 2019 21:19:38 +0100 Subject: [PATCH 07/12] Created utils test --- .../helpers/CreateShortUrlResult.test.js | 17 ++++-- test/utils/utils.test.js | 60 +++++++++++++++++++ 2 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 test/utils/utils.test.js 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); + }); + }); +}); From c599d2837b63fc4dc3722c16b86ecc63eb9db5cc Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 9 Jan 2019 07:59:56 +0100 Subject: [PATCH 08/12] Improved VisitsParser test --- src/visits/ShortUrlVisits.js | 2 +- src/visits/helpers/OpenMapModalBtn.js | 6 ++--- test/visits/services/VisitsParser.test.js | 29 +++++++++++++++++++++++ 3 files changed, 33 insertions(+), 4 deletions(-) diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index ec1d8a42..d3644404 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -106,7 +106,7 @@ const ShortUrlVisits = ({ extraHeaderContent={[ () => ( ), diff --git a/src/visits/helpers/OpenMapModalBtn.js b/src/visits/helpers/OpenMapModalBtn.js index f775be40..afe00d1c 100644 --- a/src/visits/helpers/OpenMapModalBtn.js +++ b/src/visits/helpers/OpenMapModalBtn.js @@ -8,14 +8,14 @@ import './OpenMapModalBtn.scss'; export default class OpenMapModalBtn extends React.Component { static propTypes = { - title: PropTypes.string.isRequired, + modalTitle: PropTypes.string.isRequired, locations: PropTypes.arrayOf(PropTypes.object), }; state = { mapIsOpened: false }; render() { - const { title, locations = [] } = this.props; + const { modalTitle, locations = [] } = this.props; const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened })); const buttonRef = React.createRef(); @@ -25,7 +25,7 @@ export default class OpenMapModalBtn extends React.Component { buttonRef.current}>Show in map - + ); } 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 ], + }, + }); + }); + }); }); From 150dcd2d5dce04f66cd91ea09de43465cd07b4e1 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 9 Jan 2019 20:11:22 +0100 Subject: [PATCH 09/12] Created tests for new map-related components --- test/visits/ShortUrlVisits.test.js | 10 ++++ test/visits/helpers/MapModal.test.js | 61 +++++++++++++++++++++ test/visits/helpers/OpenMapModalBtn.test.js | 42 ++++++++++++++ 3 files changed, 113 insertions(+) create mode 100644 test/visits/helpers/MapModal.test.js create mode 100644 test/visits/helpers/OpenMapModalBtn.test.js 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..050a4f02 --- /dev/null +++ b/test/visits/helpers/MapModal.test.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { Modal, ModalHeader } 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(ModalHeader); + + expect(modal.prop('toggle')).toEqual(toggle); + expect(modal.prop('isOpen')).toEqual(isOpen); + expect(headerheader.prop('toggle')).toEqual(toggle); + expect(headerheader.prop('children')).toEqual(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); + }); +}); From b12dac1e359a28bdf244fc7f6f7f51c446b55110 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 9 Jan 2019 20:30:59 +0100 Subject: [PATCH 10/12] Improved map modal title --- src/visits/helpers/MapModal.js | 7 +++++-- src/visits/helpers/MapModal.scss | 16 +++++++++++++++- test/visits/helpers/MapModal.test.js | 8 ++++---- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/visits/helpers/MapModal.js b/src/visits/helpers/MapModal.js index 3f8407fa..a79cb672 100644 --- a/src/visits/helpers/MapModal.js +++ b/src/visits/helpers/MapModal.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Modal, ModalBody, ModalHeader } from 'reactstrap'; +import { Modal, ModalBody } from 'reactstrap'; import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; import * as PropTypes from 'prop-types'; import './MapModal.scss'; @@ -27,8 +27,11 @@ const OpenStreetMapTile = () => ( const MapModal = ({ toggle, isOpen, title, locations }) => ( - {title} +

+ {title} + +

{locations.map(({ cityName, latLong, count }, index) => ( diff --git a/src/visits/helpers/MapModal.scss b/src/visits/helpers/MapModal.scss index 1a23bae4..d37029c6 100644 --- a/src/visits/helpers/MapModal.scss +++ b/src/visits/helpers/MapModal.scss @@ -19,6 +19,16 @@ 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; @@ -27,5 +37,9 @@ .map-modal__modal .leaflet-container { flex: 1 1 auto; - border-radius: 0 0 .3rem .3rem; + border-radius: .3rem; +} + +.map-modal__modal .leaflet-top .leaflet-control { + margin-top: 60px; } diff --git a/test/visits/helpers/MapModal.test.js b/test/visits/helpers/MapModal.test.js index 050a4f02..41a6a370 100644 --- a/test/visits/helpers/MapModal.test.js +++ b/test/visits/helpers/MapModal.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { Modal, ModalHeader } from 'reactstrap'; +import { Modal } from 'reactstrap'; import { Marker, Popup } from 'react-leaflet'; import MapModal from '../../../src/visits/helpers/MapModal'; @@ -34,12 +34,12 @@ describe('', () => { it('renders modal with provided props', () => { const modal = wrapper.find(Modal); - const headerheader = wrapper.find(ModalHeader); + const headerheader = wrapper.find('.map-modal__modal-title'); expect(modal.prop('toggle')).toEqual(toggle); expect(modal.prop('isOpen')).toEqual(isOpen); - expect(headerheader.prop('toggle')).toEqual(toggle); - expect(headerheader.prop('children')).toEqual(title); + expect(headerheader.find('.close').prop('onClick')).toEqual(toggle); + expect(headerheader.text()).toContain(title); }); it('renders open street map tile', () => { From 40892f3e915f9efdfe4cd16ae43b8695d58627f4 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 9 Jan 2019 20:31:52 +0100 Subject: [PATCH 11/12] Updated changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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 From 77a624a8899a93a1358e500cdb8c77467bd97193 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 9 Jan 2019 20:34:35 +0100 Subject: [PATCH 12/12] Removed not needed call to function --- src/visits/SortableBarGraph.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js index a76bc5bf..1a30218b 100644 --- a/src/visits/SortableBarGraph.js +++ b/src/visits/SortableBarGraph.js @@ -1,10 +1,10 @@ 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) : identity(value); +const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : value; export default class SortableBarGraph extends React.Component { static propTypes = {