Refactoring Layout / AppFrame

Author: adostal

client/components/Layout.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import {AppFrame} from './AppFrame';
+
+export const Layout: React.SFC = ({children}) => <AppFrame>{children}</AppFrame>;

client/components/index.ts

@@ -1 +1,2 @@
 export * from './AppFrame';
+export * from './Layout';

client/with/withAuthAdmin.tsx

@@ -4,7 +4,7 @@ import gql from 'graphql-tag';
 import Router from 'next/router';
 import cookie from 'cookie';
 import {Account, Query} from '@graphql-model';
-import {NextDocumentContext} from 'next/document';
+import {DocumentProps, NextDocumentContext} from 'next/document';
 
 interface LoggedInUserResponse {
     readonly loggedInUser: Pick<Account, 'id' | 'firstName' | 'lastName'>;
@@ -49,7 +49,7 @@ export interface WithAuthAdminProps extends LoggedInUserResponse {
     readonly logout: (client: ApolloClient<any>) => () => Promise<void>;
 }
 
-export const withAuthAdmin = (BaseComponent: React.ComponentType<WithAuthAdminProps>) => {
+export const withAuthAdmin = (BaseComponent: React.ComponentType<WithAuthAdminProps> & {getInitialProps?(ctx: NextDocumentContext): DocumentProps}) => {
     return class extends React.Component<LoggedInUserResponse> {
         handleOnLogout = (apolloClient: ApolloClient<any>) => async () => {
             document.cookie = cookie.serialize('token', '', {
@@ -65,8 +65,8 @@ export const withAuthAdmin = (BaseComponent: React.ComponentType<WithAuthAdminPr
                 // If not signed in, send them somewhere more useful
                 await redirect('/login', context);
             }
-
-            return {loggedInUser};
+            const props = BaseComponent.getInitialProps ? await BaseComponent.getInitialProps(context) : {};
+            return {...props, loggedInUser};
         }
 
         render() {

client/with/withMaterialUi.tsx

@@ -1,7 +1,5 @@
 import {CssBaseline, MuiThemeProvider, PaletteType} from '@material-ui/core';
 import * as React from 'react';
-
-import {AppFrame} from '../components';
 import {paletteType, savePaletteType, ThemeContext, ThemeContextType} from '../contexts';
 import {PageContext, StylesContext} from '../styles/StylesContext';
 
@@ -56,11 +54,9 @@ export const withMaterialUi = (BaseComponent: React.ComponentClass & {getInitial
                 <JssProvider jss={jss} registry={sheetsRegistry} generateClassName={generateClassName}>
                     <MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
                         <CssBaseline />
-                        <AppFrame>
-                            <ThemeContext.Provider value={this.state}>
-                                <BaseComponent {...this.props} />
-                            </ThemeContext.Provider>
-                        </AppFrame>
+                        <ThemeContext.Provider value={this.state}>
+                            <BaseComponent {...this.props} />
+                        </ThemeContext.Provider>
                     </MuiThemeProvider>
                 </JssProvider>
             );

pages/_app.tsx

@@ -17,6 +17,14 @@ Router.onRouteChangeError = () => NProgress.done();
 const {Container, default: App} = require('next/app');
 
 class AldaApp extends App {
+    static async getInitialProps({Component, ctx}: any) {
+        return {
+            pageProps: {
+                ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
+            },
+        };
+    }
+
     render() {
         const {Component, pageProps, apolloClient} = this.props;
         return (

pages/_document.tsx

@@ -21,7 +21,7 @@ type ContextWithLocale = NextDocumentContext & {req: {locale: string; localeData
 
 export default class extends Document {
     static async getInitialProps({renderPage, req: {locale, localeDataScript}}: ContextWithLocale) {
-        const pageContext = StylesContext.getPageContext('dark');
+        const pageContext = StylesContext.getPageContext('light');
         const page = renderPage((Component: any) => (props) => (
             <JssProvider registry={pageContext.sheetsRegistry} generateClassName={pageContext.generateClassName}>
                 <Component pageContext={pageContext} {...props} />

pages/admin/index.tsx

@@ -1,19 +1,22 @@
 import * as React from 'react';
 import {ApolloConsumer} from 'react-apollo';
 import {withAuthAdmin, WithAuthAdminProps} from '../../client/with';
+import {Layout} from '../../client/components';
 
 class Page extends React.Component<WithAuthAdminProps> {
     render() {
         const {logout, loggedInUser} = this.props;
         return (
-            <ApolloConsumer>
-                {(client) => (
-                    <div>
-                        Hello {loggedInUser.firstName}!<br />
-                        <button onClick={logout(client)}>Sign out</button>
-                    </div>
-                )}
-            </ApolloConsumer>
+            <Layout>
+                <ApolloConsumer>
+                    {(client) => (
+                        <div>
+                            Hello {loggedInUser.firstName}!<br />
+                            <button onClick={logout(client)}>Sign out</button>
+                        </div>
+                    )}
+                </ApolloConsumer>
+            </Layout>
         );
     }
 }

pages/index.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {Typography} from '@material-ui/core';
 import {Lang} from '../client/Lang';
+import {Layout} from '../client/components';
 
 export default class extends React.Component {
     render() {
         return (
-            <div>
+            <Layout>
                 <Typography>
                     <FormattedMessage id={Lang.TITLE} />
                 </Typography>
-            </div>
+            </Layout>
         );
     }
 }

pages/login/index.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import {Layout} from '../../client/components';
 
 export default class extends React.Component {
     render() {
-        return <div>Login...</div>;
+        return <Layout>Login...</Layout>;
     }
 }