book: MUI- and Next -related improvements

Author: tima101

book/1-start/.gitignore renamed to book/1-begin/.gitignore

@@ -1,5 +1,5 @@
 {
-  "name": "1-start",
+  "name": "1-begin",
   "version": "0.0.1",
   "license": "MIT",
   "scripts": {
@@ -9,12 +9,12 @@
     "lint": "eslint components pages lib"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.3",
+    "@material-ui/core": "^4.1.3",
+    "@material-ui/styles": "^4.1.2",
     "next": "^8.1.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-jss": "^8.6.1"
+    "react-dom": "^16.8.6"
   },
   "devDependencies": {}
 }

book/1-start/package.json renamed to book/1-begin/package.json

@@ -0,0 +1,13 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+import blue from '@material-ui/core/colors/blue';
+import grey from '@material-ui/core/colors/grey';
+
+const theme = createMuiTheme({
+  palette: {
+    primary: { main: blue[700] },
+    secondary: { main: grey[700] },
+    type: 'light',
+  },
+});
+
+export { theme };

book/1-start/yarn.lock renamed to book/1-begin/yarn.lock

@@ -9,22 +9,22 @@
     "lint": "eslint components pages lib"
   },
   "dependencies": {
-    "@material-ui/core": "3.9.3",
+    "@material-ui/core": "4.1.3",
+    "@material-ui/styles": "^4.1.2",
     "next": "8.1.0",
     "prop-types": "15.7.2",
     "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-jss": "8.6.1"
+    "react-dom": "16.8.6"
   },
   "devDependencies": {
-    "babel-eslint": "10.0.1",
-    "eslint": "5.16.0",
+    "babel-eslint": "10.0.2",
+    "eslint": "6.0.1",
     "eslint-config-airbnb": "17.1.0",
-    "eslint-plugin-import": "2.17.2",
+    "eslint-config-prettier": "5.1.0",
+    "eslint-plugin-import": "2.18.0",
     "eslint-plugin-jsx-a11y": "6.2.1",
-    "eslint-plugin-react": "7.12.4",
-    "eslint-config-prettier": "4.1.0",
-    "eslint-plugin-prettier": "3.0.1",
-    "prettier": "1.17.0"
+    "eslint-plugin-prettier": "3.1.0",
+    "eslint-plugin-react": "7.14.2",
+    "prettier": "1.18.2"
   }
-}
+}

book/1-end/lib/context.js

@@ -0,0 +1,51 @@
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider } from '@material-ui/styles';
+import App, { Container } from 'next/app';
+import React from 'react';
+
+import { theme } from '../lib/theme';
+
+import Header from '../components/Header';
+
+class MyApp extends App {
+  static async getInitialProps({ Component, ctx }) {
+    const pageProps = {};
+
+    if (Component.getInitialProps) {
+      Object.assign(pageProps, await Component.getInitialProps(ctx));
+    }
+
+    // console.log(pageProps);
+
+    return { pageProps };
+  }
+
+  componentDidMount() {
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles && jssStyles.parentNode) {
+      jssStyles.parentNode.removeChild(jssStyles);
+    }
+  }
+
+  render() {
+    const { Component, pageProps } = this.props;
+
+    // console.log(pageProps);
+
+    return (
+      <Container>
+        {/* ThemeProvider makes the theme available down the React
+              tree thanks to React context. */}
+        <ThemeProvider theme={theme}>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          {pageProps.noHeader ? null : <Header {...pageProps} />}
+          <Component {...pageProps} />
+        </ThemeProvider>
+      </Container>
+    );
+  }
+}
+
+export default MyApp;

book/1-end/lib/theme.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import JssProvider from 'react-jss/lib/JssProvider';
 import Document, { Head, Main, NextScript } from 'next/document';
-
-import getContext from '../lib/context';
+import { ServerStyleSheets } from '@material-ui/styles';
 
 class MyDocument extends Document {
   render() {
@@ -22,10 +20,7 @@ class MyDocument extends Document {
             rel="stylesheet"
             href="https://fonts.googleapis.com/css?family=Muli:300,400:latin"
           />
-          <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/icon?family=Material+Icons"
-          />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
           <link
             rel="stylesheet"
             href="https://storage.googleapis.com/builderbook/nprogress.min.css"
@@ -50,16 +45,15 @@ class MyDocument extends Document {
                 border-left: 0.25em solid #dfe2e5;
               }
               pre {
-                display: block;
-                overflow-x: auto;
-                padding: 0.5em;
-                background: #FFF;
+                display:block;
+                overflow-x:auto;
+                padding:0.5em;
+                background:#FFF;
+                color: #000;
                 border: 1px solid #ddd;
               }
               code {
                 font-size: 14px;
-                background: #FFF;
-                padding: 3px 5px;
               }
             `}
           </style>
@@ -82,28 +76,48 @@ class MyDocument extends Document {
   }
 }
 
-MyDocument.getInitialProps = ({ renderPage }) => {
-  const pageContext = getContext();
-  const page = renderPage(Component => props => (
-    <JssProvider
-      registry={pageContext.sheetsRegistry}
-      generateClassName={pageContext.generateClassName}
-    >
-      <Component pageContext={pageContext} {...props} />
-    </JssProvider>
-  ));
+MyDocument.getInitialProps = async (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.
+  const sheets = new ServerStyleSheets();
+  const originalRenderPage = ctx.renderPage;
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
 
   return {
-    ...page,
-    pageContext,
+    ...initialProps,
+    // Styles fragment is rendered after the app and page rendering finish.
     styles: (
-      <style
-        id="jss-server-side"
-        // eslint-disable-next-line
-        dangerouslySetInnerHTML={{
-          __html: pageContext.sheetsRegistry.toString(),
-        }}
-      />
+      <React.Fragment>
+        {initialProps.styles}
+        {sheets.getStyleElement()}
+      </React.Fragment>
     ),
   };
 };

book/1-end/lib/withLayout.js

@@ -1,6 +1,5 @@
 import Head from 'next/head';
 import Button from '@material-ui/core/Button';
-import withLayout from '../lib/withLayout';
 
 const Index = () => (
   <div style={{ padding: '10px 45px' }}>
@@ -13,4 +12,4 @@ const Index = () => (
   </div>
 );
 
-export default withLayout(Index);
+export default Index;