Added order control to countries graph

src/short-urls/ShortUrlsList.js

@@ -43,10 +43,7 @@ export class ShortUrlsListComponent extends React.Component {
     });
   };
   handleOrderBy = (orderField, orderDir) => {
-    this.setState({
+    this.setState({ orderField, orderDir });
-      orderDir,
-      orderField: orderDir !== undefined ? orderField : undefined,
-    });
     this.refreshList({ orderBy: { [orderField]: orderDir } });
   };
   orderByColumn = (columnName) => () =>

src/utils/SortingDropdown.js

@@ -5,26 +5,45 @@ 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 }) => (
+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 className="btn-block">Order by</DropdownToggle>
+      <DropdownToggle
-    <DropdownMenu className="sorting-dropdown__menu">
+        caret
-      {toPairs(items).map(([ fieldKey, fieldValue ]) => (
+        color={isButton ? 'secondary' : 'link'}
-        <DropdownItem
+        className={classNames({ 'btn-block': isButton, 'btn-sm sorting-dropdown__paddingless': !isButton })}
-          key={fieldKey}
-          active={orderField === fieldKey}
-          onClick={() => onChange(fieldKey, determineOrderDir(fieldKey, orderField, orderDir))}
       >
+        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
@@ -34,10 +53,16 @@ const SortingDropdown = ({ items, orderField, orderDir, onChange }) => (
             )}
           </DropdownItem>
         ))}
+        <DropdownItem divider />
+        <DropdownItem onClick={() => onChange()}>
+          <i>Clear selection</i>
+        </DropdownItem>
       </DropdownMenu>
     </UncontrolledDropdown>
-);
+  );
+};
 
 SortingDropdown.propTypes = propTypes;
+SortingDropdown.defaultProps = defaultProps;
 
 export default SortingDropdown;

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

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

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 CountriesGraph from './CountriesGraph';
 import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits';
 import {
   processBrowserStats,
@@ -95,7 +96,7 @@ 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 />
+            <CountriesGraph stats={processCountriesStats(visits)} />
           </div>
           <div className="col-md-6">
             <GraphCard title="Referrers" stats={processReferrersStats(visits)} isBarChart />

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('<SortingDropdown />', () => {
     baz: 'Hello World',
   };
   const createWrapper = (props) => {
-    wrapper = shallow(<SortingDropdown items={items} {...props} />);
+    wrapper = shallow(<SortingDropdown items={items} onChange={identity} {...props} />);
 
     return wrapper;
   };
@@ -26,8 +26,9 @@ describe('<SortingDropdown />', () => {
     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');

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