From f19ee68e5b1d89a401598b74e9ad1a878d4e805d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 30 Jun 2019 12:42:14 +0200 Subject: [PATCH] [docs] Remove compose helper --- docs/src/modules/components/Ad.js | 97 ++++---- docs/src/modules/components/AppDrawer.js | 16 +- docs/src/modules/components/AppFrame.js | 26 +-- .../modules/components/AppTableOfContents.js | 26 +-- docs/src/modules/components/Demo.js | 21 +- docs/src/modules/components/DemoLanguages.js | 19 +- docs/src/modules/components/Head.js | 19 +- docs/src/modules/components/HomeBackers.js | 12 +- docs/src/modules/components/HomeFooter.js | 12 +- docs/src/modules/components/HomeQuickWord.js | 13 +- docs/src/modules/components/HomeSteps.js | 12 +- docs/src/modules/components/HomeUsers.js | 12 +- docs/src/modules/components/Link.js | 16 +- docs/src/modules/components/MarkdownDocs.js | 29 +-- .../src/modules/components/MarkdownElement.js | 20 +- docs/src/modules/utils/compose.js | 3 - .../default-theme/DefaultTheme.js | 90 ++++---- .../pages/discover-more/showcase/Showcase.js | 12 +- .../PageLayoutExamples.js | 12 +- .../onepirate/ForgotPassword.js | 151 ++++++------- .../pages/premium-themes/onepirate/SignIn.js | 185 +++++++-------- .../pages/premium-themes/onepirate/SignUp.js | 213 ++++++++---------- .../onepirate/modules/views/AppFooter.js | 21 +- pages/index.js | 174 +++++++------- yarn.lock | 10 +- 25 files changed, 518 insertions(+), 703 deletions(-) delete mode 100644 docs/src/modules/utils/compose.js diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index eaae8d969d78bd..893068cba4ac78 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -1,14 +1,14 @@ +/* eslint-disable material-ui/no-hardcoded-labels */ + 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: { @@ -24,6 +24,8 @@ const styles = theme => ({ cursor: 'default', bottom: 0, right: 0, + ...theme.typography.caption, + padding: theme.spacing(1), }, paper: { padding: theme.spacing(1), @@ -52,74 +54,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 {getAdblock(classes, t)}; + return undefined; } + checkAdblock(); + + return () => { + clearTimeout(timerAdblock.current); + }; + }, [checkAdblock]); - return ( - - {this.random >= 0.8 ? : } - {adblock === true ? getAdblock(classes, t) : null} - {adblock === false ? ( - - - - ) : null} - - ); + if (disable) { + return {getAdblock(classes, t)}; } + + return ( + + {random >= 0.8 ? : } + {adblock === true ? getAdblock(classes, t) : null} + {adblock === false ? ( + + i + + ) : null} + + ); } 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); diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index bb674617d25abc..926bc4eccb8ddd 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/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 = ( @@ -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); diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index c6903fbbf940f1..a7aa30e065d9ef 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/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 Typography from '@material-ui/core/Typography'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; @@ -32,7 +32,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'; @@ -152,7 +151,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) { @@ -345,18 +349,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); diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index 2a0cc6883ab59b..f107ad4d14a04c 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/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); diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 04c6ba121c2ee2..f4fac52d0accb7 100644 --- a/docs/src/modules/components/Demo.js +++ b/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); diff --git a/docs/src/modules/components/DemoLanguages.js b/docs/src/modules/components/DemoLanguages.js index 1ec5c95643180d..1c76813432c0fc 100644 --- a/docs/src/modules/components/DemoLanguages.js +++ b/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); diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js index fbc5e7549dcc8d..eb08d620a12e9f 100644 --- a/docs/src/modules/components/Head.js +++ b/docs/src/modules/components/Head.js @@ -4,11 +4,14 @@ import React from 'react'; import NextHead from 'next/head'; import { Router, withRouter } from 'next/router'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import compose from 'docs/src/modules/utils/compose'; +import { useSelector } from 'react-redux'; function Head(props) { - const { t, description = t('strapline'), router, title = t('headTitle'), userLanguage } = props; + const { t, userLanguage } = useSelector(state => ({ + t: state.options.t, + userLanguage: state.options.userLanguage, + })); + const { description = t('strapline'), router, title = t('headTitle') } = props; return ( @@ -40,15 +43,7 @@ function Head(props) { Head.propTypes = { description: PropTypes.string, router: PropTypes.object.isRequired, - t: PropTypes.func.isRequired, title: PropTypes.string, - userLanguage: PropTypes.string.isRequired, }; -export default compose( - withRouter, - connect(state => ({ - t: state.options.t, - userLanguage: state.options.userLanguage, - })), -)(Head); +export default withRouter(Head); diff --git a/docs/src/modules/components/HomeBackers.js b/docs/src/modules/components/HomeBackers.js index 44eb12a65adea7..160af5f4a9322a 100644 --- a/docs/src/modules/components/HomeBackers.js +++ b/docs/src/modules/components/HomeBackers.js @@ -1,12 +1,11 @@ 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 NoSsr from '@material-ui/core/NoSsr'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import Container from '@material-ui/core/Container'; import mapTranslations from 'docs/src/modules/utils/mapTranslations'; -import compose from 'docs/src/modules/utils/compose'; const req = require.context('docs/src/modules/components', false, /\.md$/); const backers = mapTranslations(req, 'md'); @@ -21,7 +20,8 @@ const styles = theme => ({ }); function HomeBackers(props) { - const { classes, userLanguage } = props; + const { classes } = props; + const { userLanguage } = useSelector(state => ({ userLanguage: state.options.userLanguage })); return (
@@ -36,10 +36,6 @@ function HomeBackers(props) { HomeBackers.propTypes = { classes: PropTypes.object.isRequired, - userLanguage: PropTypes.string.isRequired, }; -export default compose( - connect(state => ({ userLanguage: state.options.userLanguage })), - withStyles(styles), -)(HomeBackers); +export default withStyles(styles)(HomeBackers); diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js index 23d2e82a724971..497ca58b510936 100644 --- a/docs/src/modules/components/HomeFooter.js +++ b/docs/src/modules/components/HomeFooter.js @@ -1,13 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; +import { useSelector } from 'react-redux'; import Interpolate from '@trendmicro/react-interpolate'; import { withStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; import Container from '@material-ui/core/Container'; import Link from 'docs/src/modules/components/Link'; -import compose from 'docs/src/modules/utils/compose'; const styles = theme => ({ root: { @@ -34,7 +33,8 @@ const styles = theme => ({ }); function HomeFooter(props) { - const { classes, t } = props; + const { classes } = props; + const { t } = useSelector(state => ({ t: state.options.t })); return (
@@ -117,10 +117,6 @@ function HomeFooter(props) { HomeFooter.propTypes = { classes: PropTypes.object.isRequired, - t: PropTypes.func.isRequired, }; -export default compose( - connect(state => ({ t: state.options.t })), - withStyles(styles), -)(HomeFooter); +export default withStyles(styles)(HomeFooter); diff --git a/docs/src/modules/components/HomeQuickWord.js b/docs/src/modules/components/HomeQuickWord.js index c6a4ca3a38add7..818ac23677ef02 100644 --- a/docs/src/modules/components/HomeQuickWord.js +++ b/docs/src/modules/components/HomeQuickWord.js @@ -1,11 +1,10 @@ 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 NoSsr from '@material-ui/core/NoSsr'; import Link from 'docs/src/modules/components/Link'; -import compose from 'docs/src/modules/utils/compose'; const backers = [ { @@ -50,8 +49,8 @@ const styles = theme => ({ }); function HomeQuickWord(props) { - const { classes, t } = props; - + const { classes } = props; + const { t } = useSelector(state => ({ t: state.options.t })); const backer = backers[Math.round((backers.length - 1) * Math.random())]; return ( @@ -77,10 +76,6 @@ function HomeQuickWord(props) { HomeQuickWord.propTypes = { classes: PropTypes.object.isRequired, - t: PropTypes.func.isRequired, }; -export default compose( - connect(state => ({ t: state.options.t })), - withStyles(styles), -)(HomeQuickWord); +export default withStyles(styles)(HomeQuickWord); diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js index 0a4ec1fe2d5a26..78e990e7fa0789 100644 --- a/docs/src/modules/components/HomeSteps.js +++ b/docs/src/modules/components/HomeSteps.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { connect } from 'react-redux'; +import { useSelector } from 'react-redux'; import { withStyles, useTheme } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; @@ -13,7 +13,6 @@ import WhatshotIcon from '@material-ui/icons/Whatshot'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import NoSsr from '@material-ui/core/NoSsr'; import Link from 'docs/src/modules/components/Link'; -import compose from 'docs/src/modules/utils/compose'; const InstallationLink = React.forwardRef((buttonProps, ref) => ( @@ -95,7 +94,8 @@ const PremiumThemesLink = React.forwardRef((props, ref) => { }); function HomeSteps(props) { - const { classes, t } = props; + const { classes } = props; + const { t } = useSelector(state => ({ t: state.options.t })); const theme = useTheme(); return ( @@ -202,10 +202,6 @@ function HomeSteps(props) { HomeSteps.propTypes = { classes: PropTypes.object.isRequired, - t: PropTypes.func.isRequired, }; -export default compose( - connect(state => ({ t: state.options.t })), - withStyles(styles), -)(HomeSteps); +export default withStyles(styles)(HomeSteps); diff --git a/docs/src/modules/components/HomeUsers.js b/docs/src/modules/components/HomeUsers.js index 3ed4ca304e73db..d42f25ae02fde2 100644 --- a/docs/src/modules/components/HomeUsers.js +++ b/docs/src/modules/components/HomeUsers.js @@ -1,6 +1,6 @@ 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 NoSsr from '@material-ui/core/NoSsr'; import Divider from '@material-ui/core/Divider'; @@ -8,7 +8,6 @@ import Grid from '@material-ui/core/Grid'; import Container from '@material-ui/core/Container'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; -import compose from 'docs/src/modules/utils/compose'; const users = [ { @@ -53,7 +52,8 @@ const styles = theme => ({ }); function HomeUsers(props) { - const { classes, t } = props; + const { classes } = props; + const { t } = useSelector(state => ({ t: state.options.t })); return (
@@ -97,10 +97,6 @@ function HomeUsers(props) { HomeUsers.propTypes = { classes: PropTypes.object.isRequired, - t: PropTypes.func.isRequired, }; -export default compose( - connect(state => ({ t: state.options.t })), - withStyles(styles), -)(HomeUsers); +export default withStyles(styles)(HomeUsers); diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js index bce6291bf210a4..4df63b46379b7d 100644 --- a/docs/src/modules/components/Link.js +++ b/docs/src/modules/components/Link.js @@ -5,8 +5,7 @@ import clsx from 'clsx'; import { withRouter } from 'next/router'; import NextLink from 'next/link'; import MuiLink from '@material-ui/core/Link'; -import { connect } from 'react-redux'; -import compose from 'docs/src/modules/utils/compose'; +import { useSelector } from 'react-redux'; const NextComposed = React.forwardRef(function NextComposed(props, ref) { const { as, href, prefetch, ...other } = props; @@ -34,10 +33,10 @@ function Link(props) { naked, role: roleProp, router, - userLanguage, ...other } = props; + const { userLanguage } = useSelector(state => ({ userLanguage: state.options.userLanguage })); const className = clsx(classNameProps, { [activeClassName]: router.pathname === props.href && activeClassName, }); @@ -71,21 +70,12 @@ Link.propTypes = { router: PropTypes.shape({ pathname: PropTypes.string.isRequired, }).isRequired, - userLanguage: PropTypes.string.isRequired, }; Link.defaultProps = { activeClassName: 'active', }; -const RouterLink = compose( - withRouter, - connect( - state => ({ - userLanguage: state.options.userLanguage, - }), - {}, - ), -)(Link); +const RouterLink = withRouter(Link); export default React.forwardRef((props, ref) => ); diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 2ff8ca90c3f324..c3d9cb8ca43c42 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import warning from 'warning'; -import { connect } from 'react-redux'; +import { useSelector } from 'react-redux'; import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import Portal from '@material-ui/core/Portal'; @@ -25,7 +25,6 @@ import { getDescription, demoRegexp, } from 'docs/src/modules/utils/parseMarkdown'; -import compose from 'docs/src/modules/utils/compose'; import { pageToTitleI18n } from 'docs/src/modules/utils/helpers'; import { LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants'; import Link from 'docs/src/modules/components/Link'; @@ -100,18 +99,21 @@ function MarkdownDocs(props) { const { blog, classes, - disableAd, - disableToc, + disableAd = false, + disableToc = false, disableEdit, markdown: markdownProp, markdownLocation: markdownLocationProp, req, reqPrefix, reqSource, - t, - userLanguage, } = props; + const { t, userLanguage } = useSelector(state => ({ + t: state.options.t, + userLanguage: state.options.userLanguage, + })); + let demos; let markdown = markdownProp; @@ -293,19 +295,6 @@ MarkdownDocs.propTypes = { req: PropTypes.func, reqPrefix: PropTypes.string, reqSource: PropTypes.func, - t: PropTypes.func.isRequired, - userLanguage: PropTypes.string.isRequired, }; -MarkdownDocs.defaultProps = { - disableAd: false, - disableToc: false, -}; - -export default compose( - connect(state => ({ - t: state.options.t, - userLanguage: state.options.userLanguage, - })), - withStyles(styles), -)(MarkdownDocs); +export default withStyles(styles)(MarkdownDocs); diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 97623548bf2264..efec7a64545b4b 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -1,11 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { connect } from 'react-redux'; +import { useSelector } from 'react-redux'; import marked from 'marked'; import { withStyles } from '@material-ui/core/styles'; import textToHash from 'docs/src/modules/utils/textToHash'; -import compose from 'docs/src/modules/utils/compose'; import prism from 'docs/src/modules/components/prism'; // Monkey patch to preserve non-breaking spaces @@ -291,7 +290,11 @@ const styles = theme => ({ }); function MarkdownElement(props) { - const { classes, className, text, userLanguage, ...other } = props; + const { classes, className, text, ...other } = props; + + const { userLanguage } = useSelector(state => ({ + userLanguage: state.options.userLanguage, + })); // eslint-disable-next-line no-underscore-dangle global.__MARKED_USER_LANGUAGE__ = userLanguage; @@ -311,15 +314,6 @@ MarkdownElement.propTypes = { classes: PropTypes.object.isRequired, className: PropTypes.string, text: PropTypes.string, - userLanguage: PropTypes.string.isRequired, }; -export default compose( - connect( - state => ({ - userLanguage: state.options.userLanguage, - }), - {}, - ), - withStyles(styles, { flip: false }), -)(MarkdownElement); +export default withStyles(styles, { flip: false })(MarkdownElement); diff --git a/docs/src/modules/utils/compose.js b/docs/src/modules/utils/compose.js deleted file mode 100644 index 57cc5817b57e18..00000000000000 --- a/docs/src/modules/utils/compose.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function compose(...funcs) { - return funcs.reduce((a, b) => (...args) => a(b(...args)), arg => arg); -} diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 74fb2abfbd3c06..09e199c00c11f2 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -1,12 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; +import { useSelector } from 'react-redux'; import url from 'url'; import Inspector from 'react-inspector'; import { withStyles, createMuiTheme } from '@material-ui/core/styles'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; -import compose from 'docs/src/modules/utils/compose'; const styles = theme => ({ root: { @@ -22,13 +21,13 @@ const styles = theme => ({ }, }); -class DefaultTheme extends React.Component { - state = { - checked: false, - expandPaths: null, - }; +function DefaultTheme(props) { + const { classes, theme: docsTheme } = props; + const [checked, setChecked] = React.useState(false); + const [expandPaths, setExpandPaths] = React.useState(null); + const { t } = useSelector(state => ({ t: state.options.t })); - componentDidMount() { + React.useEffect(() => { const URL = url.parse(document.location.href, true); const expandPath = URL.query['expend-path']; @@ -36,57 +35,50 @@ class DefaultTheme extends React.Component { return; } - this.setState({ - expandPaths: expandPath.split('.').reduce((acc, path) => { + setExpandPaths( + expandPath.split('.').reduce((acc, path) => { const last = acc.length > 0 ? `${acc[acc.length - 1]}.` : ''; acc.push(last + path); return acc; }, []), - }); - } - - render() { - const { classes, t, theme: docsTheme } = this.props; - const { checked, expandPaths } = this.state; + ); + }, []); - const theme = createMuiTheme({ - palette: { - type: docsTheme.palette.type, - }, - direction: docsTheme.direction, - }); + const theme = createMuiTheme({ + palette: { + type: docsTheme.palette.type, + }, + direction: docsTheme.direction, + }); - return ( -
- this.setState({ checked: value })} - /> - } - label={t('expandAll')} - /> - -
- ); - } + return ( +
+ { + setChecked(value); + }} + /> + } + label={t('expandAll')} + /> + +
+ ); } DefaultTheme.propTypes = { classes: PropTypes.object.isRequired, - t: PropTypes.func.isRequired, theme: PropTypes.object.isRequired, }; -export default compose( - withStyles(styles, { withTheme: true }), - connect(state => ({ t: state.options.t })), -)(DefaultTheme); +export default withStyles(styles, { withTheme: true })(DefaultTheme); diff --git a/docs/src/pages/discover-more/showcase/Showcase.js b/docs/src/pages/discover-more/showcase/Showcase.js index 9fdb315787c14d..607c294f5f66dc 100644 --- a/docs/src/pages/discover-more/showcase/Showcase.js +++ b/docs/src/pages/discover-more/showcase/Showcase.js @@ -1,6 +1,6 @@ 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 InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; @@ -12,7 +12,6 @@ import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; import { GitHub as GithubIcon } from '@material-ui/docs'; import Link from 'docs/src/modules/components/Link'; -import compose from 'docs/src/modules/utils/compose'; import appList from './appList'; const styles = theme => ({ @@ -76,9 +75,10 @@ const sortFunctions = { }; function Showcase(props) { - const { classes, t } = props; + const { classes } = props; const [sortFunctionName, setSortFunctionName] = React.useState('dateAdded'); const sortFunction = sortFunctions[sortFunctionName]; + const { t } = useSelector(state => ({ t: state.options.t })); function handleChangeSort(event) { setSortFunctionName(event.target.value); @@ -150,10 +150,6 @@ function Showcase(props) { Showcase.propTypes = { classes: PropTypes.object.isRequired, - t: PropTypes.func.isRequired, }; -export default compose( - connect(state => ({ t: state.options.t })), - withStyles(styles), -)(Showcase); +export default withStyles(styles)(Showcase); diff --git a/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js b/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js index 9f756a0df418b9..cf90cec31b6d89 100644 --- a/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js +++ b/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; +import { useSelector } from 'react-redux'; import { Router } from 'next/router'; import { withStyles } from '@material-ui/core/styles'; import Card from '@material-ui/core/Card'; @@ -12,7 +12,6 @@ import CardMedia from '@material-ui/core/CardMedia'; import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import compose from 'docs/src/modules/utils/compose'; const styles = { item: { @@ -111,7 +110,8 @@ function layouts(t) { } function PageLayoutExamples(props) { - const { classes, t } = props; + const { classes } = props; + const { t } = useSelector(state => ({ t: state.options.t })); return ( @@ -146,10 +146,6 @@ function PageLayoutExamples(props) { PageLayoutExamples.propTypes = { classes: PropTypes.object.isRequired, - t: PropTypes.func.isRequired, }; -export default compose( - connect(state => ({ t: state.options.t })), - withStyles(styles), -)(PageLayoutExamples); +export default withStyles(styles)(PageLayoutExamples); diff --git a/docs/src/pages/premium-themes/onepirate/ForgotPassword.js b/docs/src/pages/premium-themes/onepirate/ForgotPassword.js index e8684fab03685a..45025db2077747 100644 --- a/docs/src/pages/premium-themes/onepirate/ForgotPassword.js +++ b/docs/src/pages/premium-themes/onepirate/ForgotPassword.js @@ -1,9 +1,8 @@ import withRoot from './modules/withRoot'; // --- Post bootstrap ----- import React from 'react'; -import PropTypes from 'prop-types'; import { Field, Form, FormSpy } from 'react-final-form'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Typography from './modules/components/Typography'; import AppFooter from './modules/views/AppFooter'; import AppAppBar from './modules/views/AppAppBar'; @@ -12,9 +11,8 @@ import { email, required } from './modules/form/validation'; import RFTextField from './modules/form/RFTextField'; import FormButton from './modules/form/FormButton'; import FormFeedback from './modules/form/FormFeedback'; -import compose from 'docs/src/modules/utils/compose'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ form: { marginTop: theme.spacing(6), }, @@ -25,97 +23,82 @@ const styles = theme => ({ feedback: { marginTop: theme.spacing(2), }, -}); +})); -class ForgotPassword extends React.Component { - state = { - sent: false, - }; +function ForgotPassword() { + const classes = useStyles(); + const [sent, setSent] = React.useState(false); - validate = values => { - const errors = required(['email', 'password'], values, this.props); + const validate = values => { + const errors = required(['email', 'password'], values); if (!errors.email) { - const emailError = email(values.email, values, this.props); + const emailError = email(values.email, values); if (emailError) { - errors.email = email(values.email, values, this.props); + errors.email = email(values.email, values); } } return errors; }; - handleSubmit = () => {}; - - render() { - const { classes } = this.props; - const { sent } = this.state; + const handleSubmit = () => { + setSent(true); + }; - return ( - - - - - - Forgot your password? - - - {"Enter your email address below and we'll " + - 'send you a link to reset your password.'} - - -
- {({ handleSubmit, submitting }) => ( - - - - {({ submitError }) => - submitError ? ( - - {submitError} - - ) : null - } - - - {submitting || sent ? 'In progress…' : 'Send reset link'} - - - )} - -
- - - ); - } + return ( + + + + + + Forgot your password? + + + {"Enter your email address below and we'll " + + 'send you a link to reset your password.'} + + +
+ {({ handleSubmit2, submitting }) => ( + + + + {({ submitError }) => + submitError ? ( + + {submitError} + + ) : null + } + + + {submitting || sent ? 'In progress…' : 'Send reset link'} + + + )} + +
+ + + ); } -ForgotPassword.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default compose( - withRoot, - withStyles(styles), -)(ForgotPassword); +export default withRoot(ForgotPassword); diff --git a/docs/src/pages/premium-themes/onepirate/SignIn.js b/docs/src/pages/premium-themes/onepirate/SignIn.js index 9da77041635c2f..1164ca8b21ebe6 100644 --- a/docs/src/pages/premium-themes/onepirate/SignIn.js +++ b/docs/src/pages/premium-themes/onepirate/SignIn.js @@ -1,9 +1,8 @@ import withRoot from './modules/withRoot'; // --- Post bootstrap ----- import React from 'react'; -import PropTypes from 'prop-types'; import { Field, Form, FormSpy } from 'react-final-form'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Link from '@material-ui/core/Link'; import Typography from './modules/components/Typography'; import AppFooter from './modules/views/AppFooter'; @@ -13,9 +12,8 @@ import { email, required } from './modules/form/validation'; import RFTextField from './modules/form/RFTextField'; import FormButton from './modules/form/FormButton'; import FormFeedback from './modules/form/FormFeedback'; -import compose from 'docs/src/modules/utils/compose'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ form: { marginTop: theme.spacing(6), }, @@ -26,116 +24,101 @@ const styles = theme => ({ feedback: { marginTop: theme.spacing(2), }, -}); +})); -class SignIn extends React.Component { - state = { - sent: false, - }; +function SignIn() { + const classes = useStyles(); + const [sent, setSent] = React.useState(false); - validate = values => { - const errors = required(['email', 'password'], values, this.props); + const validate = values => { + const errors = required(['email', 'password'], values); if (!errors.email) { - const emailError = email(values.email, values, this.props); + const emailError = email(values.email, values); if (emailError) { - errors.email = email(values.email, values, this.props); + errors.email = email(values.email, values); } } return errors; }; - handleSubmit = () => {}; - - render() { - const { classes } = this.props; - const { sent } = this.state; + const handleSubmit = () => { + setSent(true); + }; - return ( - - - - - - Sign In - - - {'Not a member yet? '} - - Sign Up here - - - -
- {({ handleSubmit, submitting }) => ( - - - - - {({ submitError }) => - submitError ? ( - - {submitError} - - ) : null - } - - - {submitting || sent ? 'In progress…' : 'Sign In'} - - - )} - - - - Forgot password? + return ( + + + + + + Sign In + + + {'Not a member yet? '} + + Sign Up here - - - - ); - } +
+
+ {({ handleSubmit2, submitting }) => ( + + + + + {({ submitError }) => + submitError ? ( + + {submitError} + + ) : null + } + + + {submitting || sent ? 'In progress…' : 'Sign In'} + + + )} + + + + Forgot password? + + + + + + ); } -SignIn.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default compose( - withRoot, - withStyles(styles), -)(SignIn); +export default withRoot(SignIn); diff --git a/docs/src/pages/premium-themes/onepirate/SignUp.js b/docs/src/pages/premium-themes/onepirate/SignUp.js index f450c2c2066b25..bc642798af0390 100644 --- a/docs/src/pages/premium-themes/onepirate/SignUp.js +++ b/docs/src/pages/premium-themes/onepirate/SignUp.js @@ -1,8 +1,7 @@ import withRoot from './modules/withRoot'; // --- Post bootstrap ----- import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; import Link from '@material-ui/core/Link'; import { Field, Form, FormSpy } from 'react-final-form'; @@ -14,9 +13,8 @@ import { email, required } from './modules/form/validation'; import RFTextField from './modules/form/RFTextField'; import FormButton from './modules/form/FormButton'; import FormFeedback from './modules/form/FormFeedback'; -import compose from 'docs/src/modules/utils/compose'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ form: { marginTop: theme.spacing(6), }, @@ -27,129 +25,114 @@ const styles = theme => ({ feedback: { marginTop: theme.spacing(2), }, -}); +})); -class SignUp extends React.Component { - state = { - sent: false, - }; +function SignUp() { + const classes = useStyles(); + const [sent, setSent] = React.useState(false); - validate = values => { - const errors = required(['firstName', 'lastName', 'email', 'password'], values, this.props); + const validate = values => { + const errors = required(['firstName', 'lastName', 'email', 'password'], values); if (!errors.email) { - const emailError = email(values.email, values, this.props); + const emailError = email(values.email, values); if (emailError) { - errors.email = email(values.email, values, this.props); + errors.email = email(values.email, values); } } return errors; }; - handleSubmit = () => {}; - - render() { - const { classes } = this.props; - const { sent } = this.state; + const handleSubmit = () => { + setSent(true); + }; - return ( - - - - - - Sign Up - - - - Already have an account? - - - -
- {({ handleSubmit, submitting }) => ( - - - - - - - - + return ( + + + + + + Sign Up + + + + Already have an account? + + + + + {({ handleSubmit2, submitting }) => ( + + + + - - - - {({ submitError }) => - submitError ? ( - - {submitError} - - ) : null - } - - - {submitting || sent ? 'In progress…' : 'Sign Up'} - - - )} - - - - - ); - } + + + +
+ + + + {({ submitError }) => + submitError ? ( + + {submitError} + + ) : null + } + + + {submitting || sent ? 'In progress…' : 'Sign Up'} + + + )} + + + + + ); } -SignUp.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default compose( - withRoot, - withStyles(styles), -)(SignUp); +export default withRoot(SignUp); diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js index 0a9677756a192d..647d6c047d861f 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js +++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js @@ -1,14 +1,12 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; import Link from '@material-ui/core/Link'; import Container from '@material-ui/core/Container'; import Typography from '../components/Typography'; import TextField from '../components/TextField'; -import compose from 'docs/src/modules/utils/compose'; -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { display: 'flex', backgroundColor: theme.palette.secondary.light, @@ -49,7 +47,7 @@ const styles = theme => ({ marginTop: theme.spacing(1), width: 150, }, -}); +})); const LANGUAGES = [ { @@ -62,8 +60,8 @@ const LANGUAGES = [ }, ]; -function AppFooter(props) { - const { classes } = props; +export default function AppFooter() { + const classes = useStyles(); return ( @@ -145,12 +143,3 @@ function AppFooter(props) { ); } - -AppFooter.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default compose( - React.memo, - withStyles(styles), -)(AppFooter); diff --git a/pages/index.js b/pages/index.js index a80ec39260c536..38043db10d4f99 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,9 +1,8 @@ import 'docs/src/modules/components/bootstrap'; // --- Post bootstrap ----- import React from 'react'; -import PropTypes from 'prop-types'; -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 Button from '@material-ui/core/Button'; import Container from '@material-ui/core/Container'; @@ -16,7 +15,6 @@ import AppFrame from 'docs/src/modules/components/AppFrame'; import Link from 'docs/src/modules/components/Link'; import Head from 'docs/src/modules/components/Head'; import loadScript from 'docs/src/modules/utils/loadScript'; -import compose from 'docs/src/modules/utils/compose'; let dependenciesLoaded = false; @@ -31,7 +29,7 @@ function loadDependencies() { loadScript('https://platform.twitter.com/widgets.js', document.querySelector('head')); } -const styles = theme => ({ +const useStyles = makeStyles(theme => ({ root: { flex: '1 0 100%', }, @@ -96,89 +94,90 @@ const styles = theme => ({ color: theme.palette.background.paper, }, }, -}); +})); const GettingStartedLink = React.forwardRef((props, ref) => { return ; }); -class HomePage extends React.Component { - componentDidMount() { +export default function HomePage() { + React.useEffect(() => { if (window.location.hash !== '' && window.location.hash !== '#main=content') { window.location.replace(`https://v0.material-ui.com/${window.location.hash}`); } loadDependencies(); - } - - render() { - const { classes, t } = this.props; + }, []); + const { t } = useSelector(state => ({ + t: state.options.t, + })); + const classes = useStyles(); - return ( - -
- -
-
- - Material-UI Logo -
- - {'MATERIAL-UI'} - - - {t('strapline')} - - -
- -
- - - - - -
- -
-