mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-03 23:07: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 => ({ export default connect(state => ({
shortUrlsList: state.shortUrlsList shortUrlsList: state.shortUrlsList.shortUrls,
loading: state.shortUrlsList.loading,
}))(ShortUrls); }))(ShortUrls);

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

@ -43,11 +43,15 @@ export class ShortUrlsList extends React.Component {
} }
renderShortUrls() { renderShortUrls() {
const { shortUrlsList, selectedServer } = this.props; const { shortUrlsList, selectedServer, loading } = this.props;
if (isEmpty(shortUrlsList)) { if (loading) {
return <tr><td colSpan="6" className="text-center">Loading...</td></tr>; 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 => ( return shortUrlsList.map(shortUrl => (
<Row shortUrl={shortUrl} selectedServer={selectedServer} key={shortUrl.shortCode} /> <Row shortUrl={shortUrl} selectedServer={selectedServer} key={shortUrl.shortCode} />
)); ));
@ -69,8 +73,9 @@ class Row extends React.Component {
const { shortUrl, selectedServer } = this.props; const { shortUrl, selectedServer } = this.props;
return ( return (
<tr onMouseEnter={() => this.setState({ displayMenu: true })} <tr
onMouseLeave={() => this.setState({ displayMenu: false })} onMouseEnter={() => this.setState({ displayMenu: true })}
onMouseLeave={() => this.setState({ displayMenu: false })}
> >
<td className="nowrap short-urls-list__cell"> <td className="nowrap short-urls-list__cell">
<Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment> <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 ServersService from '../../servers/services';
import ShlinkApiClient from '../../api/ShlinkApiClient'; 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 LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
export const UPDATE_SHORT_URLS_LIST = 'shlink/shortUrlsList/UPDATE_SHORT_URLS_LIST'; 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) { switch (action.type) {
case LIST_SHORT_URLS_START:
return { ...state, loading: true };
case LIST_SHORT_URLS: case LIST_SHORT_URLS:
case UPDATE_SHORT_URLS_LIST: case UPDATE_SHORT_URLS_LIST:
return action.shortUrls; return {
loading: false,
shortUrls: action.shortUrls
};
default: default:
return state; return state;
} }
@ -26,7 +37,7 @@ export const listShortUrls = (serverId, params = {}) => {
export const updateShortUrlsList = (params = {}) => { export const updateShortUrlsList = (params = {}) => {
return async dispatch => { return async dispatch => {
dispatch({ type: LIST_SHORT_URLS_START });
const shortUrls = await ShlinkApiClient.listShortUrls(params); const shortUrls = await ShlinkApiClient.listShortUrls(params);
dispatch({ type: UPDATE_SHORT_URLS_LIST, shortUrls, params }); dispatch({ type: UPDATE_SHORT_URLS_LIST, shortUrls, params });