app wrapper update for ctx and errors

This commit is contained in:
41666 2019-03-18 04:50:58 -05:00
parent f5ae88f974
commit 04e64df35a

View file

@ -1,73 +1,78 @@
// @flow
import * as React from 'react' import * as React from 'react'
import App, { Container } from 'next/app' import App, { Container } from 'next/app'
import Head from 'next/head' import Head from 'next/head'
import Layout from '../components/layout' import Layout from '../components/layout'
import { withCookies } from '../config/rpc' import { withCookies } from '../config/rpc'
import ErrorP from './_error'
type NextPage = React.Component<any> & React.StatelessFunctionalComponent<any> & {
getInitialProps: (ctx: any, ...args: any) => any
}
class RoleypolyApp extends App { class RoleypolyApp extends App {
static async getInitialProps ({ Component, ctx }) { static async getInitialProps ({ Component, ctx }: { Component: NextPage, ctx: {[x:string]: any}}) {
// Fix for next/error rendering instead of our error page.
// Who knows why this would ever happen.
if (Component.displayName === 'ErrorPage' || Component.constructor.name === 'ErrorPage') {
Component = ErrorP
}
// console.log({ Component })
let pageProps = {} let pageProps = {}
const rpc = withCookies(ctx) const rpc = withCookies(ctx)
const user = await rpc.getCurrentUser()
ctx.user = user
ctx.layout = {
noBackground: false
}
if (Component.getInitialProps) { if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx) pageProps = await Component.getInitialProps(ctx, rpc)
} }
return { pageProps, user: await rpc.getCurrentUser() } // console.log({ pageProps })
return { pageProps, user, layout: ctx.layout }
} }
componentDidMount () { catchFOUC () {
this.loadTypekit(document)
this.waitForFOUC()
}
loadTypekit (d) {
var config = {
kitId: 'bck0pci',
scriptTimeout: 1500,
async: true
}
const h = d.documentElement
const t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive' }, config.scriptTimeout)
const tk = d.createElement('script')
const s = d.getElementsByTagName('script')[0]
let f = false
let a
h.className += ' wf-loading'
tk.src = 'https://use.typekit.net/' + config.kitId + '.js'
tk.async = true
tk.onload = tk.onreadystatechange = function () {
a = this.readyState
if (f || (a && a !== 'complete' && a !== 'loaded')) return
f = true
clearTimeout(t)
try { window.Typekit.load(config) } catch (e) {}
}
s.parentNode.insertBefore(tk, s)
}
// wait one second, add FOUC de-protection.
waitForFOUC () {
setTimeout(() => { setTimeout(() => {
document.documentElement.className += ' force-active'// if (document.documentElement) document.documentElement.className += ' force-active'
}, 1500) }, 1500)
} }
render () { render () {
const { Component, pageProps, router, user } = this.props const { Component, pageProps, router, user, layout } = this.props
// Fix for next/error rendering instead of our error page.
// Who knows why this would ever happen.
const ErrorCaughtComponent = (Component.displayName === 'ErrorPage' || Component.constructor.name === 'ErrorPage') ? ErrorP : Component
return ( return (
<Container> <Container>
<noscript>Hey there. Unfortunately, we require JS for this app to work. Please take this rose as retribution. 🌹</noscript> <noscript>Hey there... Unfortunately, we require JS for this app to work. Please take this rose as retribution. 🌹</noscript>
<Head> <Head>
<meta charSet='utf-8' /> <meta charSet='utf-8' />
<title key='title'>Roleypoly</title> <title key='title'>Roleypoly</title>
<meta name='viewport' content='width=device-width, initial-scale=1' /> <meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='icon' href='/static/favicon.png' /> <link rel='icon' href='/static/favicon.png' />
<script key='typekit'>{`
(function(d) {
var config = {
kitId: 'bck0pci',
scriptTimeout: 1500,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);//
`}
</script>
</Head> </Head>
<Layout user={user}> <Layout user={user} {...layout} >
<Component {...pageProps} router={router} /> <ErrorCaughtComponent {...pageProps} router={router} />
</Layout> </Layout>
</Container> </Container>
) )