diff --git a/src/App.js b/src/App.js
index 58c5d3b9..7741f913 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,7 +16,7 @@ export default class App extends React.Component {
-
+
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index b2960076..c9488ac9 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -1,33 +1,41 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
+import { selectServer } from '../servers/reducers/selectedServer';
import CreateShortUrl from '../short-urls/CreateShortUrl';
import ShortUrls from '../short-urls/ShortUrls';
import AsideMenu from './AsideMenu';
-export function MenuLayout(props) {
- return (
-
-
-
-
-
-
-
+export class MenuLayout extends React.Component {
+ componentDidMount() {
+ const { serverId } = this.props.match.params;
+ this.props.selectServer(serverId);
+ }
+
+ render() {
+ return (
+
-
- );
+ );
+ }
}
export default connect(state => ({
selectedServer: state.selectedServer,
shortUrlsListParams: state.shortUrlsListParams,
-}))(MenuLayout);
+}), { selectServer })(MenuLayout);
diff --git a/src/servers/reducers/selectedServer.js b/src/servers/reducers/selectedServer.js
index cecbb405..c30bb639 100644
--- a/src/servers/reducers/selectedServer.js
+++ b/src/servers/reducers/selectedServer.js
@@ -1,10 +1,12 @@
-import { LIST_SHORT_URLS } from '../../short-urls/reducers/shortUrlsList';
+import ShlinkApiClient from '../../api/ShlinkApiClient';
+import ServersService from '../../servers/services';
+const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
export default function reducer(state = null, action) {
switch (action.type) {
- case LIST_SHORT_URLS:
+ case SELECT_SERVER:
return action.selectedServer;
case RESET_SELECTED_SERVER:
return null;
@@ -14,3 +16,13 @@ export default function reducer(state = null, action) {
}
export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });
+
+export const selectServer = serverId => {
+ const selectedServer = ServersService.findServerById(serverId);
+ ShlinkApiClient.setConfig(selectedServer);
+
+ return {
+ type: SELECT_SERVER,
+ selectedServer
+ }
+};
diff --git a/src/short-urls/ShortUrls.js b/src/short-urls/ShortUrls.js
index be3e04ed..36f9537d 100644
--- a/src/short-urls/ShortUrls.js
+++ b/src/short-urls/ShortUrls.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import Paginator from './Paginator';
import SearchBar from './SearchBar';
import ShortUrlsList from './ShortUrlsList';
+import { assoc } from 'ramda';
export function ShortUrls(props) {
const { match: { params } } = props;
@@ -18,7 +19,4 @@ export function ShortUrls(props) {
);
}
-export default connect(state => ({
- shortUrlsList: state.shortUrlsList.shortUrls,
- loading: state.shortUrlsList.loading,
-}))(ShortUrls);
+export default connect(state => assoc('shortUrlsList', state.shortUrlsList.shortUrls, state.shortUrlsList))(ShortUrls);
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 9ad93443..035808fc 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -102,7 +102,11 @@ export class ShortUrlsList extends React.Component {
}
renderShortUrls() {
- const { shortUrlsList, selectedServer, loading } = this.props;
+ const { shortUrlsList, selectedServer, loading, error } = this.props;
+ if (error) {
+ return
Something went wrong while loading short URLs :( |
;
+ }
+
if (loading) {
return
Loading... |
;
}
diff --git a/src/short-urls/reducers/shortUrlsList.js b/src/short-urls/reducers/shortUrlsList.js
index c5f4b2fc..883d85e3 100644
--- a/src/short-urls/reducers/shortUrlsList.js
+++ b/src/short-urls/reducers/shortUrlsList.js
@@ -1,9 +1,10 @@
-import ServersService from '../../servers/services';
import ShlinkApiClient from '../../api/ShlinkApiClient';
+import ServersService from '../../servers/services';
export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
+export const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR';
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 = LIST_SHORT_URLS;
const initialState = {
shortUrls: [],
@@ -13,34 +14,42 @@ const initialState = {
export default function reducer(state = initialState, action) {
switch (action.type) {
case LIST_SHORT_URLS_START:
- return { ...state, loading: true };
+ return { ...state, loading: true, error: false };
case LIST_SHORT_URLS:
- case UPDATE_SHORT_URLS_LIST:
return {
loading: false,
+ error: false,
shortUrls: action.shortUrls
};
+ case LIST_SHORT_URLS_ERROR:
+ return {
+ loading: false,
+ error: true,
+ shortUrls: []
+ };
default:
return state;
}
}
export const listShortUrls = (serverId, params = {}) => {
- return async dispatch => {
- dispatch({ type: LIST_SHORT_URLS_START });
- const selectedServer = ServersService.findServerById(serverId);
+ // FIXME There should be a way to not need this, however, the active server is set when any route is loaded, in an
+ // FIXME outer component's componentDidMount, which makes it be invoked after this action
+ const selectedServer = ServersService.findServerById(serverId);
+ ShlinkApiClient.setConfig(selectedServer);
- ShlinkApiClient.setConfig(selectedServer);
- const shortUrls = await ShlinkApiClient.listShortUrls(params);
- dispatch({ type: LIST_SHORT_URLS, shortUrls, selectedServer, params });
- };
+ return updateShortUrlsList(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 });
+ try {
+ const shortUrls = await ShlinkApiClient.listShortUrls(params);
+ dispatch({ type: LIST_SHORT_URLS, shortUrls, params });
+ } catch (e) {
+ dispatch({ type: LIST_SHORT_URLS_ERROR, params });
+ }
};
};