From 4bd83eecfb66ba62dd20251d9245ee28b2b09c12 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 31 May 2020 09:50:00 +0200
Subject: [PATCH] Updated ScrollToTop to be a functional component

---
 package.json                    |  3 ++-
 src/common/ScrollToTop.js       | 30 +++++++++++++++---------------
 test/common/ScrollToTop.test.js |  5 -----
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 0d5717e1..7267a0b3 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "test:ci": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
     "test:pretty": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html",
     "mutate": "./node_modules/.bin/stryker run",
-    "mutate:ci": "npm run mutate -- --mutate=$MUTATION_FILES"
+    "mutate:ci": "npm run mutate -- --mutate=$MUTATION_FILES",
+    "check": "npm run test & npm run lint & wait"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.11.2",
diff --git a/src/common/ScrollToTop.js b/src/common/ScrollToTop.js
index 28e776b6..7de10d6d 100644
--- a/src/common/ScrollToTop.js
+++ b/src/common/ScrollToTop.js
@@ -1,23 +1,23 @@
-import React from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-const ScrollToTop = ({ scrollTo }) => class ScrollToTop extends React.Component {
-  static propTypes = {
-    location: PropTypes.object,
-    children: PropTypes.node,
+const propTypes = {
+  location: PropTypes.object,
+  children: PropTypes.node,
+};
+
+const ScrollToTop = () => {
+  const ScrollToTopComp = ({ location, children }) => {
+    useEffect(() => {
+      scrollTo(0, 0);
+    }, [ location ]);
+
+    return children;
   };
 
-  componentDidUpdate({ location: prevLocation }) {
-    const { location } = this.props;
+  ScrollToTopComp.propTypes = propTypes;
 
-    if (location !== prevLocation) {
-      scrollTo(0, 0);
-    }
-  }
-
-  render() {
-    return this.props.children;
-  }
+  return ScrollToTopComp;
 };
 
 export default ScrollToTop;
diff --git a/test/common/ScrollToTop.test.js b/test/common/ScrollToTop.test.js
index b49450db..a0264182 100644
--- a/test/common/ScrollToTop.test.js
+++ b/test/common/ScrollToTop.test.js
@@ -20,9 +20,4 @@ describe('<ScrollToTop />', () => {
   });
 
   it('just renders children', () => expect(wrapper.text()).toEqual('Foobar'));
-
-  it('scrolls to top when location changes', () => {
-    wrapper.instance().componentDidUpdate({ location: { href: 'bar' } });
-    expect(window.scrollTo).toHaveBeenCalledTimes(1);
-  });
 });