Extracted servers list group from home component to a reusable component

src/common/Home.js

@@ -1,11 +1,9 @@
-import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEmpty, values } from 'ramda';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { ListGroup, ListGroupItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import './Home.scss';
+import ServersListGroup from '../servers/ServersListGroup';
 
 export default class Home extends React.Component {
   static propTypes = {
@@ -25,27 +23,11 @@ export default class Home extends React.Component {
     return (
       <div className="home">
         <h1 className="home__title">Welcome to Shlink</h1>
-        <h5 className="home__intro">
+        <ServersListGroup servers={servers}>
           {!loading && hasServers && <span>Please, select a server.</span>}
           {!loading && !hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
           {loading && <span>Trying to load servers...</span>}
-        </h5>
-
-        {!loading && hasServers && (
-          <ListGroup className="home__servers-list">
-            {servers.map(({ name, id }) => (
-              <ListGroupItem
-                key={id}
-                tag={Link}
-                to={`/server/${id}/list-short-urls/1`}
-                className="home__servers-item"
-              >
-                {name}
-                <FontAwesomeIcon icon={chevronIcon} className="home__servers-item-icon" />
-              </ListGroupItem>
-            ))}
-          </ListGroup>
-        )}
+        </ServersListGroup>
       </div>
     );
   }

src/common/Home.scss

@@ -1,5 +1,4 @@
 @import '../utils/base';
-@import '../utils/mixins/vertical-align';
 
 .home {
   text-align: center;
@@ -17,21 +16,3 @@
     font-size: 2.2rem;
   }
 }
-
-.home__servers-list {
-  margin-top: 1rem;
-  width: 100%;
-  max-width: 400px;
-}
-
-.home__servers-item.home__servers-item {
-  text-align: left;
-  position: relative;
-  padding: .75rem 2.5rem .75rem 1rem;
-}
-
-.home__servers-item-icon {
-  @include vertical-align();
-
-  right: 1rem;
-}

src/common/MenuLayout.js

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import { serverType } from '../servers/prop-types';
-import MutedMessage from '../utils/MutedMessage';
+import Message from '../utils/Message';
 import NotFound from './NotFound';
 import './MenuLayout.scss';
 
@@ -28,19 +28,19 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
     useEffect(() => setShowSidebar(false), [ location ]);
 
     if (!selectedServer) {
-      return <MutedMessage loading />;
+      return <Message loading />;
     }
 
     if (selectedServer.serverNotFound) {
-      return <MutedMessage>Could not find a server with id <b>&quot;{serverId}&quot;</b> in this host.</MutedMessage>;
+      return <Message type="error">Could not find this Shlink server in this host.</Message>;
     }
 
     if (selectedServer.serverNotReachable) {
       return (
-        <MutedMessage>
-          Oops! Could not connect to Shlink server with ID <b>&quot;{serverId}&quot;</b>. Make sure you have internet
-          connection, the server is properly configured and it is on-line.
-        </MutedMessage>
+        <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>
       );
     }