diff --git a/CHANGELOG.md b/CHANGELOG.md index 0fad0cdf..d3c9b09b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,29 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org). +## [Unreleased] + +#### Added + +* [#65](https://github.com/shlinkio/shlink-web-client/issues/65) Added sorting to both countries and referrers stats graphs. + +#### Changed + +* *Nothing* + +#### Deprecated + +* *Nothing* + +#### Removed + +* *Nothing* + +#### Fixed + +* *Nothing* + + ## 1.1.1 - 2018-10-20 #### Added diff --git a/src/index.scss b/src/index.scss index f9f7bd22..cc361862 100644 --- a/src/index.scss +++ b/src/index.scss @@ -18,12 +18,12 @@ body, background-color: $mainColor !important; } -.dropdown-item { +.dropdown-item:not(:disabled) { cursor: pointer; } -.dropdown-item.active, -.dropdown-item:active { +.dropdown-item.active:not(:disabled), +.dropdown-item:active:not(:disabled) { background-color: $lightGrey !important; color: inherit !important; } diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js index 40c96ad3..945923a1 100644 --- a/src/short-urls/ShortUrlsList.js +++ b/src/short-urls/ShortUrlsList.js @@ -1,17 +1,18 @@ import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown'; import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp'; import FontAwesomeIcon from '@fortawesome/react-fontawesome'; -import { head, isEmpty, pick, toPairs, keys, values } from 'ramda'; +import { head, isEmpty, keys, pick, values } from 'ramda'; import React from 'react'; import { connect } from 'react-redux'; -import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap'; import qs from 'qs'; import PropTypes from 'prop-types'; import { serverType } from '../servers/prop-types'; +import SortingDropdown from '../utils/SortingDropdown'; +import { determineOrderDir } from '../utils/utils'; import { ShortUrlsRow } from './helpers/ShortUrlsRow'; import { listShortUrls, shortUrlType } from './reducers/shortUrlsList'; +import { resetShortUrlParams, shortUrlsListParamsType } from './reducers/shortUrlsListParams'; import './ShortUrlsList.scss'; -import { shortUrlsListParamsType, resetShortUrlParams } from './reducers/shortUrlsListParams'; const SORTABLE_FIELDS = { dateCreated: 'Created at', @@ -41,25 +42,13 @@ export class ShortUrlsListComponent extends React.Component { ...extraParams, }); }; - determineOrderDir = (field) => { - if (this.state.orderField !== field) { - return 'ASC'; - } - - const newOrderMap = { - ASC: 'DESC', - DESC: undefined, - }; - - return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC'; + handleOrderBy = (orderField, orderDir) => { + this.setState({ orderField, orderDir }); + this.refreshList({ orderBy: { [orderField]: orderDir } }); }; - orderBy = (field) => { - const newOrderDir = this.determineOrderDir(field); - - this.setState({ orderField: newOrderDir !== undefined ? field : undefined, orderDir: newOrderDir }); - this.refreshList({ orderBy: { [field]: newOrderDir } }); - }; - renderOrderIcon = (field, className = 'short-urls-list__header-icon') => { + orderByColumn = (columnName) => () => + this.handleOrderBy(columnName, determineOrderDir(columnName, this.state.orderField, this.state.orderDir)); + renderOrderIcon = (field) => { if (this.state.orderField !== field) { return null; } @@ -67,7 +56,7 @@ export class ShortUrlsListComponent extends React.Component { return ( ); }; @@ -129,19 +118,12 @@ export class ShortUrlsListComponent extends React.Component { renderMobileOrderingControls() { return (
- - - Order by - - - {toPairs(SORTABLE_FIELDS).map(([ key, value ]) => ( - this.orderBy(key)}> - {value} - {this.renderOrderIcon(key, 'short-urls-list__header-icon--mobile')} - - ))} - - +
); } @@ -155,21 +137,21 @@ export class ShortUrlsListComponent extends React.Component { this.orderBy('dateCreated')} + onClick={this.orderByColumn('dateCreated')} > {this.renderOrderIcon('dateCreated')} Created at this.orderBy('shortCode')} + onClick={this.orderByColumn('shortCode')} > {this.renderOrderIcon('shortCode')} Short URL this.orderBy('originalUrl')} + onClick={this.orderByColumn('originalUrl')} > {this.renderOrderIcon('originalUrl')} Long URL @@ -177,7 +159,7 @@ export class ShortUrlsListComponent extends React.Component { Tags this.orderBy('visits')} + onClick={this.orderByColumn('visits')} > {this.renderOrderIcon('visits')} Visits diff --git a/src/short-urls/ShortUrlsList.scss b/src/short-urls/ShortUrlsList.scss index 020081dd..171705de 100644 --- a/src/short-urls/ShortUrlsList.scss +++ b/src/short-urls/ShortUrlsList.scss @@ -14,15 +14,6 @@ margin-right: 5px; } -.short-urls-list__header-icon--mobile { - margin: 3.5px 0 0; - float: right; -} - .short-urls-list__header-cell--with-action { cursor: pointer; } - -.short-urls-list__order-dropdown { - width: 100%; -} diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js index bc39f8f0..c1348a14 100644 --- a/src/short-urls/helpers/ShortUrlsRowMenu.js +++ b/src/short-urls/helpers/ShortUrlsRowMenu.js @@ -15,9 +15,9 @@ import { serverType } from '../../servers/prop-types'; import { shortUrlType } from '../reducers/shortUrlsList'; import PreviewModal from './PreviewModal'; import QrCodeModal from './QrCodeModal'; -import './ShortUrlsRowMenu.scss'; import EditTagsModal from './EditTagsModal'; import DeleteShortUrlModal from './DeleteShortUrlModal'; +import './ShortUrlsRowMenu.scss'; export class ShortUrlsRowMenu extends React.Component { static propTypes = { @@ -46,11 +46,11 @@ export class ShortUrlsRowMenu extends React.Component { const toggleDelete = toggleModal('isDeleteModalOpen'); return ( - +    - +  Visit stats diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.scss b/src/short-urls/helpers/ShortUrlsRowMenu.scss index b0799fe8..0569dec5 100644 --- a/src/short-urls/helpers/ShortUrlsRowMenu.scss +++ b/src/short-urls/helpers/ShortUrlsRowMenu.scss @@ -1,6 +1,6 @@ @import '../../utils/base'; -.short-urls-row-menu__dropdown-toggle:before { +.short-urls-row-menu__dropdown-toggle:after { display: none !important; } diff --git a/src/utils/SortingDropdown.js b/src/utils/SortingDropdown.js new file mode 100644 index 00000000..1388c586 --- /dev/null +++ b/src/utils/SortingDropdown.js @@ -0,0 +1,68 @@ +import React from 'react'; +import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; +import { toPairs } from 'ramda'; +import PropTypes from 'prop-types'; +import FontAwesomeIcon from '@fortawesome/react-fontawesome'; +import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp'; +import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown'; +import classNames from 'classnames'; +import { determineOrderDir } from '../utils/utils'; +import './SortingDropdown.scss'; + +const propTypes = { + items: PropTypes.object.isRequired, + orderField: PropTypes.string, + orderDir: PropTypes.oneOf([ 'ASC', 'DESC' ]), + onChange: PropTypes.func.isRequired, + isButton: PropTypes.bool, + right: PropTypes.bool, +}; +const defaultProps = { + isButton: true, + right: false, +}; + +const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, right }) => { + const handleItemClick = (fieldKey) => () => { + const newOrderDir = determineOrderDir(fieldKey, orderField, orderDir); + + onChange(newOrderDir ? fieldKey : undefined, newOrderDir); + }; + + return ( + + + Order by + + + {toPairs(items).map(([ fieldKey, fieldValue ]) => ( + + {fieldValue} + {orderField === fieldKey && ( + + )} + + ))} + + onChange()}> + Clear selection + + + + ); +}; + +SortingDropdown.propTypes = propTypes; +SortingDropdown.defaultProps = defaultProps; + +export default SortingDropdown; diff --git a/src/utils/SortingDropdown.scss b/src/utils/SortingDropdown.scss new file mode 100644 index 00000000..5f9c624e --- /dev/null +++ b/src/utils/SortingDropdown.scss @@ -0,0 +1,16 @@ +.sorting-dropdown__menu { + width: 100%; +} + +.sorting-dropdown__menu--link.sorting-dropdown__menu--link { + min-width: 11rem; +} + +.sorting-dropdown__sort-icon { + margin: 3.5px 0 0; + float: right; +} + +.sorting-dropdown__paddingless.sorting-dropdown__paddingless { + padding: 0; +} diff --git a/src/utils/utils.js b/src/utils/utils.js index b1046022..42e65983 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -4,3 +4,16 @@ export const stateFlagTimeout = (setState, flagName, initialValue = true, delay setState({ [flagName]: initialValue }); setTimeout(() => setState({ [flagName]: !initialValue }), delay); }; + +export const determineOrderDir = (clickedField, currentOrderField, currentOrderDir) => { + if (currentOrderField !== clickedField) { + return 'ASC'; + } + + const newOrderMap = { + ASC: 'DESC', + DESC: undefined, + }; + + return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC'; +}; diff --git a/src/visits/GraphCard.js b/src/visits/GraphCard.js index 4351fefa..b6e8a914 100644 --- a/src/visits/GraphCard.js +++ b/src/visits/GraphCard.js @@ -6,6 +6,7 @@ import { keys, values } from 'ramda'; const propTypes = { title: PropTypes.string, + children: PropTypes.node, isBarChart: PropTypes.bool, stats: PropTypes.object, matchMedia: PropTypes.func, @@ -80,9 +81,9 @@ const renderGraph = (title, isBarChart, stats, matchMedia) => { return ; }; -const GraphCard = ({ title, isBarChart, stats, matchMedia }) => ( +const GraphCard = ({ title, children, isBarChart, stats, matchMedia }) => ( - {title} + {children || title} {renderGraph(title, isBarChart, stats, matchMedia)} ); diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index 72d162cb..e84fd713 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -7,6 +7,7 @@ import { Card } from 'reactstrap'; import PropTypes from 'prop-types'; import DateInput from '../common/DateInput'; import MutedMessage from '../utils/MuttedMessage'; +import SortableBarGraph from './SortableBarGraph'; import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits'; import { processBrowserStats, @@ -95,10 +96,24 @@ export class ShortUrlsVisitsComponent extends React.Component {
- +
- +
); diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js new file mode 100644 index 00000000..7cf551e0 --- /dev/null +++ b/src/visits/SortableBarGraph.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { fromPairs, head, keys, prop, reverse, sortBy, toPairs } from 'ramda'; +import SortingDropdown from '../utils/SortingDropdown'; +import GraphCard from './GraphCard'; + +export default class SortableBarGraph extends React.Component { + static propTypes = { + stats: PropTypes.object.isRequired, + title: PropTypes.string.isRequired, + sortingItems: PropTypes.object.isRequired, + }; + + state = { + orderField: undefined, + orderDir: undefined, + }; + + render() { + const { stats, sortingItems, title } = this.props; + const sortStats = () => { + if (!this.state.orderField) { + return stats; + } + + const sortedPairs = sortBy(prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1), toPairs(stats)); + + return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs)); + }; + + return ( + + {title} +
+ this.setState({ orderField, orderDir })} + /> +
+ + ); + } +} diff --git a/test/common/AsideMenu.test.js b/test/common/AsideMenu.test.js index febc65a8..f2241ee4 100644 --- a/test/common/AsideMenu.test.js +++ b/test/common/AsideMenu.test.js @@ -9,9 +9,7 @@ describe('', () => { beforeEach(() => { wrapped = shallow(); }); - afterEach(() => { - wrapped.unmount(); - }); + afterEach(() => wrapped.unmount()); it('contains links to different sections', () => { const links = wrapped.find(NavLink); diff --git a/test/short-urls/Paginator.test.js b/test/short-urls/Paginator.test.js index f4893c41..f292dea9 100644 --- a/test/short-urls/Paginator.test.js +++ b/test/short-urls/Paginator.test.js @@ -6,11 +6,7 @@ import Paginator from '../../src/short-urls/Paginator'; describe('', () => { let wrapper; - afterEach(() => { - if (wrapper) { - wrapper.unmount(); - } - }); + afterEach(() => wrapper && wrapper.unmount()); it('renders nothing if the number of pages is below 2', () => { wrapper = shallow(); diff --git a/test/utils/SortingDropdown.test.js b/test/utils/SortingDropdown.test.js new file mode 100644 index 00000000..c93ffd79 --- /dev/null +++ b/test/utils/SortingDropdown.test.js @@ -0,0 +1,78 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { DropdownItem } from 'reactstrap'; +import { identity, values } from 'ramda'; +import FontAwesomeIcon from '@fortawesome/react-fontawesome'; +import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown'; +import * as sinon from 'sinon'; +import SortingDropdown from '../../src/utils/SortingDropdown'; + +describe('', () => { + let wrapper; + const items = { + foo: 'Foo', + bar: 'Bar', + baz: 'Hello World', + }; + const createWrapper = (props) => { + wrapper = shallow(); + + return wrapper; + }; + + afterEach(() => wrapper && wrapper.unmount()); + + it('properly renders provided list of items', () => { + const wrapper = createWrapper(); + const dropdownItems = wrapper.find(DropdownItem); + const secondIndex = 2; + const clearItemsCount = 2; + + expect(dropdownItems).toHaveLength(values(items).length + clearItemsCount); + expect(dropdownItems.at(0).html()).toContain('Foo'); + expect(dropdownItems.at(1).html()).toContain('Bar'); + expect(dropdownItems.at(secondIndex).html()).toContain('Hello World'); + }); + + it('properly marks selected field as active with proper icon', () => { + const wrapper = createWrapper({ orderField: 'bar', orderDir: 'DESC' }); + const activeItem = wrapper.find('DropdownItem[active=true]'); + const activeItemIcon = activeItem.first().find(FontAwesomeIcon); + + expect(activeItem).toHaveLength(1); + expect(activeItemIcon.prop('icon')).toEqual(caretDownIcon); + }); + + it('triggers change function when item is clicked and no order field was provided', () => { + const onChange = sinon.spy(); + const wrapper = createWrapper({ onChange }); + const firstItem = wrapper.find(DropdownItem).first(); + + firstItem.simulate('click'); + + expect(onChange.callCount).toEqual(1); + expect(onChange.calledWith('foo', 'ASC')).toEqual(true); + }); + + it('triggers change function when item is clicked and an order field was provided', () => { + const onChange = sinon.spy(); + const wrapper = createWrapper({ onChange, orderField: 'baz', orderDir: 'ASC' }); + const firstItem = wrapper.find(DropdownItem).first(); + + firstItem.simulate('click'); + + expect(onChange.callCount).toEqual(1); + expect(onChange.calledWith('foo', 'ASC')).toEqual(true); + }); + + it('updates order dir when already selected item is clicked', () => { + const onChange = sinon.spy(); + const wrapper = createWrapper({ onChange, orderField: 'foo', orderDir: 'ASC' }); + const firstItem = wrapper.find(DropdownItem).first(); + + firstItem.simulate('click'); + + expect(onChange.callCount).toEqual(1); + expect(onChange.calledWith('foo', 'DESC')).toEqual(true); + }); +}); diff --git a/test/visits/GraphCard.test.js b/test/visits/GraphCard.test.js index 0525efd0..d6820008 100644 --- a/test/visits/GraphCard.test.js +++ b/test/visits/GraphCard.test.js @@ -12,11 +12,7 @@ describe('', () => { }; const matchMedia = () => ({ matches: false }); - afterEach(() => { - if (wrapper) { - wrapper.unmount(); - } - }); + afterEach(() => wrapper && wrapper.unmount()); it('renders Doughnut when is not a bar chart', () => { wrapper = shallow(); diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js index 56837968..f2f236e3 100644 --- a/test/visits/ShortUrlVisits.test.js +++ b/test/visits/ShortUrlVisits.test.js @@ -7,6 +7,7 @@ import { ShortUrlsVisitsComponent as ShortUrlsVisits } from '../../src/visits/Sh import MutedMessage from '../../src/utils/MuttedMessage'; import GraphCard from '../../src/visits/GraphCard'; import DateInput from '../../src/common/DateInput'; +import SortableBarGraph from '../../src/visits/SortableBarGraph'; describe('', () => { let wrapper; @@ -69,9 +70,10 @@ describe('', () => { it('renders all graphics when visits are properly loaded', () => { const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); const graphs = wrapper.find(GraphCard); + const sortableBarGraphs = wrapper.find(SortableBarGraph); const expectedGraphsCount = 4; - expect(graphs).toHaveLength(expectedGraphsCount); + expect(graphs.length + sortableBarGraphs.length).toEqual(expectedGraphsCount); }); it('reloads visits when selected dates change', () => {