From e4d5424c078fc02db2132209cf453ba19d9ff087 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 10 Aug 2018 21:38:24 +0200
Subject: [PATCH] Fixed short URLs ordering in desktop resolutions

---
 src/short-urls/ShortUrlsList.js          | 23 +++++++++++++++++------
 src/short-urls/ShortUrlsList.scss        |  4 ++++
 src/short-urls/helpers/ShortUrlsRow.scss |  3 ++-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 68afb2a3..b603b8ac 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -1,7 +1,7 @@
 import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
 import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { isEmpty, pick } from 'ramda';
+import { head, isEmpty, pick } from 'ramda';
 import React from 'react';
 import { connect } from 'react-redux';
 import { ShortUrlsRow } from './helpers/ShortUrlsRow';
@@ -20,10 +20,10 @@ export class ShortUrlsList extends React.Component {
   constructor(props) {
     super(props);
 
-    const orderBy = props.shortUrlsListParams.orderBy;
+    const { orderBy } = props.shortUrlsListParams;
     this.state = {
-      orderField: orderBy ? Object.keys(orderBy)[0] : 'dateCreated',
-      orderDir: orderBy ? Object.values(orderBy)[0] : 'ASC',
+      orderField: orderBy ? head(Object.keys(orderBy)) : undefined,
+      orderDir: orderBy ? head(Object.values(orderBy)) : undefined,
     }
   }
 
@@ -33,13 +33,24 @@ export class ShortUrlsList extends React.Component {
   }
 
   render() {
+    const determineOrderDir = field => {
+      if (this.state.orderField !== field) {
+        return 'ASC';
+      }
+
+      const newOrderMap = {
+        'ASC': 'DESC',
+        'DESC': undefined,
+      };
+      return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC';
+    }
     const orderBy = field => {
-      const newOrderDir = this.state.orderField !== field ? 'ASC' : (this.state.orderDir === 'DESC' ? 'ASC' : 'DESC');
+      const newOrderDir = determineOrderDir(field);
       this.setState({ orderField: field, orderDir: newOrderDir });
       this.refreshList({ orderBy: { [field]: newOrderDir } })
     };
     const renderOrderIcon = field => {
-      if (this.state.orderField !== field) {
+      if (this.state.orderField !== field || this.state.orderDir === undefined) {
           return null;
       }
 
diff --git a/src/short-urls/ShortUrlsList.scss b/src/short-urls/ShortUrlsList.scss
index df2cf01d..171705de 100644
--- a/src/short-urls/ShortUrlsList.scss
+++ b/src/short-urls/ShortUrlsList.scss
@@ -13,3 +13,7 @@
 .short-urls-list__header-icon {
   margin-right: 5px;
 }
+
+.short-urls-list__header-cell--with-action {
+  cursor: pointer;
+}
diff --git a/src/short-urls/helpers/ShortUrlsRow.scss b/src/short-urls/helpers/ShortUrlsRow.scss
index 4f6037bc..da6e8f86 100644
--- a/src/short-urls/helpers/ShortUrlsRow.scss
+++ b/src/short-urls/helpers/ShortUrlsRow.scss
@@ -27,10 +27,11 @@
 
     &:last-child {
       position: absolute;
-      top: 3px;
+      top: 3.5px;
       right: .5rem;
       width: auto;
       padding: 0;
+      border: none;
     }
   }
 }