From f9773dbebe0bf8791a0f40c5505cd374cfa7e6cd Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 11 Aug 2018 22:06:36 +0200
Subject: [PATCH] Added servers list to home page

---
 src/common/Home.js   | 34 ++++++++++++++++++++++++++++------
 src/common/Home.scss | 18 ++++++++++++++++++
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/common/Home.js b/src/common/Home.js
index 38e32b21..49ed8dde 100644
--- a/src/common/Home.js
+++ b/src/common/Home.js
@@ -1,7 +1,12 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import './Home.scss';
-import { resetSelectedServer } from '../servers/reducers/selectedServer';
+import chevronIcon from '@fortawesome/fontawesome-free-solid/faChevronRight'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import { isEmpty, pick, values } from 'ramda'
+import React from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { ListGroup, ListGroupItem } from 'reactstrap'
+import { resetSelectedServer } from '../servers/reducers/selectedServer'
+import './Home.scss'
 
 export class Home extends React.Component {
   componentDidMount() {
@@ -9,13 +14,30 @@ export class Home extends React.Component {
   }
 
   render() {
+    const servers = values(this.props.servers);
+    const hasServers = !isEmpty(servers);
+
     return (
       <div className="home-container">
         <h1 className="home-container__title">Welcome to Shlink</h1>
-        <h5 className="home-container__intro">Please, select a server.</h5>
+        <h5 className="home-container__intro">
+          {hasServers && <span>Please, select a server.</span>}
+          {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+        </h5>
+
+        {hasServers && (
+          <ListGroup className="home-container__servers-list">
+            {servers.map(({ name, id }) => (
+              <ListGroupItem tag={Link} to={`/server/${id}/list-short-urls/1`} className="home-container__servers-item">
+                {name}
+                <FontAwesomeIcon icon={chevronIcon} className="home-container__servers-item-icon" />
+              </ListGroupItem>
+            ))}
+          </ListGroup>
+        )}
       </div>
     );
   }
 }
 
-export default connect(null, { resetSelectedServer })(Home);
+export default connect(pick(['servers']), { resetSelectedServer })(Home);
diff --git a/src/common/Home.scss b/src/common/Home.scss
index 7641664b..8fd117b1 100644
--- a/src/common/Home.scss
+++ b/src/common/Home.scss
@@ -1,4 +1,5 @@
 @import '../utils/base';
+@import '../utils/mixins/vertical-align';
 
 .home-container {
   text-align: center;
@@ -12,3 +13,20 @@
 .home-container__title {
   font-size: 36px;
 }
+
+.home-container__servers-list {
+  margin-top: 1rem;
+  width: 100%;
+  max-width: 400px;
+}
+
+.home-container__servers-item.home-container__servers-item {
+  text-align: left;
+  position: relative;
+  padding: .75rem 2.5rem 0.75rem 1rem;
+}
+
+.home-container__servers-item-icon {
+  @include vertical-align();
+  right: 1rem;
+}