Use _app.js instead of wrapping every page with a HoC

.prettierignore

@@ -2,4 +2,5 @@
 flow-typed/*
 node_modules/
 packages/gdl-frontend/locale/
-**/.next
+**/.next
+.git/

packages/admin-frontend/pages/_app.js

@@ -10,9 +10,14 @@ import * as React from 'react';
 import NextApp, { Container as NextContainer } from 'next/app';
 import Error from 'next/error';
 import type { $Request, $Response } from 'express';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import JssProvider from 'react-jss/lib/JssProvider';
 
 import { hasClaim, claims } from 'gdl-auth';
 
+import getPageContext from '../getPageContext';
+
 type Context = {
   req?: $Request,
   res?: $Response
@@ -52,6 +57,11 @@ class App extends NextApp {
     isClient: false
   };
 
+  constructor(props: {}) {
+    super(props);
+    this.pageContext = getPageContext();
+  }
+
   componentDidMount() {
     this.setState({ isClient: true });
   }
@@ -61,7 +71,22 @@ class App extends NextApp {
 
     const Page = userHasAdminPrivileges ? (
       this.state.isClient ? (
-        <Component {...pageProps} />
+        <JssProvider
+          jss={this.pageContext.jss}
+          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 />
+            <Component pageContext={this.pageContext} {...pageProps} />
+          </MuiThemeProvider>
+        </JssProvider>
       ) : null
     ) : (
       <Error statusCode={403} {...pageProps} />

packages/admin-frontend/pages/export.js

@@ -10,7 +10,6 @@ import Typography from '@material-ui/core/Typography';
 
 import type { Language } from '../types';
 import { fetchLanguages, exportBooks } from '../lib/fetch';
-import withMuiRoot from '../withMuiRoot';
 import Container from '../components/Container';
 
 // Current book sources. Currently there's no endpoint to get these, so hardcode here for now
@@ -156,4 +155,4 @@ class Export extends React.Component<{ languages: Array<Language> }, State> {
   }
 }
 
-export default withMuiRoot(Export);
+export default Export;

packages/admin-frontend/pages/featured.js

@@ -24,7 +24,6 @@ import {
   saveFeaturedContent,
   deleteFeaturedContent
 } from '../lib/fetch';
-import withMuiRoot from '../withMuiRoot';
 import Container from '../components/Container';
 import type { FeaturedContent, Language } from '../types';
 
@@ -69,11 +68,11 @@ class EditFeaturedContent extends React.Component<
     }
   };
 
-  putFeaturedContent = async content => {
+  putFeaturedContent = async (content: FeaturedContent) => {
     await updateFeaturedContent(content);
   };
 
-  postFeaturedContent = async content => {
+  postFeaturedContent = async (content: FeaturedContent) => {
     const result = await saveFeaturedContent(
       content,
       this.state.selectedLanguage
@@ -324,4 +323,4 @@ function handleValidate(values) {
   return errors;
 }
 
-export default withMuiRoot(EditFeaturedContent);
+export default EditFeaturedContent;

packages/gdl-frontend/hocs/index.js

@@ -9,4 +9,3 @@
 export { default as withI18n } from './withI18n';
 export { default as errorPage } from './errorPage';
 export { default as securePage } from './securePage';
-export { default as withMuiRoot } from './withMuiRoot';

packages/gdl-frontend/pages/_app.js

@@ -17,6 +17,10 @@ import React from 'react';
 import NextApp, { Container as NextContainer } from 'next/app';
 import { hydrate } from 'react-emotion';
 import Router from 'next/router';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import JssProvider from 'react-jss/lib/JssProvider';
+import getPageContext from '../getPageContext';
 
 import Raven from '../lib/raven';
 import type { Context } from '../types';
@@ -51,6 +55,11 @@ class App extends NextApp {
     return { pageProps };
   }
 
+  constructor(props: {}) {
+    super(props);
+    this.pageContext = getPageContext();
+  }
+
   // componentDidCatch works only in the client, not on the server
   componentDidCatch(error: *, errorInfo: *) {
     Raven.captureException(error);
@@ -63,6 +72,11 @@ class App extends NextApp {
    */
   componentDidMount() {
     window.addEventListener('storage', this.logout, false);
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles && jssStyles.parentNode) {
+      jssStyles.parentNode.removeChild(jssStyles);
+    }
   }
 
   // Stop listening to logout events
@@ -85,7 +99,25 @@ class App extends NextApp {
       <NextContainer>
         <GdlThemeProvider>
           <GdlI18nProvider>
-            <Component {...pageProps} />
+            {/* Wrap every page in Jss and Theme providers */}
+            <JssProvider
+              jss={this.pageContext.jss}
+              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} />
+              </MuiThemeProvider>
+            </JssProvider>
           </GdlI18nProvider>
         </GdlThemeProvider>
       </NextContainer>

packages/gdl-frontend/pages/_document.js

@@ -9,8 +9,7 @@
 import React from 'react';
 import NextDocument, { Head, Main, NextScript } from 'next/document';
 import { extractCritical } from 'emotion-server';
-import JssProvider from 'react-jss/lib/JssProvider';
-import getPageContext from '../getPageContext';
+import PropTypes from 'prop-types';
 
 import type { Context } from '../types';
 import config from '../config';
@@ -28,18 +27,20 @@ const precomposed144 = require('../static/img/apple-icon-144x144-precomposed.png
 
 export default class Document extends NextDocument {
   static getInitialProps({ renderPage, req }: Context & { renderPage: any }) {
-    const pageContext = getPageContext();
-
     // Needed to SSR MUI's styles
-    const page = renderPage(Component => props => (
-      <JssProvider
-        registry={pageContext.sheetsRegistry}
-        generateClassName={pageContext.generateClassName}
-      >
-        <Component pageContext={pageContext} {...props} />
-      </JssProvider>
-    ));
+    let pageContext;
+    const page = renderPage(Component => {
+      const WrappedComponent = props => {
+        pageContext = props.pageContext;
+        return <Component {...props} />;
+      };
+
+      WrappedComponent.propTypes = {
+        pageContext: PropTypes.object.isRequired
+      };
 
+      return WrappedComponent;
+    });
     // Extract Emotion's styles for SSR
     const emotionStyles = extractCritical(page.html);
 

packages/gdl-frontend/pages/auth/sign-in.js

@@ -11,7 +11,7 @@ import styled from 'react-emotion';
 import { Trans } from '@lingui/react';
 import { Button, Typography } from '@material-ui/core';
 
-import { withI18n, withMuiRoot } from '../../hocs';
+import { withI18n } from '../../hocs';
 import type { I18n } from '../../types';
 import { A, Container } from '../../elements';
 import Layout from '../../components/Layout';
@@ -75,4 +75,4 @@ const LoginPage = ({ i18n }: Props) => (
   </Layout>
 );
 
-export default withMuiRoot(withI18n(LoginPage));
+export default withI18n(LoginPage);

packages/gdl-frontend/pages/auth/signed-in.js

@@ -10,7 +10,6 @@ import * as React from 'react';
 import { Trans } from '@lingui/react';
 import Router from 'next/router';
 
-import { withMuiRoot } from '../../hocs';
 import Layout from '../../components/Layout';
 import Container from '../../components/Container';
 import { setToken } from '../../lib/auth/token';
@@ -39,4 +38,4 @@ class Success extends React.Component<*> {
   }
 }
 
-export default withMuiRoot(Success);
+export default Success;

packages/gdl-frontend/pages/books/_book.js

@@ -30,7 +30,7 @@ import {
 import config from '../../config';
 import { fetchBook, fetchSimilarBooks } from '../../fetch';
 import type { Book, BookDetails, Context } from '../../types';
-import { errorPage, withMuiRoot } from '../../hocs';
+import { errorPage } from '../../hocs';
 import { Link } from '../../routes';
 import BrowseLink from '../../components/BrowseLink';
 import Layout from '../../components/Layout';
@@ -371,4 +371,4 @@ class BookPage extends React.Component<Props, { anchorEl: ?HTMLElement }> {
   }
 }
 
-export default withMuiRoot(errorPage(BookPage));
+export default errorPage(BookPage);