[docs] Remove compose helper

docs/src/modules/components/Ad.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
 import Paper from '@material-ui/core/Paper';
 import InfoIcon from '@material-ui/icons/InfoOutlined';
 import AdCodeFund from 'docs/src/modules/components/AdCodeFund';
 import AdCarbon from 'docs/src/modules/components/AdCarbon';
-import compose from 'docs/src/modules/utils/compose';
 
 const styles = theme => ({
   root: {
@@ -52,74 +51,65 @@ function getAdblock(classes, t) {
   );
 }
 
-class Ad extends React.Component {
-  random = Math.random();
+// const disable = process.env.NODE_ENV !== 'production';
+const disable = false;
 
-  state = {
-    disable: process.env.NODE_ENV !== 'production',
-    adblock: null,
-  };
+function Ad(props) {
+  const { classes } = props;
+  const { current: random } = React.useRef(Math.random());
+  const timerAdblock = React.useRef();
+  const { t } = useSelector(state => ({
+    t: state.options.t,
+  }));
+  const [adblock, setAdblock] = React.useState(null);
 
-  componentDidMount() {
-    if (this.state.disable) {
-      return;
-    }
-    this.checkAdblock();
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timerAdblock);
-  }
-
-  checkAdblock = (attempt = 1) => {
+  const checkAdblock = React.useCallback((attempt = 1) => {
     if (document.querySelector('.cf-wrapper') || document.querySelector('#carbonads')) {
-      this.setState({
-        adblock: false,
-      });
+      setAdblock(false);
       return;
     }
 
     if (attempt < 30) {
-      this.timerAdblock = setTimeout(() => {
-        this.checkAdblock(attempt + 1);
+      timerAdblock.current = setTimeout(() => {
+        checkAdblock(attempt + 1);
       }, 500);
     }
 
-    if (attempt > 6 && this.state.adblock !== true) {
-      this.setState({
-        adblock: true,
-      });
+    if (attempt > 6) {
+      setAdblock(true);
     }
-  };
-
-  render() {
-    const { classes, t } = this.props;
-    const { adblock, disable } = this.state;
+  }, []);
 
+  React.useEffect(() => {
     if (disable) {
-      return <span className={classes.root}>{getAdblock(classes, t)}</span>;
+      return undefined;
     }
+    checkAdblock();
+
+    return () => {
+      clearTimeout(timerAdblock.current);
+    };
+  }, [checkAdblock]);
 
-    return (
-      <span className={classes.root}>
-        {this.random >= 0.8 ? <AdCodeFund /> : <AdCarbon />}
-        {adblock === true ? getAdblock(classes, t) : null}
-        {adblock === false ? (
-          <Tooltip id="ad-info" title={t('adTitle')} placement="left">
-            <InfoIcon className={classes.info} />
-          </Tooltip>
-        ) : null}
-      </span>
-    );
+  if (disable) {
+    return <span className={classes.root}>{getAdblock(classes, t)}</span>;
   }
+
+  return (
+    <span className={classes.root}>
+      {random >= 0.8 ? <AdCodeFund /> : <AdCarbon />}
+      {adblock === true ? getAdblock(classes, t) : null}
+      {adblock === false ? (
+        <Tooltip id="ad-info" title={t('adTitle')} placement="left">
+          <InfoIcon className={classes.info} />
+        </Tooltip>
+      ) : null}
+    </span>
+  );
 }
 
 Ad.propTypes = {
   classes: PropTypes.object.isRequired,
-  t: PropTypes.func.isRequired,
 };
 
-export default compose(
-  connect(state => ({ t: state.options.t })),
-  withStyles(styles),
-)(Ad);
+export default withStyles(styles)(Ad);

docs/src/modules/components/AppDrawer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import Drawer from '@material-ui/core/Drawer';
@@ -12,7 +12,6 @@ import AppDrawerNavItem from 'docs/src/modules/components/AppDrawerNavItem';
 import Link from 'docs/src/modules/components/Link';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import PageContext from 'docs/src/modules/components/PageContext';
-import compose from 'docs/src/modules/utils/compose';
 
 let savedScrollTop = null;
 function PersistScroll(props) {
@@ -134,8 +133,11 @@ function reduceChildRoutes({ props, activePage, items, page, depth, t }) {
 const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
 
 function AppDrawer(props) {
-  const { classes, className, disablePermanent, mobileOpen, onClose, onOpen, t } = props;
+  const { classes, className, disablePermanent, mobileOpen, onClose, onOpen } = props;
   const { activePage, pages } = React.useContext(PageContext);
+  const { t } = useSelector(state => ({
+    t: state.options.t,
+  }));
 
   const drawer = (
     <PersistScroll>
@@ -199,12 +201,6 @@ AppDrawer.propTypes = {
   mobileOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   onOpen: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
 };
 
-export default compose(
-  connect(state => ({
-    t: state.options.t,
-  })),
-  withStyles(styles),
-)(AppDrawer);
+export default withStyles(styles)(AppDrawer);

docs/src/modules/components/AppFrame.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import NProgress from 'nprogress';
 import Router from 'next/router';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, useTheme } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
@@ -31,7 +31,6 @@ import Notifications from 'docs/src/modules/components/Notifications';
 import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
 import PageTitle from 'docs/src/modules/components/PageTitle';
 import { LANGUAGES } from 'docs/src/modules/constants';
-import compose from 'docs/src/modules/utils/compose';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 
@@ -147,7 +146,12 @@ const styles = theme => ({
 });
 
 function AppFrame(props) {
-  const { children, classes, theme, t, userLanguage } = props;
+  const { children, classes } = props;
+  const theme = useTheme();
+  const { t, userLanguage } = useSelector(state => ({
+    t: state.options.t,
+    userLanguage: state.options.userLanguage,
+  }));
 
   const [languageMenu, setLanguageMenu] = React.useState(null);
   function handleLanguageIconClick(event) {
@@ -335,18 +339,6 @@ function AppFrame(props) {
 AppFrame.propTypes = {
   children: PropTypes.node.isRequired,
   classes: PropTypes.object.isRequired,
-  t: PropTypes.func.isRequired,
-  theme: PropTypes.object.isRequired,
-  userLanguage: PropTypes.string.isRequired,
 };
 
-export default compose(
-  connect(
-    state => ({
-      t: state.options.t,
-      userLanguage: state.options.userLanguage,
-    }),
-    null,
-  ),
-  withStyles(styles, { withTheme: true }),
-)(AppFrame);
+export default withStyles(styles)(AppFrame);

docs/src/modules/components/AppTableOfContents.js

@@ -6,14 +6,13 @@ import marked from 'marked';
 import warning from 'warning';
 import throttle from 'lodash/throttle';
 import clsx from 'clsx';
-import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import { useSelector } from 'react-redux';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import textToHash from 'docs/src/modules/utils/textToHash';
 import Link from 'docs/src/modules/components/Link';
-import compose from 'docs/src/modules/utils/compose';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     top: 70,
     // Fix IE 11 position sticky issue.
@@ -59,7 +58,7 @@ const styles = theme => ({
     paddingLeft: theme.spacing(2.5),
   },
   active: {},
-});
+}));
 
 const renderer = new marked.Renderer();
 
@@ -133,8 +132,12 @@ function useThrottledOnScroll(callback, delay) {
   }, [throttledCallback]);
 }
 
-function AppTableOfContents(props) {
-  const { classes, contents, t } = props;
+export default function AppTableOfContents(props) {
+  const { contents } = props;
+  const classes = useStyles();
+  const { t } = useSelector(state => ({
+    t: state.options.t,
+  }));
 
   const itemsServer = React.useMemo(() => {
     const itemsCollectorRef = { current: [] };
@@ -250,14 +253,5 @@ function AppTableOfContents(props) {
 }
 
 AppTableOfContents.propTypes = {
-  classes: PropTypes.object.isRequired,
   contents: PropTypes.array.isRequired,
-  t: PropTypes.func.isRequired,
 };
-
-export default compose(
-  connect(state => ({
-    t: state.options.t,
-  })),
-  withStyles(styles),
-)(AppTableOfContents);

docs/src/modules/components/Demo.js

@@ -3,7 +3,7 @@ import LZString from 'lz-string';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import copy from 'clipboard-copy';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import Collapse from '@material-ui/core/Collapse';
@@ -18,7 +18,6 @@ import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import DemoSandboxed from 'docs/src/modules/components/DemoSandboxed';
 import DemoLanguages from 'docs/src/modules/components/DemoLanguages';
 import getDemoConfig from 'docs/src/modules/utils/getDemoConfig';
-import compose from 'docs/src/modules/utils/compose';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES, CODE_VARIANTS } from 'docs/src/modules/constants';
 
@@ -126,7 +125,12 @@ function getDemoData(codeVariant, demo, githubLocation) {
 }
 
 function Demo(props) {
-  const { classes, codeVariant, demo, demoOptions, dispatch, githubLocation, t } = props;
+  const { classes, demo, demoOptions, githubLocation } = props;
+  const dispatch = useDispatch();
+  const { t, codeVariant } = useSelector(state => ({
+    t: state.options.t,
+    codeVariant: state.options.codeVariant,
+  }));
   const demoData = getDemoData(codeVariant, demo, githubLocation);
 
   const [sourceHintSeen, setSourceHintSeen] = React.useState(false);
@@ -407,18 +411,9 @@ function Demo(props) {
 
 Demo.propTypes = {
   classes: PropTypes.object.isRequired,
-  codeVariant: PropTypes.string.isRequired,
   demo: PropTypes.object.isRequired,
   demoOptions: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
   githubLocation: PropTypes.string.isRequired,
-  t: PropTypes.func.isRequired,
 };
 
-export default compose(
-  connect(state => ({
-    codeVariant: state.options.codeVariant,
-    t: state.options.t,
-  })),
-  withStyles(styles),
-)(Demo);
+export default withStyles(styles)(Demo);

docs/src/modules/components/DemoLanguages.js

@@ -5,9 +5,8 @@ import Fade from '@material-ui/core/Fade';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import { JavaScript as JavaScriptIcon, TypeScript as TypeScriptIcon } from '@material-ui/docs';
+import { useSelector } from 'react-redux';
 import { CODE_VARIANTS } from 'docs/src/modules/constants';
-import compose from 'docs/src/modules/utils/compose';
-import { connect } from 'react-redux';
 
 const styles = {
   toggleButtonGroup: {
@@ -19,8 +18,11 @@ const styles = {
 };
 
 function DemoLanguages(props) {
-  const { classes, codeOpen, codeVariant, demo, gaEventCategory, onLanguageClick, t } = props;
+  const { classes, codeOpen, codeVariant, demo, gaEventCategory, onLanguageClick } = props;
   const hasTSVariant = demo.rawTS;
+  const { t } = useSelector(state => ({
+    t: state.options.t,
+  }));
 
   function renderedCodeVariant() {
     if (codeVariant === CODE_VARIANTS.TS && hasTSVariant) {
@@ -68,15 +70,6 @@ DemoLanguages.propTypes = {
   demo: PropTypes.object.isRequired,
   gaEventCategory: PropTypes.string.isRequired,
   onLanguageClick: PropTypes.func,
-  t: PropTypes.func.isRequired,
 };
 
-export default compose(
-  connect(
-    state => ({
-      t: state.options.t,
-    }),
-    {},
-  ),
-  withStyles(styles),
-)(DemoLanguages);
+export default withStyles(styles)(DemoLanguages);