chapter-1 and introductions - done with updates

async-labs · Dec 16, 2020 · 09271a9 · 09271a9
1 parent a49b260
commit 09271a9
Show file tree

Hide file tree

Showing 122 changed files with 61,044 additions and 65,088 deletions.
diff --git a/README.md b/README.md
@@ -443,7 +443,7 @@ All code in this repository is provided under the [MIT License](https://github.c
 │   │   ├── Header.jsx
 │   │   ├── MenuWithAvatar.jsx                   
 │   │   ├── Notifier.jsx
-│   │   ├── SharedStyles.jsx
+│   │   ├── SharedStyles.js
 ├── lib
 │   ├── api
 │   │   ├── admin.js

diff --git a/book/1-begin/package.json b/book/1-begin/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "@material-ui/core": "4.11.0",
     "@material-ui/styles": "4.10.0",
-    "next": "9.1.6",
+    "next": "^9.1.2",
     "prop-types": "15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

diff --git a/book/1-begin/yarn.lock b/book/1-begin/yarn.lock
diff --git a/book/1-end/package.json b/book/1-end/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@material-ui/core": "4.11.0",
     "@material-ui/styles": "4.10.0",
-    "next": "9.1.6",
+    "next": "^9.1.2",
     "prop-types": "15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

diff --git a/book/1-end/pages/_app.jsx b/book/1-end/pages/_app.jsx
@@ -2,24 +2,19 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/styles';
 import App from 'next/app';
 import React from 'react';
+import Head from 'next/head';
+import PropTypes from 'prop-types';
 
 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 };
-  }
+const propTypes = {
+  Component: PropTypes.elementType.isRequired,
+  pageProps: PropTypes.object.isRequired, // eslint-disable-line
+};
 
+class MyApp extends App {
   componentDidMount() {
     // Remove the server-side injected CSS.
     const jssStyles = document.querySelector('#jss-server-side');
@@ -35,8 +30,9 @@ class MyApp extends App {
 
     return (
       <ThemeProvider theme={theme}>
-        {/* ThemeProvider makes the theme available down the React tree thanks to React context. */}
-        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <Head>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        </Head>
         <CssBaseline />
         <Header {...pageProps} />
         <Component {...pageProps} />
@@ -45,4 +41,6 @@ class MyApp extends App {
   }
 }
 
+MyApp.propTypes = propTypes;
+
 export default MyApp;
diff --git a/book/1-end/pages/_document.jsx b/book/1-end/pages/_document.jsx
@@ -8,7 +8,6 @@ class MyDocument extends Document {
       <Html lang="en">
         <Head>
           <meta charSet="utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <meta name="google" content="notranslate" />
           <meta name="theme-color" content="#1976D2" />
 
@@ -114,10 +113,10 @@ MyDocument.getInitialProps = async (ctx) => {
     ...initialProps,
     // Styles fragment is rendered after the app and page rendering finish.
     styles: (
-      <React.Fragment>
+      <>
         {initialProps.styles}
         {sheets.getStyleElement()}
-      </React.Fragment>
+      </>
     ),
   };
 };

diff --git a/book/1-end/yarn.lock b/book/1-end/yarn.lock
diff --git a/book/2-begin/components/Header.js → book/2-begin/components/Header.jsx b/book/2-begin/components/Header.js → book/2-begin/components/Header.jsx
diff --git a/book/2-begin/components/SharedStyles.js b/book/2-begin/components/SharedStyles.js
@@ -2,7 +2,6 @@ const styleBigAvatar = {
   width: '80px',
   height: '80px',
   margin: '0px auto 15px',
-
 };
 
 const styleRaisedButton = {

diff --git a/book/2-begin/package.json b/book/2-begin/package.json
@@ -16,7 +16,7 @@
     "express": "4.17.1",
     "express-session": "1.17.1",
     "mongoose": "5.10.0",
-    "next": "9.1.6",
+    "next": "^9.1.2",
     "prop-types": "15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

diff --git a/book/2-begin/pages/_app.jsx b/book/2-begin/pages/_app.jsx
@@ -1,25 +1,20 @@
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/styles';
 import App from 'next/app';
+import PropTypes from 'prop-types';
 import React from 'react';
+import Head from 'next/head';
 
 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 };
-  }
+const propTypes = {
+  Component: PropTypes.elementType.isRequired,
+  pageProps: PropTypes.object.isRequired, // eslint-disable-line
+};
 
+class MyApp extends App {
   componentDidMount() {
     // Remove the server-side injected CSS.
     const jssStyles = document.querySelector('#jss-server-side');
@@ -37,6 +32,9 @@ class MyApp extends App {
       <ThemeProvider theme={theme}>
         {/* ThemeProvider makes the theme available down the React tree thanks to React context. */}
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <Head>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        </Head>
         <CssBaseline />
         <Header {...pageProps} />
         <Component {...pageProps} />
@@ -45,4 +43,6 @@ class MyApp extends App {
   }
 }
 
+MyApp.propTypes = propTypes;
+
 export default MyApp;
diff --git a/book/2-begin/pages/_document.jsx b/book/2-begin/pages/_document.jsx
@@ -8,7 +8,6 @@ class MyDocument extends Document {
       <Html lang="en">
         <Head>
           <meta charSet="utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <meta name="google" content="notranslate" />
           <meta name="theme-color" content="#1976D2" />
 
@@ -114,10 +113,10 @@ MyDocument.getInitialProps = async (ctx) => {
     ...initialProps,
     // Styles fragment is rendered after the app and page rendering finish.
     styles: (
-      <React.Fragment>
+      <>
         {initialProps.styles}
         {sheets.getStyleElement()}
-      </React.Fragment>
+      </>
     ),
   };
 };