ready to be merged

mui · Jun 27, 2018 · b2c9b52 · b2c9b52
1 parent 56765a4
commit b2c9b52
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 108 deletions.
diff --git a/examples/nextjs/pages/_app.js b/examples/nextjs/pages/_app.js
@@ -1,28 +1,18 @@
 import React from 'react';
-import App, {Container} from 'next/app';
+import App, { Container } from 'next/app';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import JssProvider from 'react-jss/lib/JssProvider';
-
 import getPageContext from '../src/getPageContext';
 
-
-export default class MyApp extends App {
-  static async getInitialProps ({ Component, router, ctx }) {
-    let pageProps = {};
-
-    if (Component.getInitialProps) {
-      pageProps = await Component.getInitialProps(ctx);
-    }
-
-    return {pageProps};
-  }
-
+class MyApp extends App {
   constructor(props) {
     super(props);
     this.pageContext = getPageContext();
   }
 
+  pageContext = null;
+
   componentDidMount() {
     // Remove the server-side injected CSS.
     const jssStyles = document.querySelector('#jss-server-side');
@@ -31,30 +21,31 @@ export default class MyApp extends App {
     }
   }
 
-  render () {
-    const {Component, pageProps} = this.props
-    // MuiThemeProvider makes the theme available down the React tree thanks to React context.
+  render() {
+    const { Component, pageProps } = this.props;
     return (
       <Container>
         {/* Wrap every page in Jss and Theme providers */}
         <JssProvider
           registry={this.pageContext.sheetsRegistry}
           generateClassName={this.pageContext.generateClassName}
         >
+          {/* MuiThemeProvider makes the theme available down the React
+              tree thanks to React context. */}
           <MuiThemeProvider
             theme={this.pageContext.theme}
             sheetsManager={this.pageContext.sheetsManager}
           >
-            <>
-              {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-              <CssBaseline />
-              {/* Pass pageContext to the _document though the renderPage enhancer
-                  to render collected styles on server side. */}
-              <Component pageContext={this.pageContext} {...pageProps} />
-            </>
+            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+            <CssBaseline />
+            {/* Pass pageContext to the _document though the renderPage enhancer
+                to render collected styles on server side. */}
+            <Component pageContext={this.pageContext} {...pageProps} />
           </MuiThemeProvider>
         </JssProvider>
       </Container>
     );
   }
 }
+
+export default MyApp;
diff --git a/examples/nextjs/pages/_document.js b/examples/nextjs/pages/_document.js
@@ -1,8 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Document, { Head, Main, NextScript } from 'next/document';
 import flush from 'styled-jsx/server';
 
-
 class MyDocument extends Document {
   render() {
     const { pageContext } = this.props;
@@ -34,55 +34,61 @@ class MyDocument extends Document {
       </html>
     );
   }
+}
 
-  static getInitialProps(ctx) {
-    // Resolution order
-    //
-    // On the server:
-    // 1. app.getInitialProps
-    // 2. page.getInitialProps
-    // 3. document.getInitialProps
-    // 4. app.render
-    // 5. page.render
-    // 6. document.render
-    //
-    // On the server with error:
-    // 3. document.getInitialProps
-    // 4. app.render
-    // 5. page.render
-    // 6. document.render
-    //
-    // On the client
-    // 1. app.getInitialProps
-    // 2. page.getInitialProps
-    // 4. app.render
-    // 5. page.render
+MyDocument.getInitialProps = ctx => {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
 
-    // Render app and page and get the context of the page with collected side effects.
-    let pageContext;
-    const page = ctx.renderPage(Component => props => {
+  // Render app and page and get the context of the page with collected side effects.
+  let pageContext;
+  const page = ctx.renderPage(Component => {
+    const WrappedComponent = props => {
       pageContext = props.pageContext;
-      return (
-        <Component {...props} />
-      );
-    });
+      return <Component {...props} />;
+    };
 
-    return {
-      ...page,
-      pageContext,
-      // Styles fragment is rendered after the app and page rendering finish.
-      styles: (
-        <React.Fragment>
-          <style
-            id="jss-server-side"
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
-          />
-          {flush() || null}
-        </React.Fragment>
-      ),
+    WrappedComponent.propTypes = {
+      pageContext: PropTypes.object.isRequired,
     };
-  }
+
+    return WrappedComponent;
+  });
+
+  return {
+    ...page,
+    pageContext,
+    // Styles fragment is rendered after the app and page rendering finish.
+    styles: (
+      <React.Fragment>
+        <style
+          id="jss-server-side"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
+        />
+        {flush() || null}
+      </React.Fragment>
+    ),
+  };
 };
 
 export default MyDocument;
diff --git a/examples/nextjs/pages/about.js b/examples/nextjs/pages/about.js
@@ -1,36 +1,40 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
-import Link from 'next/link'
-
-import styles from '../src/styles';
+import Link from 'next/link';
 
+const styles = theme => ({
+  root: {
+    textAlign: 'center',
+    paddingTop: theme.spacing.unit * 20,
+  },
+});
 
-class About extends React.Component {
-  render() {
-    const { classes } = this.props;
+function About(props) {
+  const { classes } = props;
 
-    return (
-      <div className={classes.root}>
-        <Typography variant="display1" gutterBottom>
-          Material-UI
-        </Typography>
-        <Typography variant="subheading" gutterBottom>
-          example project about page
-        </Typography>
-        <Button variant="contained" color="primary" >
-          Do nothing button
-        </Button>
-        <div>
-          <Link href="/">
-            <a>main page</a>
-          </Link>
-        </div>
-      </div>
-    );
-  }
+  return (
+    <div className={classes.root}>
+      <Typography variant="display1" gutterBottom>
+        Material-UI
+      </Typography>
+      <Typography variant="subheading" gutterBottom>
+        about page
+      </Typography>
+      <Typography gutterBottom>
+        <Link href="/">
+          <a>Go to the main page</a>
+        </Link>
+      </Typography>
+      <Button variant="contained" color="primary">
+        Do nothing button
+      </Button>
+    </div>
+  );
 }
 
 About.propTypes = {

diff --git a/examples/nextjs/pages/index.js b/examples/nextjs/pages/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
@@ -8,10 +10,14 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogActions from '@material-ui/core/DialogActions';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
-import Link from 'next/link'
-
-import styles from '../src/styles';
+import Link from 'next/link';
 
+const styles = theme => ({
+  root: {
+    textAlign: 'center',
+    paddingTop: theme.spacing.unit * 20,
+  },
+});
 
 class Index extends React.Component {
   state = {
@@ -53,14 +59,14 @@ class Index extends React.Component {
         <Typography variant="subheading" gutterBottom>
           example project
         </Typography>
+        <Typography gutterBottom>
+          <Link href="/about">
+            <a>Go to the about page</a>
+          </Link>
+        </Typography>
         <Button variant="contained" color="secondary" onClick={this.handleClick}>
           Super Secret Password
         </Button>
-        <div>
-          <Link href="/about">
-            <a>about page</a>
-          </Link>
-        </div>
       </div>
     );
   }

diff --git a/examples/nextjs/src/styles.js b/examples/nextjs/src/styles.js