mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Migrated Home component to a functional component
This commit is contained in:
parent
99042c0979
commit
febecab33c
5 changed files with 779 additions and 135 deletions
831
package-lock.json
generated
831
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -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",
|
||||
|
|
|
@ -1,34 +1,35 @@
|
|||
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 = {
|
||||
resetSelectedServer: PropTypes.func,
|
||||
servers: PropTypes.object,
|
||||
};
|
||||
const propTypes = {
|
||||
resetSelectedServer: PropTypes.func,
|
||||
servers: PropTypes.object,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.props.resetSelectedServer();
|
||||
}
|
||||
const Home = ({ resetSelectedServer, servers: { list, loading } }) => {
|
||||
const servers = values(list);
|
||||
const hasServers = !isEmpty(servers);
|
||||
|
||||
render() {
|
||||
const { servers: { list, loading } } = this.props;
|
||||
const servers = values(list);
|
||||
const hasServers = !isEmpty(servers);
|
||||
useEffect(() => {
|
||||
resetSelectedServer();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="home">
|
||||
<h1 className="home__title">Welcome to Shlink</h1>
|
||||
<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>}
|
||||
</ServersListGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="home">
|
||||
<h1 className="home__title">Welcome to Shlink</h1>
|
||||
<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>}
|
||||
</ServersListGroup>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Home.propTypes = propTypes;
|
||||
|
||||
export default Home;
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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.');
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue