mirror of
https://github.com/roleypoly/roleypoly-v1.git
synced 2025-04-25 12:19:10 +00:00
app wrapper update for ctx and errors
This commit is contained in:
parent
f5ae88f974
commit
04e64df35a
1 changed files with 46 additions and 41 deletions
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Add table
Reference in a new issue