Migrated Home component to a functional component

src/common/Home.js

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