@arcblock/ux 2.2.3 → 2.4.0

package/src/withTracker/index.js

@@ -1,11 +1,10 @@
-/* eslint-disable react/no-deprecated */
-/* eslint-disable react/static-property-placement */
 /* eslint-disable import/no-unresolved */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
 import ReactGA from 'react-ga';
 import * as Sentry from '@sentry/browser';
-import { withRouter } from 'react-router-dom';
+
+import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
+import useMount from 'react-use/lib/useMount';
+import { useLocation } from 'react-router-dom';
 
 import ErrorBoundary from './error_boundary';
 
@@ -34,37 +33,25 @@ export default (WrappedComponent, options = {}) => {
     }
   };
 
-  class TrackedComponent extends Component {
-    static propTypes = {
-      location: PropTypes.object.isRequired,
-    };
-
-    componentDidMount() {
-      const page = this.props.location.pathname;
-      trackPage(page);
-    }
-
-    componentWillReceiveProps(nextProps) {
-      const currentPage = this.props.location.pathname;
-      const nextPage = nextProps.location.pathname;
+  return function TrackedComponent(props) {
+    const location = useLocation();
 
-      if (currentPage !== nextPage) {
-        trackPage(nextPage);
-      }
-    }
+    useMount(() => {
+      trackPage(location.pathname);
+    });
 
-    render() {
-      if (process.env.NODE_ENV === 'production') {
-        return (
-          <ErrorBoundary>
-            <WrappedComponent {...this.props} />
-          </ErrorBoundary>
-        );
-      }
+    useDeepCompareEffect(() => {
+      trackPage(location.pathname);
+    }, [location.pathname]);
 
-      return <WrappedComponent {...this.props} />;
+    if (process.env.NODE_ENV === 'production') {
+      return (
+        <ErrorBoundary>
+          <WrappedComponent {...props} />
+        </ErrorBoundary>
+      );
     }
-  }
 
-  return withRouter(TrackedComponent);
+    return <WrappedComponent {...props} />;
+  };
 };