Migrated Home component to a functional component

package.json

@@ -85,8 +85,8 @@
     "css-loader": "^3.2.0",
     "dotenv": "^8.1.0",
     "dotenv-expand": "^5.1.0",
-    "enzyme": "^3.10.0",
+    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.14.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",

src/common/Home.js

@@ -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 {
+const propTypes = {
-  static propTypes = {
   resetSelectedServer: PropTypes.func,
   servers: PropTypes.object,
 };
 
-  componentDidMount() {
+const Home = ({ resetSelectedServer, servers: { list, loading } }) => {
-    this.props.resetSelectedServer();
-  }
-
-  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>
@@ -30,5 +28,8 @@ export default class Home extends React.Component {
       </ServersListGroup>
     </div>
   );
-  }
+};
-}
+
+Home.propTypes = propTypes;
+
+export default Home;

src/utils/Message.js

@@ -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">

test/common/Home.test.js

@@ -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.');
+  });
 });