From 4ad8e909d41ba72cfce6f4d0cf716b7a696369a1 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 28 Oct 2018 21:26:47 +0100 Subject: [PATCH 1/6] Extracted sorting dropdown to its own component --- src/short-urls/ShortUrlsList.js | 63 ++++++++++-------------- src/short-urls/ShortUrlsList.scss | 9 ---- src/utils/SortingDropdown.js | 43 +++++++++++++++++ src/utils/SortingDropdown.scss | 8 ++++ src/utils/utils.js | 13 +++++ test/common/AsideMenu.test.js | 4 +- test/short-urls/Paginator.test.js | 6 +-- test/utils/SortingDropdown.test.js | 77 ++++++++++++++++++++++++++++++ test/visits/GraphCard.test.js | 6 +-- 9 files changed, 168 insertions(+), 61 deletions(-) create mode 100644 src/utils/SortingDropdown.js create mode 100644 src/utils/SortingDropdown.scss create mode 100644 test/utils/SortingDropdown.test.js diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js index 40c96ad3..f9cb90dd 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,16 @@ 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({ + orderDir, + orderField: orderDir !== undefined ? orderField : undefined, + }); + 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 +59,7 @@ export class ShortUrlsListComponent extends React.Component { return ( ); }; @@ -129,19 +121,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 +140,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 +162,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/utils/SortingDropdown.js b/src/utils/SortingDropdown.js new file mode 100644 index 00000000..35233744 --- /dev/null +++ b/src/utils/SortingDropdown.js @@ -0,0 +1,43 @@ +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 { determineOrderDir } from '../utils/utils'; +import './SortingDropdown.scss'; + +const propTypes = { + items: PropTypes.object, + orderField: PropTypes.string, + orderDir: PropTypes.oneOf([ 'ASC', 'DESC' ]), + onChange: PropTypes.func, +}; + +const SortingDropdown = ({ items, orderField, orderDir, onChange }) => ( + + Order by + + {toPairs(items).map(([ fieldKey, fieldValue ]) => ( + onChange(fieldKey, determineOrderDir(fieldKey, orderField, orderDir))} + > + {fieldValue} + {orderField === fieldKey && ( + + )} + + ))} + + +); + +SortingDropdown.propTypes = propTypes; + +export default SortingDropdown; diff --git a/src/utils/SortingDropdown.scss b/src/utils/SortingDropdown.scss new file mode 100644 index 00000000..6c5ac887 --- /dev/null +++ b/src/utils/SortingDropdown.scss @@ -0,0 +1,8 @@ +.sorting-dropdown__menu { + width: 100%; +} + +.sorting-dropdown__sort-icon { + margin: 3.5px 0 0; + float: right; +} 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/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..e0e73fc3 --- /dev/null +++ b/test/utils/SortingDropdown.test.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { DropdownItem } from 'reactstrap'; +import { 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; + + expect(dropdownItems).toHaveLength(values(items).length); + 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(); From 6634fc41c5e77e4fb4d6c0b51e701a0bd83360b4 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 28 Oct 2018 21:51:54 +0100 Subject: [PATCH 2/6] Fixed short urls dropdown menu not properly located --- src/short-urls/helpers/ShortUrlsRowMenu.js | 6 +++--- src/short-urls/helpers/ShortUrlsRowMenu.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) 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; } From 368de2b4c710e3249925177e093a4e86dacb3292 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 28 Oct 2018 22:54:08 +0100 Subject: [PATCH 3/6] Added order control to countries graph --- src/short-urls/ShortUrlsList.js | 5 +-- src/utils/SortingDropdown.js | 71 ++++++++++++++++++++---------- src/utils/SortingDropdown.scss | 8 ++++ src/visits/CountriesGraph.js | 49 +++++++++++++++++++++ src/visits/GraphCard.js | 5 ++- src/visits/ShortUrlVisits.js | 3 +- test/utils/SortingDropdown.test.js | 7 +-- test/visits/ShortUrlVisits.test.js | 5 ++- 8 files changed, 119 insertions(+), 34 deletions(-) create mode 100644 src/visits/CountriesGraph.js diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js index f9cb90dd..945923a1 100644 --- a/src/short-urls/ShortUrlsList.js +++ b/src/short-urls/ShortUrlsList.js @@ -43,10 +43,7 @@ export class ShortUrlsListComponent extends React.Component { }); }; handleOrderBy = (orderField, orderDir) => { - this.setState({ - orderDir, - orderField: orderDir !== undefined ? orderField : undefined, - }); + this.setState({ orderField, orderDir }); this.refreshList({ orderBy: { [orderField]: orderDir } }); }; orderByColumn = (columnName) => () => diff --git a/src/utils/SortingDropdown.js b/src/utils/SortingDropdown.js index 35233744..46b6462b 100644 --- a/src/utils/SortingDropdown.js +++ b/src/utils/SortingDropdown.js @@ -5,39 +5,64 @@ 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, + items: PropTypes.object.isRequired, orderField: PropTypes.string, orderDir: PropTypes.oneOf([ 'ASC', 'DESC' ]), - onChange: PropTypes.func, + onChange: PropTypes.func.isRequired, + isButton: PropTypes.bool, + right: PropTypes.bool, +}; +const defaultProps = { + isButton: true, + right: false, }; -const SortingDropdown = ({ items, orderField, orderDir, onChange }) => ( - - Order by - - {toPairs(items).map(([ fieldKey, fieldValue ]) => ( - onChange(fieldKey, determineOrderDir(fieldKey, orderField, orderDir))} - > - {fieldValue} - {orderField === fieldKey && ( - - )} +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 index 6c5ac887..5f9c624e 100644 --- a/src/utils/SortingDropdown.scss +++ b/src/utils/SortingDropdown.scss @@ -2,7 +2,15 @@ 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/visits/CountriesGraph.js b/src/visits/CountriesGraph.js new file mode 100644 index 00000000..f4f276cd --- /dev/null +++ b/src/visits/CountriesGraph.js @@ -0,0 +1,49 @@ +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 CountriesGraph extends React.Component { + static propTypes = { + stats: PropTypes.any, + }; + + state = { + orderField: undefined, + orderDir: undefined, + }; + + render() { + const items = { + name: 'Country name', + amount: 'Visits amount', + }; + const { stats } = this.props; + const sortStats = () => { + if (!this.state.orderField) { + return stats; + } + + const sortedPairs = sortBy(prop(this.state.orderField === head(keys(items)) ? 0 : 1), toPairs(stats)); + + return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs)); + }; + + return ( + + Countries +
+ this.setState({ orderField, orderDir })} + /> +
+ + ); + } +} 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..f65982d7 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 CountriesGraph from './CountriesGraph'; import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits'; import { processBrowserStats, @@ -95,7 +96,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
- +
diff --git a/test/utils/SortingDropdown.test.js b/test/utils/SortingDropdown.test.js index e0e73fc3..c93ffd79 100644 --- a/test/utils/SortingDropdown.test.js +++ b/test/utils/SortingDropdown.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { shallow } from 'enzyme'; import { DropdownItem } from 'reactstrap'; -import { values } from 'ramda'; +import { identity, values } from 'ramda'; import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown'; import * as sinon from 'sinon'; @@ -15,7 +15,7 @@ describe('', () => { baz: 'Hello World', }; const createWrapper = (props) => { - wrapper = shallow(); + wrapper = shallow(); return wrapper; }; @@ -26,8 +26,9 @@ describe('', () => { const wrapper = createWrapper(); const dropdownItems = wrapper.find(DropdownItem); const secondIndex = 2; + const clearItemsCount = 2; - expect(dropdownItems).toHaveLength(values(items).length); + 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'); diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js index 56837968..8b719bd4 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 CountriesGraph from '../../src/visits/CountriesGraph'; describe('', () => { let wrapper; @@ -69,9 +70,11 @@ describe('', () => { it('renders all graphics when visits are properly loaded', () => { const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); const graphs = wrapper.find(GraphCard); - const expectedGraphsCount = 4; + const countriesGraphs = wrapper.find(CountriesGraph); + const expectedGraphsCount = 3; expect(graphs).toHaveLength(expectedGraphsCount); + expect(countriesGraphs).toHaveLength(1); }); it('reloads visits when selected dates change', () => { From 05936c52b3283830e03a5035fab72a2d8cc29b4c Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 28 Oct 2018 23:04:52 +0100 Subject: [PATCH 4/6] Added sorting to referrers bar graph --- src/utils/SortingDropdown.js | 2 +- src/visits/ShortUrlVisits.js | 20 ++++++++++++++++--- ...{CountriesGraph.js => SortableBarGraph.js} | 18 ++++++++--------- test/visits/ShortUrlVisits.test.js | 9 ++++----- 4 files changed, 30 insertions(+), 19 deletions(-) rename src/visits/{CountriesGraph.js => SortableBarGraph.js} (74%) diff --git a/src/utils/SortingDropdown.js b/src/utils/SortingDropdown.js index 46b6462b..1388c586 100644 --- a/src/utils/SortingDropdown.js +++ b/src/utils/SortingDropdown.js @@ -54,7 +54,7 @@ const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, righ ))} - onChange()}> + onChange()}> Clear selection diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index f65982d7..e84fd713 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -7,7 +7,7 @@ import { Card } from 'reactstrap'; import PropTypes from 'prop-types'; import DateInput from '../common/DateInput'; import MutedMessage from '../utils/MuttedMessage'; -import CountriesGraph from './CountriesGraph'; +import SortableBarGraph from './SortableBarGraph'; import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits'; import { processBrowserStats, @@ -96,10 +96,24 @@ export class ShortUrlsVisitsComponent extends React.Component {
- +
- +
); diff --git a/src/visits/CountriesGraph.js b/src/visits/SortableBarGraph.js similarity index 74% rename from src/visits/CountriesGraph.js rename to src/visits/SortableBarGraph.js index f4f276cd..7cf551e0 100644 --- a/src/visits/CountriesGraph.js +++ b/src/visits/SortableBarGraph.js @@ -4,9 +4,11 @@ import { fromPairs, head, keys, prop, reverse, sortBy, toPairs } from 'ramda'; import SortingDropdown from '../utils/SortingDropdown'; import GraphCard from './GraphCard'; -export default class CountriesGraph extends React.Component { +export default class SortableBarGraph extends React.Component { static propTypes = { - stats: PropTypes.any, + stats: PropTypes.object.isRequired, + title: PropTypes.string.isRequired, + sortingItems: PropTypes.object.isRequired, }; state = { @@ -15,31 +17,27 @@ export default class CountriesGraph extends React.Component { }; render() { - const items = { - name: 'Country name', - amount: 'Visits amount', - }; - const { stats } = this.props; + const { stats, sortingItems, title } = this.props; const sortStats = () => { if (!this.state.orderField) { return stats; } - const sortedPairs = sortBy(prop(this.state.orderField === head(keys(items)) ? 0 : 1), toPairs(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 ( - Countries + {title}
this.setState({ orderField, orderDir })} />
diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js index 8b719bd4..f2f236e3 100644 --- a/test/visits/ShortUrlVisits.test.js +++ b/test/visits/ShortUrlVisits.test.js @@ -7,7 +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 CountriesGraph from '../../src/visits/CountriesGraph'; +import SortableBarGraph from '../../src/visits/SortableBarGraph'; describe('', () => { let wrapper; @@ -70,11 +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 countriesGraphs = wrapper.find(CountriesGraph); - const expectedGraphsCount = 3; + const sortableBarGraphs = wrapper.find(SortableBarGraph); + const expectedGraphsCount = 4; - expect(graphs).toHaveLength(expectedGraphsCount); - expect(countriesGraphs).toHaveLength(1); + expect(graphs.length + sortableBarGraphs.length).toEqual(expectedGraphsCount); }); it('reloads visits when selected dates change', () => { From 99833b51a9216f0f43e0ce1e1525974a5cb24f28 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 28 Oct 2018 23:06:57 +0100 Subject: [PATCH 5/6] Ensured dropdown item styles are not overriden for disabled items --- src/index.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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; } From f1c464fd3e56bd86f852846f2583293af10b6b8a Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 28 Oct 2018 23:08:46 +0100 Subject: [PATCH 6/6] Added unreleased entry in changelog --- CHANGELOG.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) 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