@arcblock/ux 2.2.4 → 2.4.1

package/src/withTheme/index.js

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { ThemeProvider, createGlobalStyle } from 'styled-components';
+import { Global, ThemeProvider, css } from '@emotion/react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 
 import { create } from '../Theme';
 
-const GlobalStyle = createGlobalStyle`
+const globalStyles = css`
   font-family: ${(props) => props.theme.typography.fontFamily};
   color: ${(props) => props.theme.typography.color.main};
 
-  a, a:hover, a:active {
+  a,
+  a:hover,
+  a:active {
     text-decoration: none;
     color: ${(props) => props.theme.palette.primary.dark};
   }
@@ -57,7 +59,7 @@ function withTheme(Component, { mode = 'light', pageWidth = 'md', palette, typog
       return (
         <MuiThemeProvider theme={this.theme}>
           <CssBaseline />
-          <GlobalStyle theme={this.theme} />
+          <Global styles={globalStyles} />
           <ThemeProvider theme={this.theme}>
             <Component {...this.props} />
           </ThemeProvider>

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} />;
+  };
 };