Added ordering capabilities to short URLs list

src/short-urls/ShortUrlsList.js

@@ -4,6 +4,8 @@ import Moment from 'react-moment';
 import { connect } from 'react-redux';
 import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { isEmpty } from 'ramda';
+import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
+import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
 import pieChartIcon from '@fortawesome/fontawesome-free-solid/faChartPie';
 import pictureIcon from '@fortawesome/fontawesome-free-regular/faImage';
 import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode';
@@ -15,25 +17,81 @@ import { listShortUrls } from './reducers/shortUrlsList';
 import './ShortUrlsList.scss';
 
 export class ShortUrlsList extends React.Component {
+  refreshList = extraParams => {
+    const { listShortUrls, shortUrlsListParams, match: { params } } = this.props;
+    listShortUrls(params.serverId, {
+      ...shortUrlsListParams,
+      ...extraParams
+    });
+  };
+
+  constructor(props) {
+    super(props);
+
+    const orderBy = props.shortUrlsListParams.orderBy;
+    this.state = {
+      orderField: orderBy ? Object.keys(orderBy)[0] : 'dateCreated',
+      orderDir: orderBy ? Object.values(orderBy)[0] : 'ASC',
+    }
+  }
+
   componentDidMount() {
     const { match: { params } } = this.props;
-    this.props.listShortUrls(params.serverId, {
-      ...this.props.shortUrlsListParams,
-      page: params.page
-    });
+    this.refreshList({ page: params.page });
   }
 
   render() {
+    const orderBy = field => {
+      const newOrderDir = this.state.orderField !== field ? 'ASC' : (this.state.orderDir === 'DESC' ? 'ASC' : 'DESC');
+      this.setState({ orderField: field, orderDir: newOrderDir });
+      this.refreshList({ orderBy: { [field]: newOrderDir } })
+    };
+    const renderOrderIcon = field => {
+      if (this.state.orderField !== field) {
+          return null;
+      }
+
+      return (
+        <FontAwesomeIcon
+          icon={this.state.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
+          className="short-urls-list__header-icon"
+        />
+      );
+    };
+
     return (
       <table className="table table-striped table-hover">
         <thead>
           <tr>
-            <th>Created at</th>
-            <th>Short URL</th>
-            <th>Original URL</th>
-            <th>Tags</th>
-            <th>Visits</th>
-            <th>&nbsp;</th>
+            <th
+              className="short-urls-list__header short-urls-list__header--with-action"
+              onClick={() => orderBy('dateCreated')}
+            >
+              {renderOrderIcon('dateCreated')}
+              Created at
+            </th>
+            <th
+              className="short-urls-list__header short-urls-list__header--with-action"
+              onClick={() => orderBy('shortCode')}
+            >
+              {renderOrderIcon('shortCode')}
+              Short URL
+            </th>
+            <th
+              className="short-urls-list__header short-urls-list__header--with-action"
+              onClick={() => orderBy('originalUrl')}
+            >
+              {renderOrderIcon('originalUrl')}
+              Original URL
+            </th>
+            <th className="short-urls-list__header">Tags</th>
+            <th
+              className="short-urls-list__header short-urls-list__header--with-action"
+              onClick={() => orderBy('visits')}
+            >
+              <span className="nowrap">{renderOrderIcon('visits')} Visits</span>
+            </th>
+            <th className="short-urls-list__header">&nbsp;</th>
           </tr>
         </thead>
         <tbody>

src/short-urls/ShortUrlsList.scss

@@ -4,6 +4,14 @@
   vertical-align: middle !important;
 }
 
+.short-urls-list__header--with-action {
+  cursor: pointer;
+}
+
+.short-urls-list__header-icon {
+  margin-right: 5px;
+}
+
 .short-urls-list__dropdown-toggle:before {
   display: none !important;
 }

src/short-urls/reducers/shortUrlsList.js

@@ -32,7 +32,7 @@ export const listShortUrls = (serverId, params = {}) => {
 
     ShlinkApiClient.setConfig(selectedServer);
     const shortUrls = await ShlinkApiClient.listShortUrls(params);
-    dispatch({ type: LIST_SHORT_URLS, shortUrls, selectedServer });
+    dispatch({ type: LIST_SHORT_URLS, shortUrls, selectedServer, params });
   };
 };
 

src/short-urls/reducers/shortUrlsListParams.js

@@ -1,8 +1,9 @@
-import { UPDATE_SHORT_URLS_LIST } from './shortUrlsList';
+import { UPDATE_SHORT_URLS_LIST, LIST_SHORT_URLS } from './shortUrlsList';
 
 export default function reducer(state = { page: 1 }, action) {
   switch (action.type) {
     case UPDATE_SHORT_URLS_LIST:
+    case LIST_SHORT_URLS:
       return { ...state, ...action.params };
     default:
       return state;