From 010e3ce0f3def2f116f39c53fc1686363cbed5c2 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 15 Jul 2018 10:39:05 +0200
Subject: [PATCH] Added proper loading status handling to short URLs list

---
 src/short-urls/ShortUrls.js              |  3 ++-
 src/short-urls/ShortUrlsList.js          | 13 +++++++++----
 src/short-urls/reducers/shortUrlsList.js | 17 ++++++++++++++---
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/short-urls/ShortUrls.js b/src/short-urls/ShortUrls.js
index 847e4f2d..fedcd9b8 100644
--- a/src/short-urls/ShortUrls.js
+++ b/src/short-urls/ShortUrls.js
@@ -16,5 +16,6 @@ export function ShortUrls(props) {
 }
 
 export default connect(state => ({
-  shortUrlsList: state.shortUrlsList
+  shortUrlsList: state.shortUrlsList.shortUrls,
+  loading: state.shortUrlsList.loading,
 }))(ShortUrls);
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 738a49c2..b36ddb43 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -43,11 +43,15 @@ export class ShortUrlsList extends React.Component {
   }
 
   renderShortUrls() {
-    const { shortUrlsList, selectedServer } = this.props;
-    if (isEmpty(shortUrlsList)) {
+    const { shortUrlsList, selectedServer, loading } = this.props;
+    if (loading) {
       return <tr><td colSpan="6" className="text-center">Loading...</td></tr>;
     }
 
+    if (! loading && isEmpty(shortUrlsList)) {
+      return <tr><td colSpan="6" className="text-center">No results found</td></tr>;
+    }
+
     return shortUrlsList.map(shortUrl => (
       <Row shortUrl={shortUrl} selectedServer={selectedServer} key={shortUrl.shortCode} />
     ));
@@ -69,8 +73,9 @@ class Row extends React.Component {
     const { shortUrl, selectedServer } = this.props;
 
     return (
-      <tr onMouseEnter={() => this.setState({ displayMenu: true })}
-          onMouseLeave={() => this.setState({ displayMenu: false })}
+      <tr
+        onMouseEnter={() => this.setState({ displayMenu: true })}
+        onMouseLeave={() => this.setState({ displayMenu: false })}
       >
         <td className="nowrap short-urls-list__cell">
           <Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment>
diff --git a/src/short-urls/reducers/shortUrlsList.js b/src/short-urls/reducers/shortUrlsList.js
index 3b3433ac..d7027247 100644
--- a/src/short-urls/reducers/shortUrlsList.js
+++ b/src/short-urls/reducers/shortUrlsList.js
@@ -1,14 +1,25 @@
 import ServersService from '../../servers/services';
 import ShlinkApiClient from '../../api/ShlinkApiClient';
 
+export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
 export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
 export const UPDATE_SHORT_URLS_LIST = 'shlink/shortUrlsList/UPDATE_SHORT_URLS_LIST';
 
-export default function reducer(state = [], action) {
+const initialState = {
+  shortUrls: [],
+  loading: true,
+};
+
+export default function reducer(state = initialState, action) {
   switch (action.type) {
+    case LIST_SHORT_URLS_START:
+      return { ...state, loading: true };
     case LIST_SHORT_URLS:
     case UPDATE_SHORT_URLS_LIST:
-      return action.shortUrls;
+      return {
+        loading: false,
+        shortUrls: action.shortUrls
+      };
     default:
       return state;
   }
@@ -26,7 +37,7 @@ export const listShortUrls = (serverId, params = {}) => {
 
 export const updateShortUrlsList = (params = {}) => {
   return async dispatch => {
-
+    dispatch({ type: LIST_SHORT_URLS_START });
 
     const shortUrls = await ShlinkApiClient.listShortUrls(params);
     dispatch({ type: UPDATE_SHORT_URLS_LIST, shortUrls, params });