Merge pull request #67 from acelaya/feature/order-countries

Feature/order countries

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

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:not(:disabled),
-.dropdown-item:active {
+.dropdown-item:active:not(:disabled) {
   background-color: $lightGrey !important;
   color: inherit !important;
 }

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) => {
+  handleOrderBy = (orderField, orderDir) => {
-    if (this.state.orderField !== field) {
+    this.setState({ orderField, orderDir });
-      return 'ASC';
+    this.refreshList({ orderBy: { [orderField]: orderDir } });
-    }
-
-    const newOrderMap = {
-      ASC: 'DESC',
-      DESC: undefined,
-    };
-
-    return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC';
   };
-  orderBy = (field) => {
+  orderByColumn = (columnName) => () =>
-    const newOrderDir = this.determineOrderDir(field);
+    this.handleOrderBy(columnName, determineOrderDir(columnName, this.state.orderField, this.state.orderDir));
-
+  renderOrderIcon = (field) => {
-    this.setState({ orderField: newOrderDir !== undefined ? field : undefined, orderDir: newOrderDir });
-    this.refreshList({ orderBy: { [field]: newOrderDir } });
-  };
-  renderOrderIcon = (field, className = 'short-urls-list__header-icon') => {
     if (this.state.orderField !== field) {
       return null;
     }
@@ -67,7 +56,7 @@ export class ShortUrlsListComponent extends React.Component {
     return (
       <FontAwesomeIcon
         icon={this.state.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
-        className={className}
+        className="short-urls-list__header-icon"
       />
     );
   };
@@ -129,19 +118,12 @@ export class ShortUrlsListComponent extends React.Component {
   renderMobileOrderingControls() {
     return (
       <div className="d-block d-md-none mb-3">
-        <UncontrolledDropdown>
+        <SortingDropdown
-          <DropdownToggle caret className="btn-block">
+          items={SORTABLE_FIELDS}
-            Order by
+          orderField={this.state.orderField}
-          </DropdownToggle>
+          orderDir={this.state.orderDir}
-          <DropdownMenu className="short-urls-list__order-dropdown">
+          onChange={this.handleOrderBy}
-            {toPairs(SORTABLE_FIELDS).map(([ key, value ]) => (
+        />
-              <DropdownItem key={key} active={this.state.orderField === key} onClick={() => this.orderBy(key)}>
-                {value}
-                {this.renderOrderIcon(key, 'short-urls-list__header-icon--mobile')}
-              </DropdownItem>
-            ))}
-          </DropdownMenu>
-        </UncontrolledDropdown>
       </div>
     );
   }
@@ -155,21 +137,21 @@ export class ShortUrlsListComponent extends React.Component {
             <tr>
               <th
                 className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-                onClick={() => this.orderBy('dateCreated')}
+                onClick={this.orderByColumn('dateCreated')}
               >
                 {this.renderOrderIcon('dateCreated')}
                 Created at
               </th>
               <th
                 className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-                onClick={() => this.orderBy('shortCode')}
+                onClick={this.orderByColumn('shortCode')}
               >
                 {this.renderOrderIcon('shortCode')}
                 Short URL
               </th>
               <th
                 className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-                onClick={() => this.orderBy('originalUrl')}
+                onClick={this.orderByColumn('originalUrl')}
               >
                 {this.renderOrderIcon('originalUrl')}
                 Long URL
@@ -177,7 +159,7 @@ export class ShortUrlsListComponent extends React.Component {
               <th className="short-urls-list__header-cell">Tags</th>
               <th
                 className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
-                onClick={() => this.orderBy('visits')}
+                onClick={this.orderByColumn('visits')}
               >
                 <span className="nowrap">{this.renderOrderIcon('visits')} Visits</span>
               </th>

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%;
-}

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 (
-      <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
+      <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen}>
         <DropdownToggle size="sm" caret className="short-urls-row-menu__dropdown-toggle btn-outline-secondary">
           &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
         </DropdownToggle>
-        <DropdownMenu>
+        <DropdownMenu right>
           <DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortUrl.shortCode}/visits`}>
             <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit stats
           </DropdownItem>

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;
 }
 

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 (
+    <UncontrolledDropdown>
+      <DropdownToggle
+        caret
+        color={isButton ? 'secondary' : 'link'}
+        className={classNames({ 'btn-block': isButton, 'btn-sm sorting-dropdown__paddingless': !isButton })}
+      >
+        Order by
+      </DropdownToggle>
+      <DropdownMenu
+        right={right}
+        className={classNames('sorting-dropdown__menu', { 'sorting-dropdown__menu--link': !isButton })}
+      >
+        {toPairs(items).map(([ fieldKey, fieldValue ]) => (
+          <DropdownItem key={fieldKey} active={orderField === fieldKey} onClick={handleItemClick(fieldKey)}>
+            {fieldValue}
+            {orderField === fieldKey && (
+              <FontAwesomeIcon
+                icon={orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
+                className="sorting-dropdown__sort-icon"
+              />
+            )}
+          </DropdownItem>
+        ))}
+        <DropdownItem divider />
+        <DropdownItem disabled={!orderField} onClick={() => onChange()}>
+          <i>Clear selection</i>
+        </DropdownItem>
+      </DropdownMenu>
+    </UncontrolledDropdown>
+  );
+};
+
+SortingDropdown.propTypes = propTypes;
+SortingDropdown.defaultProps = defaultProps;
+
+export default SortingDropdown;

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;
+}

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';
+};

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 <Component data={generateGraphData(title, isBarChart, labels, data)} options={options} height={null} />;
 };
 
-const GraphCard = ({ title, isBarChart, stats, matchMedia }) => (
+const GraphCard = ({ title, children, isBarChart, stats, matchMedia }) => (
   <Card className="mt-4">
-    <CardHeader>{title}</CardHeader>
+    <CardHeader className="graph-card__header">{children || title}</CardHeader>
     <CardBody>{renderGraph(title, isBarChart, stats, matchMedia)}</CardBody>
   </Card>
 );

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 {
             <GraphCard title="Browsers" stats={processBrowserStats(visits)} />
           </div>
           <div className="col-md-6">
-            <GraphCard title="Countries" stats={processCountriesStats(visits)} isBarChart />
+            <SortableBarGraph
+              stats={processCountriesStats(visits)}
+              title="Countries"
+              sortingItems={{
+                name: 'Country name',
+                amount: 'Visits amount',
+              }}
+            />
           </div>
           <div className="col-md-6">
-            <GraphCard title="Referrers" stats={processReferrersStats(visits)} isBarChart />
+            <SortableBarGraph
+              stats={processReferrersStats(visits)}
+              title="Referrers"
+              sortingItems={{
+                name: 'Referrer name',
+                amount: 'Visits amount',
+              }}
+            />
           </div>
         </div>
       );

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 (
+      <GraphCard stats={sortStats()} isBarChart>
+        {title}
+        <div className="float-right">
+          <SortingDropdown
+            isButton={false}
+            right
+            orderField={this.state.orderField}
+            orderDir={this.state.orderDir}
+            items={sortingItems}
+            onChange={(orderField, orderDir) => this.setState({ orderField, orderDir })}
+          />
+        </div>
+      </GraphCard>
+    );
+  }
+}

test/common/AsideMenu.test.js

@@ -9,9 +9,7 @@ describe('<AsideMenu />', () => {
   beforeEach(() => {
     wrapped = shallow(<AsideMenu selectedServer={{ id: 'abc123' }} />);
   });
-  afterEach(() => {
+  afterEach(() => wrapped.unmount());
-    wrapped.unmount();
-  });
 
   it('contains links to different sections', () => {
     const links = wrapped.find(NavLink);

test/short-urls/Paginator.test.js

@@ -6,11 +6,7 @@ import Paginator from '../../src/short-urls/Paginator';
 describe('<Paginator />', () => {
   let wrapper;
 
-  afterEach(() => {
+  afterEach(() => wrapper && wrapper.unmount());
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
 
   it('renders nothing if the number of pages is below 2', () => {
     wrapper = shallow(<Paginator serverId="abc123" />);

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('<SortingDropdown />', () => {
+  let wrapper;
+  const items = {
+    foo: 'Foo',
+    bar: 'Bar',
+    baz: 'Hello World',
+  };
+  const createWrapper = (props) => {
+    wrapper = shallow(<SortingDropdown items={items} onChange={identity} {...props} />);
+
+    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);
+  });
+});

test/visits/GraphCard.test.js

@@ -12,11 +12,7 @@ describe('<GraphCard />', () => {
   };
   const matchMedia = () => ({ matches: false });
 
-  afterEach(() => {
+  afterEach(() => wrapper && wrapper.unmount());
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
 
   it('renders Doughnut when is not a bar chart', () => {
     wrapper = shallow(<GraphCard matchMedia={matchMedia} title="The chart" stats={stats} />);

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('<ShortUrlVisits />', () => {
   let wrapper;
@@ -69,9 +70,10 @@ describe('<ShortUrlVisits />', () => {
   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', () => {