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 (
Welcome to Shlink
- Please, select a server.
+
+ {hasServers && Please, select a server.}
+ {!hasServers && Please, add a server.}
+
+
+ {hasServers && (
+
+ {servers.map(({ name, id }) => (
+
+ {name}
+
+
+ ))}
+
+ )}
);
}
}
-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;
+}