absolutely massive typescript porting time

2025-06-17 10:39:09 +00:00 · 2019-06-02 18:58:15 -05:00 · 2019-06-02 18:58:15 -05:00 · 30d08a630f
commit 30d08a630f
parent 01f238f515
159 changed files with 2563 additions and 3861 deletions
--- a/packages/roleypoly-ui/pages/_app.tsx
+++ b/packages/roleypoly-ui/pages/_app.tsx
@ -0,0 +1,113 @@
+// @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 | null = null
+    try {
+      user = await rpc.getCurrentUser()
+      ctx.user = user
+    } catch (e) {
+      if (e.code === 403) {
+        console.error('user not found')
+        ctx.user = null
+      } else {
+        console.error(e)
+        throw e
+      }
+    }
+    ctx.robots = 'INDEX, FOLLOW'
+
+    ctx.layout = {
+      noBackground: false
+    }
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx, rpc, router)
+    }
+
+    // console.log({ pageProps })
+
+    return { pageProps, user, 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)