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