Migrated Home component to a functional component

This commit is contained in:
Alejandro Celaya 2020-03-08 11:35:06 +01:00
parent 99042c0979
commit febecab33c
5 changed files with 779 additions and 135 deletions

827
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -85,8 +85,8 @@
"css-loader": "^3.2.0",
"dotenv": "^8.1.0",
"dotenv-expand": "^5.1.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^5.11.1",
"eslint-config-adidas-babel": "^1.1.0",
"eslint-config-adidas-env": "^1.1.0",

View file

@ -1,25 +1,23 @@
import React, { useEffect } from 'react';
import { isEmpty, values } from 'ramda';
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import './Home.scss';
import ServersListGroup from '../servers/ServersListGroup';
export default class Home extends React.Component {
static propTypes = {
const propTypes = {
resetSelectedServer: PropTypes.func,
servers: PropTypes.object,
};
};
componentDidMount() {
this.props.resetSelectedServer();
}
render() {
const { servers: { list, loading } } = this.props;
const Home = ({ resetSelectedServer, servers: { list, loading } }) => {
const servers = values(list);
const hasServers = !isEmpty(servers);
useEffect(() => {
resetSelectedServer();
}, []);
return (
<div className="home">
<h1 className="home__title">Welcome to Shlink</h1>
@ -30,5 +28,8 @@ export default class Home extends React.Component {
</ServersListGroup>
</div>
);
}
}
};
Home.propTypes = propTypes;
export default Home;

View file

@ -7,14 +7,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const getClassForType = (type) => {
const map = {
error: 'bg-danger',
error: 'border-danger',
};
return map[type] || 'bg-light';
return map[type] || '';
};
const getTextClassForType = (type) => {
const map = {
error: 'text-white',
error: 'text-danger',
};
return map[type] || 'text-muted';
@ -28,7 +28,7 @@ const propTypes = {
};
const Message = ({ children, loading = false, noMargin = false, type = 'default' }) => {
const cardClasses = classNames(getClassForType(type), { 'mt-4': !noMargin });
const cardClasses = classNames('bg-light', getClassForType(type), { 'mt-4': !noMargin });
return (
<div className="col-md-10 offset-md-1">

View file

@ -18,14 +18,6 @@ describe('<Home />', () => {
afterEach(() => wrapped && wrapped.unmount());
it('resets selected server when mounted', () => {
const resetSelectedServer = jest.fn();
expect(resetSelectedServer).not.toHaveBeenCalled();
createComponent({ resetSelectedServer });
expect(resetSelectedServer).toHaveBeenCalled();
});
it('shows link to create server when no servers exist', () => {
const wrapped = createComponent();
@ -39,4 +31,16 @@ describe('<Home />', () => {
expect(span).toHaveLength(1);
expect(span.text()).toContain('Trying to load servers...');
});
it('Asks to select a server when not loadign and servers exist', () => {
const list = [
{ name: 'foo', id: '1' },
{ name: 'bar', id: '2' },
];
const wrapped = createComponent({ servers: { list } });
const span = wrapped.find('span');
expect(span).toHaveLength(1);
expect(span.text()).toContain('Please, select a server.');
});
});