From c84bf2ea32ae346b75dfd3588de977db5032c5ca Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 24 Jul 2017 06:39:36 +0200
Subject: [PATCH] Update material-ui example (#2630)

---
 .../with-material-ui-next/components/App.js   | 23 ++++-----
 examples/with-material-ui-next/package.json   |  3 +-
 .../with-material-ui-next/pages/_document.js  | 14 +++---
 .../with-material-ui-next/styles/context.js   | 49 +++++++++++++++++++
 .../styles/createDefaultContext.js            | 38 --------------
 5 files changed, 71 insertions(+), 56 deletions(-)
 create mode 100644 examples/with-material-ui-next/styles/context.js
 delete mode 100644 examples/with-material-ui-next/styles/createDefaultContext.js

diff --git a/examples/with-material-ui-next/components/App.js b/examples/with-material-ui-next/components/App.js
index a7026458..ddb582a2 100644
--- a/examples/with-material-ui-next/components/App.js
+++ b/examples/with-material-ui-next/components/App.js
@@ -1,21 +1,19 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { JssProvider } from 'react-jss'
 import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles'
-import { getDefaultContext } from '../styles/createDefaultContext'
+import { getContext } from '../styles/context'
 
+// Apply some reset
 const styleSheet = createStyleSheet('App', theme => ({
   '@global': {
     html: {
       background: theme.palette.background.default,
-      fontFamily: theme.typography.fontFamily,
       WebkitFontSmoothing: 'antialiased', // Antialiasing.
       MozOsxFontSmoothing: 'grayscale' // Antialiasing.
     },
     body: {
       margin: 0
-    },
-    a: {
-      color: 'inherit'
     }
   }
 }))
@@ -34,13 +32,16 @@ class App extends Component {
   }
 
   render () {
-    const { styleManager, theme } = getDefaultContext()
+    const context = getContext()
+
     return (
-      <MuiThemeProvider styleManager={styleManager} theme={theme}>
-        <AppWrapper>
-          {this.props.children}
-        </AppWrapper>
-      </MuiThemeProvider>
+      <JssProvider registry={context.sheetsRegistry} jss={context.jss}>
+        <MuiThemeProvider theme={context.theme} sheetsManager={context.sheetsManager}>
+          <AppWrapper>
+            {this.props.children}
+          </AppWrapper>
+        </MuiThemeProvider>
+      </JssProvider>
     )
   }
 }
diff --git a/examples/with-material-ui-next/package.json b/examples/with-material-ui-next/package.json
index a533f313..bfac72be 100644
--- a/examples/with-material-ui-next/package.json
+++ b/examples/with-material-ui-next/package.json
@@ -5,7 +5,8 @@
     "material-ui": "next",
     "next": "latest",
     "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react-dom": "^15.5.4",
+    "react-jss": "^7.0.2"
   },
   "scripts": {
     "dev": "next",
diff --git a/examples/with-material-ui-next/pages/_document.js b/examples/with-material-ui-next/pages/_document.js
index 1941b5ec..61e4570d 100644
--- a/examples/with-material-ui-next/pages/_document.js
+++ b/examples/with-material-ui-next/pages/_document.js
@@ -1,20 +1,22 @@
 import React from 'react'
 import Document, { Head, Main, NextScript } from 'next/document'
-import { getDefaultContext, setDefaultContext } from '../styles/createDefaultContext'
+import { getContext, setContext } from '../styles/context'
 
 export default class MyDocument extends Document {
   static async getInitialProps (ctx) {
-    setDefaultContext()
+    // Reset the context for handling a new request.
+    setContext()
     const page = ctx.renderPage()
-    const styleContext = getDefaultContext()
+    // Get the context with the collected side effects.
+    const context = getContext()
     return {
       ...page,
-      styles: <style id='jss-server-side' dangerouslySetInnerHTML={{ __html: styleContext.styleManager.sheetsToString() }} />
+      styles: <style id='jss-server-side' dangerouslySetInnerHTML={{ __html: context.sheetsRegistry.toString() }} />
     }
   }
 
   render () {
-    const styleContext = getDefaultContext()
+    const context = getContext()
     return (
       <html lang='en'>
         <Head>
@@ -29,7 +31,7 @@ export default class MyDocument extends Document {
             }
           />
           {/* PWA primary color */}
-          <meta name='theme-color' content={styleContext.theme.palette.primary[500]} />
+          <meta name='theme-color' content={context.theme.palette.primary[500]} />
           <link
             rel='stylesheet'
             href='https://fonts.googleapis.com/css?family=Roboto:300,400,500'
diff --git a/examples/with-material-ui-next/styles/context.js b/examples/with-material-ui-next/styles/context.js
new file mode 100644
index 00000000..fae1b4b8
--- /dev/null
+++ b/examples/with-material-ui-next/styles/context.js
@@ -0,0 +1,49 @@
+import { create } from 'jss'
+import preset from 'jss-preset-default'
+import { SheetsRegistry } from 'react-jss'
+import createPalette from 'material-ui/styles/palette'
+import createMuiTheme from 'material-ui/styles/theme'
+import { purple, green } from 'material-ui/colors'
+import createGenerateClassName from 'material-ui/styles/createGenerateClassName'
+
+const theme = createMuiTheme({
+  palette: createPalette({
+    primary: purple,
+    accent: green
+  })
+})
+
+// Configure JSS
+const jss = create(preset())
+jss.options.createGenerateClassName = createGenerateClassName
+
+function createContext () {
+  return {
+    jss,
+    theme,
+    // This is needed in order to deduplicate the injection of CSS in the page.
+    sheetsManager: new WeakMap(),
+    // This is needed in order to inject the critical CSS.
+    sheetsRegistry: new SheetsRegistry()
+  }
+}
+
+export function setContext () {
+  // Singleton hack as there is no way to pass variables from _document.js to pages yet.
+  global.__INIT_MATERIAL_UI__ = createContext()
+}
+
+export function getContext () {
+  // Make sure to create a new store for every server-side request so that data
+  // isn't shared between connections (which would be bad)
+  if (!process.browser) {
+    return global.__INIT_MATERIAL_UI__
+  }
+
+  // Reuse context on the client-side
+  if (!global.__INIT_MATERIAL_UI__) {
+    global.__INIT_MATERIAL_UI__ = createContext()
+  }
+
+  return global.__INIT_MATERIAL_UI__
+}
diff --git a/examples/with-material-ui-next/styles/createDefaultContext.js b/examples/with-material-ui-next/styles/createDefaultContext.js
deleted file mode 100644
index 4079947f..00000000
--- a/examples/with-material-ui-next/styles/createDefaultContext.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
-import createPalette from 'material-ui/styles/palette'
-import createMuiTheme from 'material-ui/styles/theme'
-import { purple, green } from 'material-ui/colors'
-
-const createDefaultContext = () =>
-  MuiThemeProvider.createDefaultContext({
-    theme: createMuiTheme({
-      palette: createPalette({
-        primary: purple,
-        accent: green
-      })
-    })
-  })
-
-// Singleton hack as there is no way to pass variables from _document.js to pages yet.
-let context = null
-
-export function setDefaultContext () {
-  context = createDefaultContext()
-}
-
-export function getDefaultContext () {
-  // Make sure to create a new store for every server-side request so that data
-  // isn't shared between connections (which would be bad)
-  if (!process.browser) {
-    return context
-  }
-
-  // Reuse store on the client-side
-  if (!context) {
-    context = createDefaultContext()
-  }
-
-  return context
-}
-
-export default createDefaultContext