Created components to display errors when loading a server

src/common/Home.scss

@@ -1,8 +1,8 @@
 @import '../utils/base';
 
 .home {
-  text-align: center;
   height: calc(100vh - #{$headerHeight});
+  text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;

src/common/MenuLayout.js

@@ -7,6 +7,7 @@ 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';
 
@@ -32,16 +33,11 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
     }
 
     if (selectedServer.serverNotFound) {
-      return <Message type="error">Could not find this Shlink server in this host.</Message>;
+      return <ServerError type="not-found" />;
     }
 
     if (selectedServer.serverNotReachable) {
-      return (
+      return <ServerError type="not-reachable" />;
-        <Message type="error">
-          <p>Oops! Could not connect to this Shlink server.</p>
-          Make sure you have internet connection, and the server is properly configured and on-line.
-        </Message>
-      );
     }
 
     const burgerClasses = classNames('menu-layout__burger-icon', {

src/servers/ServersListGroup.js

@@ -10,6 +10,7 @@ import './ServersListGroup.scss';
 const propTypes = {
   servers: PropTypes.arrayOf(serverType).isRequired,
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
 };
 
 const ServerListItem = ({ id, name }) => (
@@ -24,15 +25,15 @@ ServerListItem.propTypes = {
   name: PropTypes.string,
 };
 
-const ServersListGroup = ({ servers, children }) => (
+const ServersListGroup = ({ servers, children, className }) => (
-  <React.Fragment>
+  <div className={className}>
     <h5>{children}</h5>
-    {servers.length && (
+    {servers.length > 0 && (
       <ListGroup className="servers-list__list-group">
         {servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
       </ListGroup>
     )}
-  </React.Fragment>
+  </div>
 );
 
 ServersListGroup.propTypes = propTypes;

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 }) => (
+  <div className="server-error-container flex-column">
+    <div className="row w-100">
+      <Message type="error">
+        {type === 'not-found' && 'Could not find this Shlink server.'}
+        {type === 'not-reachable' && (
+          <React.Fragment>
+            <p>Oops! Could not connect to this Shlink server.</p>
+            Make sure you have internet connection, and the server is properly configured and on-line.
+          </React.Fragment>
+        )}
+      </Message>
+    </div>
+    <ServersListGroup servers={[]} className="mt-3 mt-md-5">
+      These are the {type === 'not-reachable' ? 'other' : ''} servers currently configured. Choose one of
+      them or <Link to="/server/create">add a new one</Link>.
+    </ServersListGroup>
+  </div>
+);
+
+ServerError.propTypes = propTypes;

src/servers/helpers/ServerError.scss

@@ -0,0 +1,6 @@
+.server-error-container {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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,
+]);