mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-22 17:10:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added proper loading status handling to short URLs list

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-15 10:39:05 +02:00
parent a4f9a2b8b3
commit 010e3ce0f3
3 changed files with 25 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/short-urls/ShortUrls.js
View file

@ -16,5 +16,6 @@ export function ShortUrls(props) {
}
export default connect(state => ({
shortUrlsList: state.shortUrlsList
shortUrlsList: state.shortUrlsList.shortUrls,
loading: state.shortUrlsList.loading,
}))(ShortUrls);

13
src/short-urls/ShortUrlsList.js
View file

@ -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>

17
src/short-urls/reducers/shortUrlsList.js
View file

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