From 7bb8c2c1000442b8f6f525e5ad2123093a1adb9b Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Thu, 2 Apr 2020 13:03:18 +0200 Subject: [PATCH] =?UTF-8?q?[examples]=C2=A0Move=20Copyright=20into=20its?= =?UTF-8?q?=20own=20component=20(#20383)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/pages/_app.js | 22 ++++++++++--------- .../gatsby-theme/src/components/Copyright.js | 16 ++++++++++++++ examples/gatsby-theme/src/pages/about.js | 14 +----------- examples/gatsby-theme/src/pages/index.js | 14 +----------- examples/gatsby/src/components/Copyright.js | 16 ++++++++++++++ examples/gatsby/src/pages/about.js | 15 +------------ examples/gatsby/src/pages/index.js | 15 +------------ .../nextjs-with-typescript/pages/_app.tsx | 10 +++++---- .../nextjs-with-typescript/pages/about.tsx | 15 +------------ .../nextjs-with-typescript/pages/index.tsx | 15 +------------ .../nextjs-with-typescript/src/Copyright.tsx | 16 ++++++++++++++ examples/nextjs/pages/_app.js | 10 +++++---- examples/nextjs/pages/about.js | 15 +------------ examples/nextjs/pages/index.js | 15 +------------ examples/nextjs/src/Copyright.js | 16 ++++++++++++++ 15 files changed, 96 insertions(+), 128 deletions(-) create mode 100644 examples/gatsby-theme/src/components/Copyright.js create mode 100644 examples/gatsby/src/components/Copyright.js create mode 100644 examples/nextjs-with-typescript/src/Copyright.tsx create mode 100644 examples/nextjs/src/Copyright.js diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 2240e1bd7bc109..3a633453f9a645 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -2,7 +2,6 @@ import 'docs/src/modules/components/bootstrap'; // --- Post bootstrap ----- import React from 'react'; -import App from 'next/app'; import find from 'lodash/find'; import { Provider as ReduxProvider, useDispatch, useSelector } from 'react-redux'; import { loadCSS } from 'fg-loadcss/src/loadCSS'; @@ -328,18 +327,21 @@ AppWrapper.propTypes = { pageProps: PropTypes.object.isRequired, }; -export default class MyApp extends App { - render() { - const { Component, pageProps } = this.props; +export default function MyApp(props) { + const { Component, pageProps } = props; - return ( - - - - ); - } + return ( + + + + ); } +MyApp.propTypes = { + Component: PropTypes.func.isRequired, + pageProps: PropTypes.object.isRequired, +}; + MyApp.getInitialProps = async ({ ctx, Component }) => { let pageProps = {}; diff --git a/examples/gatsby-theme/src/components/Copyright.js b/examples/gatsby-theme/src/components/Copyright.js new file mode 100644 index 00000000000000..24a913f9dbf99f --- /dev/null +++ b/examples/gatsby-theme/src/components/Copyright.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Typography from '@material-ui/core/Typography'; +import { Link } from 'gatsby-theme-material-ui'; + +export default function Copyright() { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()} + {'.'} + + ); +} diff --git a/examples/gatsby-theme/src/pages/about.js b/examples/gatsby-theme/src/pages/about.js index 05a55510c8d647..9ee40eabb086d4 100644 --- a/examples/gatsby-theme/src/pages/about.js +++ b/examples/gatsby-theme/src/pages/about.js @@ -4,19 +4,7 @@ import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; import { Link } from 'gatsby-theme-material-ui'; import ProTip from '../components/ProTip'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} +import Copyright from '../components/Copyright'; export default function About() { return ( diff --git a/examples/gatsby-theme/src/pages/index.js b/examples/gatsby-theme/src/pages/index.js index 87d83d7c8500c7..f3e491c474e227 100644 --- a/examples/gatsby-theme/src/pages/index.js +++ b/examples/gatsby-theme/src/pages/index.js @@ -4,19 +4,7 @@ import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; import { Link } from 'gatsby-theme-material-ui'; import ProTip from '../components/ProTip'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} +import Copyright from '../components/Copyright'; export default function Index() { return ( diff --git a/examples/gatsby/src/components/Copyright.js b/examples/gatsby/src/components/Copyright.js new file mode 100644 index 00000000000000..5d4e8f33e91f0b --- /dev/null +++ b/examples/gatsby/src/components/Copyright.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Typography from '@material-ui/core/Typography'; +import MuiLink from '@material-ui/core/Link'; + +export default function Copyright() { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()} + {'.'} + + ); +} diff --git a/examples/gatsby/src/pages/about.js b/examples/gatsby/src/pages/about.js index 853db9a8744181..13a1f3bc193062 100644 --- a/examples/gatsby/src/pages/about.js +++ b/examples/gatsby/src/pages/about.js @@ -2,22 +2,9 @@ import React from 'react'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; -import MuiLink from '@material-ui/core/Link'; import ProTip from '../components/ProTip'; import Link from '../components/Link'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} +import Copyright from '../components/Copyright'; export default function About() { return ( diff --git a/examples/gatsby/src/pages/index.js b/examples/gatsby/src/pages/index.js index 61779ae96c4926..5a53aa8eda0d42 100644 --- a/examples/gatsby/src/pages/index.js +++ b/examples/gatsby/src/pages/index.js @@ -2,22 +2,9 @@ import React from 'react'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; -import MuiLink from '@material-ui/core/Link'; import ProTip from '../components/ProTip'; import Link from '../components/Link'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} +import Copyright from '../components/Copyright'; export default function Index() { return ( diff --git a/examples/nextjs-with-typescript/pages/_app.tsx b/examples/nextjs-with-typescript/pages/_app.tsx index b62f98b11bdc74..2ca89a1f4cda74 100644 --- a/examples/nextjs-with-typescript/pages/_app.tsx +++ b/examples/nextjs-with-typescript/pages/_app.tsx @@ -1,14 +1,16 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import Head from 'next/head'; import { AppProps } from 'next/app'; import { ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import theme from '../src/theme'; -export default function MyApp({ Component, pageProps }: AppProps) { - useEffect(() => { +export default function MyApp(props: AppProps) { + const { Component, pageProps } = props; + + React.useEffect(() => { // Remove the server-side injected CSS. - const jssStyles = document.getElementById('jss-server-side'); + const jssStyles = document.querySelector('#jss-server-side'); if (jssStyles) { jssStyles.parentElement!.removeChild(jssStyles); } diff --git a/examples/nextjs-with-typescript/pages/about.tsx b/examples/nextjs-with-typescript/pages/about.tsx index 9fda0c5ac004ca..2d58f7601228a2 100644 --- a/examples/nextjs-with-typescript/pages/about.tsx +++ b/examples/nextjs-with-typescript/pages/about.tsx @@ -2,22 +2,9 @@ import React from 'react'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; -import MuiLink from '@material-ui/core/Link'; import ProTip from '../src/ProTip'; import Link from '../src/Link'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} +import Copyright from '../src/Copyright'; export default function About() { return ( diff --git a/examples/nextjs-with-typescript/pages/index.tsx b/examples/nextjs-with-typescript/pages/index.tsx index f8993c3dca70a0..808e1465c68ca8 100644 --- a/examples/nextjs-with-typescript/pages/index.tsx +++ b/examples/nextjs-with-typescript/pages/index.tsx @@ -2,22 +2,9 @@ import React from 'react'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; -import MuiLink from '@material-ui/core/Link'; import ProTip from '../src/ProTip'; import Link from '../src/Link'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} +import Copyright from '../src/Copyright'; export default function Index() { return ( diff --git a/examples/nextjs-with-typescript/src/Copyright.tsx b/examples/nextjs-with-typescript/src/Copyright.tsx new file mode 100644 index 00000000000000..5d4e8f33e91f0b --- /dev/null +++ b/examples/nextjs-with-typescript/src/Copyright.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import Typography from '@material-ui/core/Typography'; +import MuiLink from '@material-ui/core/Link'; + +export default function Copyright() { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()} + {'.'} + + ); +} diff --git a/examples/nextjs/pages/_app.js b/examples/nextjs/pages/_app.js index 9cf9c2f8502eb8..3e0462b7a15243 100644 --- a/examples/nextjs/pages/_app.js +++ b/examples/nextjs/pages/_app.js @@ -1,14 +1,16 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import Head from 'next/head'; import { ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import theme from '../src/theme'; -export default function MyApp({ Component, pageProps }) { - useEffect(() => { +export default function MyApp(props) { + const { Component, pageProps } = props; + + React.useEffect(() => { // Remove the server-side injected CSS. - const jssStyles = document.getElementById('jss-server-side'); + const jssStyles = document.querySelector('#jss-server-side'); if (jssStyles) { jssStyles.parentElement.removeChild(jssStyles); } diff --git a/examples/nextjs/pages/about.js b/examples/nextjs/pages/about.js index 536f80b1227434..1b0c0dacfda5a6 100644 --- a/examples/nextjs/pages/about.js +++ b/examples/nextjs/pages/about.js @@ -2,23 +2,10 @@ import React from 'react'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; -import MuiLink from '@material-ui/core/Link'; import Button from '@material-ui/core/Button'; import ProTip from '../src/ProTip'; import Link from '../src/Link'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} +import Copyright from '../src/Copyright'; export default function About() { return ( diff --git a/examples/nextjs/pages/index.js b/examples/nextjs/pages/index.js index bd8423b2cf7b06..0bd1c0ccfe13fe 100644 --- a/examples/nextjs/pages/index.js +++ b/examples/nextjs/pages/index.js @@ -2,22 +2,9 @@ import React from 'react'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; -import MuiLink from '@material-ui/core/Link'; import ProTip from '../src/ProTip'; import Link from '../src/Link'; - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} +import Copyright from '../src/Copyright'; export default function Index() { return ( diff --git a/examples/nextjs/src/Copyright.js b/examples/nextjs/src/Copyright.js new file mode 100644 index 00000000000000..5d4e8f33e91f0b --- /dev/null +++ b/examples/nextjs/src/Copyright.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Typography from '@material-ui/core/Typography'; +import MuiLink from '@material-ui/core/Link'; + +export default function Copyright() { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()} + {'.'} + + ); +}