mirror of
https://github.com/roleypoly/roleypoly-v1.git
synced 2025-04-25 12:19:10 +00:00
115 lines
3.8 KiB
TypeScript
115 lines
3.8 KiB
TypeScript
// @flow
|
|
import * as React from 'react'
|
|
import App, { Container } from 'next/app'
|
|
import Head from 'next/head'
|
|
import Layout from '../components/layout'
|
|
import { withCookies } from '../config/rpc'
|
|
import { Provider } from 'react-redux'
|
|
import ErrorP, { Overlay } from './_error'
|
|
import styled from 'styled-components'
|
|
import { withRedux } from '../config/redux'
|
|
import { UserPartial } from '@roleypoly/types'
|
|
|
|
// type NextPage = React.Component<any> | React.FunctionComponent<any> & {
|
|
// getInitialProps: (ctx: any, ...args: any) => any
|
|
// }
|
|
|
|
const MissingJS = styled.noscript`
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
font-size: 1.3em;
|
|
padding: 1em;
|
|
`
|
|
|
|
class RoleypolyApp extends App {
|
|
static async getInitialProps ({ Component, ctx, router }: any) {
|
|
// Fix for next/error rendering instead of our error page.
|
|
// Who knows why this would ever happen.
|
|
// if (Component.constructor.name === 'ErrorPage') {
|
|
// Component = ErrorP
|
|
// }
|
|
|
|
// // console.log({ Component })
|
|
|
|
// let pageProps = {}
|
|
// const rpc = withCookies()
|
|
// let user: UserPartial | undefined = undefined
|
|
// try {
|
|
// user = undefined
|
|
// ctx.user = user
|
|
// } catch (e) {
|
|
// if (e.code === 403) {
|
|
// console.error('user not found')
|
|
// ctx.user = null
|
|
// } else {
|
|
// console.error(e)
|
|
// throw e
|
|
// }
|
|
// }
|
|
let pageProps = {}
|
|
|
|
ctx.robots = 'INDEX, FOLLOW'
|
|
|
|
ctx.layout = {
|
|
noBackground: false
|
|
}
|
|
|
|
if (Component.getInitialProps) {
|
|
pageProps = await Component.getInitialProps(ctx, {}, router)
|
|
}
|
|
|
|
// console.log({ pageProps })
|
|
|
|
return { pageProps, layout: ctx.layout, robots: ctx.robots }
|
|
}
|
|
|
|
catchFOUC () {
|
|
setTimeout(() => {
|
|
if (document.documentElement) document.documentElement.className += ' force-active'
|
|
}, 700)
|
|
}
|
|
|
|
componentDidMount () {
|
|
this.catchFOUC()
|
|
}
|
|
|
|
render () {
|
|
const { Component, pageProps, router, user, layout, robots, store } = this.props as any
|
|
// 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 <Container>
|
|
<MissingJS>
|
|
<Overlay />
|
|
Hey there... Unfortunately, we require JS for this app to work. Please take this rose as retribution. 🌹
|
|
</MissingJS>
|
|
<Head>
|
|
<meta charSet='utf-8' />
|
|
<title key='title'>Roleypoly</title>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1' />
|
|
<link rel='icon' href='/static/favicon.png' />
|
|
<meta key='robots' name='robots' content={robots} />
|
|
<script key='typekit' dangerouslySetInnerHTML={{ __html: `
|
|
(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);//
|
|
` }} />
|
|
</Head>
|
|
<Provider store={store}>
|
|
<Layout user={user} {...layout} router={router}>
|
|
<ErrorCaughtComponent {...pageProps} router={router} originalName={Component.displayName || Component.constructor.name} />
|
|
</Layout>
|
|
</Provider>
|
|
</Container>
|
|
}
|
|
}
|
|
|
|
export default withRedux(RoleypolyApp)
|