Extracted sorting dropdown to its own component

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) => {
+  handleOrderBy = (orderField, orderDir) => {
-    if (this.state.orderField !== field) {
+    this.setState({
-      return 'ASC';
+      orderDir,
-    }
+      orderField: orderDir !== undefined ? orderField : undefined,
-
+    });
-    const newOrderMap = {
+    this.refreshList({ orderBy: { [orderField]: orderDir } });
-      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 +59,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 +121,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 +140,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 +162,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/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 }) => (
+  <UncontrolledDropdown>
+    <DropdownToggle caret className="btn-block">Order by</DropdownToggle>
+    <DropdownMenu className="sorting-dropdown__menu">
+      {toPairs(items).map(([ fieldKey, fieldValue ]) => (
+        <DropdownItem
+          key={fieldKey}
+          active={orderField === fieldKey}
+          onClick={() => onChange(fieldKey, determineOrderDir(fieldKey, orderField, orderDir))}
+        >
+          {fieldValue}
+          {orderField === fieldKey && (
+            <FontAwesomeIcon
+              icon={orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
+              className="sorting-dropdown__sort-icon"
+            />
+          )}
+        </DropdownItem>
+      ))}
+    </DropdownMenu>
+  </UncontrolledDropdown>
+);
+
+SortingDropdown.propTypes = propTypes;
+
+export default SortingDropdown;

src/utils/SortingDropdown.scss

@@ -0,0 +1,8 @@
+.sorting-dropdown__menu {
+  width: 100%;
+}
+
+.sorting-dropdown__sort-icon {
+  margin: 3.5px 0 0;
+  float: right;
+}

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

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

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