From 9804a2d18dbdc8f1f52cf8c5e04f630ecd687b84 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 8 Mar 2020 12:49:52 +0100
Subject: [PATCH] Added list of servers connected to store in ServerError
 component

---
 src/common/Home.scss                    | 2 +-
 src/common/MenuLayout.js                | 3 +--
 src/common/services/provideServices.js  | 3 ++-
 src/servers/ServersListGroup.js         | 9 ++++-----
 src/servers/ServersListGroup.scss       | 2 +-
 src/servers/helpers/ServerError.js      | 9 +++++----
 src/servers/services/provideServices.js | 4 ++++
 7 files changed, 18 insertions(+), 14 deletions(-)

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 }) => (
-  <div className={className}>
+const ServersListGroup = ({ servers, children }) => (
+  <React.Fragment>
     <h5>{children}</h5>
     {servers.length > 0 && (
-      <ListGroup className="servers-list__list-group">
+      <ListGroup className="servers-list__list-group mt-md-3">
         {servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
       </ListGroup>
     )}
-  </div>
+  </React.Fragment>
 );
 
 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 } }) => (
   <div className="server-error-container flex-column">
-    <div className="row w-100">
+    <div className="row w-100 mb-3 mb-md-5">
       <Message type="error">
         {type === 'not-found' && 'Could not find this Shlink server.'}
         {type === 'not-reachable' && (
@@ -22,8 +23,8 @@ export const ServerError = ({ type }) => (
         )}
       </Message>
     </div>
-    <ServersListGroup servers={[]} className="mt-3 mt-md-5">
-      These are the {type === 'not-reachable' ? 'other' : ''} servers currently configured. Choose one of
+    <ServersListGroup servers={Object.values(list)}>
+      These are the {type === 'not-reachable' ? 'other' : ''} Shlink servers currently configured. Choose one of
       them or <Link to="/server/create">add a new one</Link>.
     </ServersListGroup>
   </div>
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');