Added servers list to home page

This commit is contained in:
Alejandro Celaya 2018-08-11 22:06:36 +02:00
parent c920403d5f
commit f9773dbebe
2 changed files with 46 additions and 6 deletions

View file

@ -1,7 +1,12 @@
import React from 'react'; import chevronIcon from '@fortawesome/fontawesome-free-solid/faChevronRight'
import { connect } from 'react-redux'; import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import './Home.scss'; import { isEmpty, pick, values } from 'ramda'
import { resetSelectedServer } from '../servers/reducers/selectedServer'; 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 { export class Home extends React.Component {
componentDidMount() { componentDidMount() {
@ -9,13 +14,30 @@ export class Home extends React.Component {
} }
render() { render() {
const servers = values(this.props.servers);
const hasServers = !isEmpty(servers);
return ( return (
<div className="home-container"> <div className="home-container">
<h1 className="home-container__title">Welcome to Shlink</h1> <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> </div>
); );
} }
} }
export default connect(null, { resetSelectedServer })(Home); export default connect(pick(['servers']), { resetSelectedServer })(Home);

View file

@ -1,4 +1,5 @@
@import '../utils/base'; @import '../utils/base';
@import '../utils/mixins/vertical-align';
.home-container { .home-container {
text-align: center; text-align: center;
@ -12,3 +13,20 @@
.home-container__title { .home-container__title {
font-size: 36px; 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;
}