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) => {
-    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 (
       <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>
-          <DropdownToggle caret className="btn-block">
-            Order by
-          </DropdownToggle>
-          <DropdownMenu className="short-urls-list__order-dropdown">
-            {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>
+        <SortingDropdown
+          items={SORTABLE_FIELDS}
+          orderField={this.state.orderField}
+          orderDir={this.state.orderDir}
+          onChange={this.handleOrderBy}
+        />
       </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';
+};