diff --git a/src/common/Home.scss b/src/common/Home.scss
index 1c3b9ac3..ee360009 100644
--- a/src/common/Home.scss
+++ b/src/common/Home.scss
@@ -1,8 +1,8 @@
@import '../utils/base';
.home {
- height: calc(100vh - #{$headerHeight});
text-align: center;
+ height: calc(100vh - #{$headerHeight});
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index 44a7ffa9..1951a63f 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -7,7 +7,6 @@ import classNames from 'classnames';
import * as PropTypes from 'prop-types';
import { serverType } from '../servers/prop-types';
import Message from '../utils/Message';
-import { ServerError } from '../servers/helpers/ServerError';
import NotFound from './NotFound';
import './MenuLayout.scss';
@@ -18,7 +17,7 @@ const propTypes = {
selectedServer: serverType,
};
-const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits, ShlinkVersions) => {
+const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits, ShlinkVersions, ServerError) => {
const MenuLayoutComp = ({ match, location, selectedServer, selectServer }) => {
const [ showSideBar, setShowSidebar ] = useState(false);
const { params: { serverId } } = match;
diff --git a/src/common/services/provideServices.js b/src/common/services/provideServices.js
index 2bde42b0..a8c842b6 100644
--- a/src/common/services/provideServices.js
+++ b/src/common/services/provideServices.js
@@ -27,7 +27,8 @@ const provideServices = (bottle, connect, withRouter) => {
'AsideMenu',
'CreateShortUrl',
'ShortUrlVisits',
- 'ShlinkVersions'
+ 'ShlinkVersions',
+ 'ServerError'
);
bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
bottle.decorator('MenuLayout', withRouter);
diff --git a/src/servers/ServersListGroup.js b/src/servers/ServersListGroup.js
index aae2ef5b..476922c1 100644
--- a/src/servers/ServersListGroup.js
+++ b/src/servers/ServersListGroup.js
@@ -10,7 +10,6 @@ import './ServersListGroup.scss';
const propTypes = {
servers: PropTypes.arrayOf(serverType).isRequired,
children: PropTypes.node.isRequired,
- className: PropTypes.string,
};
const ServerListItem = ({ id, name }) => (
@@ -25,15 +24,15 @@ ServerListItem.propTypes = {
name: PropTypes.string,
};
-const ServersListGroup = ({ servers, children, className }) => (
-
+const ServersListGroup = ({ servers, children }) => (
+
{children}
{servers.length > 0 && (
-
+
{servers.map(({ id, name }) => )}
)}
-
+
);
ServersListGroup.propTypes = propTypes;
diff --git a/src/servers/ServersListGroup.scss b/src/servers/ServersListGroup.scss
index 2b33ab3f..9f869468 100644
--- a/src/servers/ServersListGroup.scss
+++ b/src/servers/ServersListGroup.scss
@@ -1,7 +1,6 @@
@import '../utils/mixins/vertical-align';
.servers-list__list-group {
- margin-top: 1rem;
width: 100%;
max-width: 400px;
}
@@ -14,5 +13,6 @@
.servers-list__server-item-icon {
@include vertical-align();
+
right: 1rem;
}
diff --git a/src/servers/helpers/ServerError.js b/src/servers/helpers/ServerError.js
index b663830b..96f1d449 100644
--- a/src/servers/helpers/ServerError.js
+++ b/src/servers/helpers/ServerError.js
@@ -6,12 +6,13 @@ import ServersListGroup from '../ServersListGroup';
import './ServerError.scss';
const propTypes = {
+ servers: PropTypes.object,
type: PropTypes.oneOf([ 'not-found', 'not-reachable' ]).isRequired,
};
-export const ServerError = ({ type }) => (
+export const ServerError = ({ type, servers: { list } }) => (
-
+
{type === 'not-found' && 'Could not find this Shlink server.'}
{type === 'not-reachable' && (
@@ -22,8 +23,8 @@ export const ServerError = ({ type }) => (
)}
-
- These are the {type === 'not-reachable' ? 'other' : ''} servers currently configured. Choose one of
+
+ These are the {type === 'not-reachable' ? 'other' : ''} Shlink servers currently configured. Choose one of
them or add a new one.
diff --git a/src/servers/services/provideServices.js b/src/servers/services/provideServices.js
index ba4b2bd6..9991d15b 100644
--- a/src/servers/services/provideServices.js
+++ b/src/servers/services/provideServices.js
@@ -7,6 +7,7 @@ import ImportServersBtn from '../helpers/ImportServersBtn';
import { resetSelectedServer, selectServer } from '../reducers/selectedServer';
import { createServer, createServers, deleteServer, listServers } from '../reducers/server';
import ForServerVersion from '../helpers/ForServerVersion';
+import { ServerError } from '../helpers/ServerError';
import ServersImporter from './ServersImporter';
import ServersService from './ServersService';
import ServersExporter from './ServersExporter';
@@ -32,6 +33,9 @@ const provideServices = (bottle, connect, withRouter) => {
bottle.serviceFactory('ForServerVersion', () => ForServerVersion);
bottle.decorator('ForServerVersion', connect([ 'selectedServer' ]));
+ bottle.serviceFactory('ServerError', () => ServerError);
+ bottle.decorator('ServerError', connect([ 'servers' ]));
+
// Services
bottle.constant('csvjson', csvjson);
bottle.service('ServersImporter', ServersImporter, 'csvjson');