+const ServersListGroup = ({ servers, children, className }) => (
+
{children}
- {servers.length && (
+ {servers.length > 0 && (
{servers.map(({ id, name }) => )}
)}
-
+
);
ServersListGroup.propTypes = propTypes;
diff --git a/src/servers/helpers/ServerError.js b/src/servers/helpers/ServerError.js
new file mode 100644
index 00000000..b663830b
--- /dev/null
+++ b/src/servers/helpers/ServerError.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import Message from '../../utils/Message';
+import ServersListGroup from '../ServersListGroup';
+import './ServerError.scss';
+
+const propTypes = {
+ type: PropTypes.oneOf([ 'not-found', 'not-reachable' ]).isRequired,
+};
+
+export const ServerError = ({ type }) => (
+
+
+
+ {type === 'not-found' && 'Could not find this Shlink server.'}
+ {type === 'not-reachable' && (
+
+ Oops! Could not connect to this Shlink server.
+ Make sure you have internet connection, and the server is properly configured and on-line.
+
+ )}
+
+
+
+ These are the {type === 'not-reachable' ? 'other' : ''} servers currently configured. Choose one of
+ them or add a new one.
+
+
+);
+
+ServerError.propTypes = propTypes;
diff --git a/src/servers/helpers/ServerError.scss b/src/servers/helpers/ServerError.scss
new file mode 100644
index 00000000..073758ae
--- /dev/null
+++ b/src/servers/helpers/ServerError.scss
@@ -0,0 +1,6 @@
+.server-error-container {
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/src/servers/prop-types/index.js b/src/servers/prop-types/index.js
index 6dc0eaa1..4bdb7355 100644
--- a/src/servers/prop-types/index.js
+++ b/src/servers/prop-types/index.js
@@ -1,12 +1,24 @@
import PropTypes from 'prop-types';
-export const serverType = PropTypes.shape({
+const regularServerType = PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
url: PropTypes.string,
apiKey: PropTypes.string,
version: PropTypes.string,
printableVersion: PropTypes.string,
- serverNotFound: PropTypes.bool,
- serverNotReachable: PropTypes.bool,
});
+
+const notFoundServerType = PropTypes.shape({
+ serverNotFound: PropTypes.bool.isRequired,
+});
+
+const notReachableServerType = PropTypes.shape({
+ serverNotReachable: PropTypes.bool.isRequired,
+});
+
+export const serverType = PropTypes.oneOfType([
+ regularServerType,
+ notFoundServerType,
+ notReachableServerType,
+]);